영화 검색 프로젝트

[bgyoons]

📌 11주차 과제[Mission11]

API 사용에 대해 궁금한 점은 '#05_학습_질의응답' 채널에 질문 남겨주세요!

필수 과제

• 내용
  • Vue.js와 영화 검색 API를 활용해 프로젝트를 만드세요.

기본 요구사항

• [x] 타입스크립트를 사용해야 합니다!
• [x] 검색어를 입력해 영화를 검색할 수 있어야 합니다!
• [x] 검색된 결과를 통해 영화의 상세 정보를 볼 수 있어야 합니다!
• [x] 클라이언트(브라우저)에서 API Key(7035c60c)가 노출되지 않아야 합니다!
• [x] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다!

선택 요구사항

• [x] Vue Composition API를 사용해 보세요.
• [ ] API 요청(Request)에 대한 로딩 애니메이션을 추가해 보세요.
• [ ] 영화 상세 검색으로 출력할 영화 포스터를 더 높은 해상도 사용해 보세요.
  • [ ] 영화 포스터 주소에 포함된 SX300를 SX700과 같이 더 큰 숫자로 수정해 요청하세요.
  • [ ] 실시간으로 이미지의 크기를 다르게 요청하는 것이 어떤 원리로 가능한지 조사해 보세요.
• [ ] 요청 주소에 HTTP가 아닌 HTTPS 프로토콜을 사용해야 하는 이유를 조사해 보세요.
• [x] Bootstrap, Tailwind 같은 UI 프레임워크를 사용하거나 혹은 직접 프로젝트를 예쁘게 만들어 보세요.
• [ ] Open Graph 혹은 Twitter Cards로 메타 정보를 제공해 보세요.

[bgyoons]

Error: Property 'env' does not exist on type 'ImportMeta'.

// api.ts
const API_END_POINT = `https://omdbapi.com?apikey=${import.meta.env}`;

https://ko.vitejs.dev/guide/env-and-mode.html#intellisense-for-typescript

src 폴더 안에 선언

[bgyoons]

배포 링크