[Vue3] 영화 검색 사이트 프로젝트

❗❗  데브코스 48~50일차 (10.06 ~ 10.10)

지금까지 배웠던 Vue를 활용하여 미니 프로젝트를 수행했다.

주제는 Vue와 영화 검색 API를 활용해 프로젝트를 만드는 것이었다.

 

🎥 영화 검색 프로젝트

O : 구현  X : 미 구현 

✅ 기본 요구사항

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

✅ 선택 요구사항

• [O] API 요청(Request)에 대한 로딩 애니메이션을 추가해 보세요.
• [O] 영화 상세 검색으로 출력할 영화 포스터를 더 높은 해상도 사용해 보세요.
  •  영화 포스터 주소에 포함된 SX300를 SX700과 같이 더 큰 숫자로 수정해 요청하세요.
  •  실시간으로 이미지의 크기를 다르게 요청하는 것이 어떤 원리로 가능한지 조사해 보세요.
• [O] 요청 주소에 HTTP가 아닌 HTTPS 프로토콜을 사용해야 하는 이유를 조사해 보세요.
• [O] Bootstrap 등의 UI 프레임워크를 구성해 프로젝트를 최대한 예쁘게(?) 만들어 보세요.
• [X] Open Graph 혹은 Twitter Cards로 Meta 정보를 제공해 보세요.
• [X] NuxtJS를 활용해 Server Side Rendering(SSR)과 검색 엔진 최적화(SEO)를 도입해 보세요.
  (만약 SSR에 익숙치 않다면, SPA 프로젝트를 먼저 만들어 보고 도전하세요!)

✅ 개별 추가 사항

•  더보기 기능을 통해 추가 데이터 가져오기
•  잘못된 경로 처리

✅ API

• 요청 주소: https://www.omdbapi.com

✏️ 결과물

https://angry-albattani-9bdfaf.netlify.app/

영화 검색 및 상세보기

 

👨‍💻 코드 참고 : https://github.com/minsu-zip/Vue_Movie_app_public

Vue로 프로젝트는 처음이었다. 문법들이나 사용법이 다소 생소해 공식 문서와 강의를 계속 찾아가면서 작업했다.

하지만 로직 자체는 React보다 훨씬 쉽게 느껴졌다. 양방향 바인딩, 상태 관리, 이벤트 핸들링 등의 개념이 훨씬 쉽게 와닿아 왜 Vue가 조금 더 쉽다고 한지 깨달을 수 있었다. 

하지만 React와 Vue 각각의 장단점이 있으니 각자 판단하에 주 스킬을 선택하면 될 것 같다.

나는 React를 선호한다. 아직까지 React 생태계와 수요가 많기 때문에