1. 프로젝트 소개 및 시작

typescript도 공부했고, state 관리 라이브러리들도 공부 했고 이를 활용한 프로젝트를 하나 하고자 생각하여 TMDB API를 사용하여 디즈니 플러스 클로닝 애플리케이션을 제작 하였다. 프로젝트는 여기로 접속 가능하다.

기술 스택

• React
• Typescript
• Next.js
  • 많이 사용하는 라이브러리이기도 하고, SSR적용이 필요 할 것 같아서 사용하였다.
    (13버전을 사용하였는데 이와 관련해서도 참 할 말이 많다. 이는 다음 포스트에서 차차 언급하겠다.)
• Redux
• RTK(Redux Toolkit), RTK-query
  • RTK , rocoil, zustand , mobx 등 다양한 상태 관리 라이브러리 들 중 무엇을 사용할까 정말 많이 고민했다.
  • 그래도 가장 많이 사용하는 것이 redux - RTK 가 아닐 까 하여 RTK를 사용하기로 하였다.
  • 비동기 상태 관리 라이브러리는 react-query , RTK-query 중 고민 많이 하였다.
  • RTK 공식 홈페이지를 가니 가이드라인도 잘 되어 있고, RTK를 설치하면 따로 설치 필요 없이 RTK-query를 사용할 수 있다는 점이 좋은 것 같아 RTK-query를 사용하기로 하였다.
    (하….좀 후회한 부분이다. 자세한 내용은 SSR 적용 포스트에서 다루겠다. )
• SCSS
  • style-component 와 SCSS 둘 중 고민 하였는데, 실무 적용 방식의 코드를 보여 주고 싶어 SCSS를 선택했다.
• Vercel
  • 배포 방식도 고민 많이 하였는데 처음에는 github action과 AWS 조합으로 하려 하였으나, 생각대로 안되어 Next.js 에서 추천하는 Vercel로 배포 하였다. (배포 방식을 바꾼 이유에 대해서는 배포 포스트에서 다루겠다. )
• firebase authentication
  • 백엔드 서버 사용 없이 간단하게 적용 할 수 있을 것 같아 선택 하였다. (SSR 적용에서 복병이었다🥲 자세한 일화는 SSR적용 포스트에서 다루겠다.)
    

주요 페이지 및 기능

주요 페이지와 기능은 다음과 같다.

• 로그인 / 로그아웃

  • firebase authentication을 이용한 구글 로그인 / 로그 아웃

  • 로그인 성공 시, 메인 페이지 접근 가능

  • SSR(Server Side renderring)을 이용하여 로그인 여부 파악

    

    

• 메인 페이지

  • RTK query를 사용하여 영화 정보를 가져옴.

  • 로딩 중일 경우, 스켈레톤 UI 적용

  • 상단 배너

    • 비디오 정보가 있을 경우, play 버튼 노출. 클릭 시, 유투브 동영상 재생

  • 장르 별 영화

    • swiper를 이용한 슬라이드 구현
    • 클릭 시, 모달 창으로 영화 정보 제공
      • useRef, useOnClickOutside 훅을 통해 모달 창 바깥을 클릭 시, 모달 창 닫기 구현.

• 검색

  • 검색 창 입력 시, 라우터 이동을 통한 검색 결과 제공
    • useDebounce 훅을 통해 debouncing 구현
  • RTK query를 사용하여 검색 결과, 로딩 중, 결과 없는 경우를 표현
  • 검색 결과 클릭 시, 상세 정보 페이지로 이동.

• 상세 정보 페이지
  • 영화 상세 정보를 제공.
  • getServerSideProps를 이용하여 SSR 적용
  • 상세 정보에 따른 메타 태그 변경
    

마무리 & 예고

약 2주 정도 하루 종일 붙잡고 한 프로젝트였는데, 고민도 정말 많이 하였고, 삽질도 많이 하였다😂 적용한 기술들과 삽질한 일화들을 중심으로 회고글을 업로드 하려고 한다. 다음 포스트는 firebase로 로그인을 구현한 방법에 대해 이야기 하겠다 👋