- 타입스크립트를 사용해야 합니다!
- 검색어를 입력해 영화를 검색할 수 있어야 합니다!
- Search 컴포넌트에 영화 제목을 영문으로 입력한 뒤, 검색 버튼을 누르거나 Enter 키를 입력하면 검색 결과를 볼 수 있습니다.
- Search 컴포넌트 구현
- 영화 정보 상태 관리 구현
- 영화 목록 출력 및 로딩 애니메이션
- 영화 목록 내 항목 표시를 위한 컴포넌트
- 검색된 결과를 통해 영화의 상세 정보를 볼 수 있어야 합니다!
- 검색된 영화의 포스터를 클릭하면 상세 정보를 볼 수 있습니다.
- 영화 상세 정보 확인 기능 구현
- 클라이언트(브라우저)에서 API Key(
7035c60c)가 노출되지 않아야 합니다! - API 키 은닉을 위해 Vercel 서버리스 함수를 활용하였습니다.
- API 키 은닉을 위한 서버리스 함수 도입
- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다!
- Vue Composition API를 사용해 보세요.
- API 요청(Request)에 대한 로딩 애니메이션을 추가해 보세요.
- 영화 목록 출력 및 로딩 애니메이션
- 영화 상세 정보 페이지 Skeleton UI 적용
- 영화를 검색하거나 더 보기 버튼으로 목록을 추가할 때 로딩 애니메이션 (kind of 스피너...?)이 노출됩니다.
- 포스터를 클릭해서 영화 상세 정보를 불러올 때 Skeleton UI가 노출됩니다.
- Suspense 적용해보려 했는데 적용하기엔 컴포넌트 Depth가 뭔가 낮아서 적용하지 않았습니다.
- 영화 상세 검색으로 출력할 영화 포스터를 더 높은 해상도를 사용해 보세요.
- 영화 포스터 주소에 포함된
SX300를SX700과 같이 더 큰 숫자로 수정해 요청하세요. - 영화 상세 정보 확인 기능 구현
- 실시간으로 이미지의 크기를 다르게 요청하는 것이 어떤 원리로 가능한지 조사해 보세요.
- 실시간 이미지 리사이징...이라는 기술로 알고 있습니다. 검색해보면 AWS Lambda@Edge를 활용한 구현 사례를 많이 찾아볼 수 있고, sharp라는 라이브러리 또한 활용하고 있습니다. 원리는 URI에 이미지의 너비와 높이 정보, 또는 확장자 등의 정보를 Query String으로 요청하면 이를 Lambda(서버리스 함수)가 S3(스토리지 서버)에게 원본 이미지를 받은 뒤 리사이징 해주거나, 다른 확장자의 이미지를 가져다가 클라이언트로 보내주거나 하는 것으로 이해했습니다. 혹시 틀린 부분이 있으면 알려주세요!
- 영화 포스터 주소에 포함된
- 요청 주소에 HTTP가 아닌 HTTPS 프로토콜을 사용해야 하는 이유를 조사해 보세요.
- 다양한 이유가 있습니다. (보안, SEO, CORS 등등..)
- 보안 : HTTPS는 SSL/TLS 인증서에 기반한 웹 사이트 제공자의 신원 확인, 암호화된 통신 등을 통해 각종 정보보안과 관련한 문제를 해결할 수 있습니다.
- SEO : HTTPS 프로토콜을 사용하는 웹 사이트는 Google의 검색 엔진 기준으로 HTTP 프로토콜을 사용하는 웹 사이트보다 상위에 노출됩니다.
- CORS : 요즘은 많은 웹 서비스가 HTTPS 프로토콜을 활용하고 있는데, 해당 서비스의 자원을 요청할 때 만약 요청하는 주체가 HTTPS 프로토콜을 사용하고 요청을 받는 주체가 HTTP 프로토콜을 사용한다면, 이는 CORS 정책에 위반되어 요청이 차단됩니다.
- Bootstrap, Tailwind 같은 UI 프레임워크를 사용하거나 혹은 직접 프로젝트를 예쁘게 만들어 보세요.
- Open Graph 혹은 Twitter Cards로 메타 정보를 제공해 보세요.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent