[ DR ] Movie Zip
제작 배경
포트폴리오를 만들 때는 app router를 사용했는데, page router를 사용한 프로젝트도 만들어봐야 할 것 같아서 제작함.
두 router 방식 사용 소감
확실히 app router 방식이 더 사용하기 편하게 제작된 감이 있음.
초기 세팅하는 방식도 그렇고 app router가 좀 더 편함.
page router는 _app.js와 _document.js가 구분되어 style 하나 적용하는 것도 골머리 썩었음. (하지만, 하나씩 뜯어가며 공부하는 맛은 있어서 재밌었음😁)
그리고 Next.js에서 자체적으로 제공하는 데이터 패칭 방법은 적절한 환경에 사용하기 좋았음.
특히 SSG의 ISR은 기존 SSG에서 revalidate 옵션만 추가하면 되기에 더 사용하기 편해서 좋았던 것 같음.
현재 Next.js를 사용하는 회사에서 어떠한 방식을 더 선호하는지는 모르겠지만, 두 가지 방식 모두 사용해봤기에 빠르게 적응할 수 있을 것 같음!
작업 중 Issue
이 프로젝트는 2가지 Open api를 공통 필드 기반으로 필터링해서 필요한 데이터들만 추출해서 작업
-
영화 포스터 부재
2개의 api를 사용하게 된 대표적인 이유인데, 박스오피스를 제공해주는 API에는 영화 포스터를 제공하지 않아 영화 포스터를 제공하는 API를 추가적으로 사용함. -
API 조회 데이터 부재로 인한 필터링 데이터 제한
OPEN API에서 제공해주는 데이터의 필드 중 공란인 부분이 많았기에, 공통 필드를 기준으로 필터링을 한 데이터에도 공란이 많아 제외한 데이터가 많음. (꼼꼼한 데이터 관리가 필수란 생각이 듦) -
Next.js의 데이터 패칭과 Tanstack Query+Recoil
거의 모든 데이터 패칭 작업은Next.js의 SSR 방식으로 진행하려 했는데 동적 필터링을 진행해야 하는 부분에서 사용을 할 수 없어 결과적으로 Tanstack Query+Recoil 방식을 사용했었음.
그렇다고Next.js의 데이터 패칭 방식을 사용을 안한것은 아니었으나,(Home → ISR, 상세 정보 → SSR 사용) Recoil과 함께 사용하지 못해 아쉬웠음.그렇다고 Recoil과 못쓰는가?
그건 아님. 사용은 가능하나 번잡스러움.- 서버에서 데이터 fetch
- 그 데이터를 props로 페이지에 전달
- 클라이언트에서 Recoil로 초기화
클라이언트-서버 분리 구조라 가벼운 필터링 상황이라면 단순한 설계로 가는 게 좋은 듯.
보완하고 싶은 점
장르/연도/국가별로 필터링한 페이지에 무한 데이터 패칭 작업을 추가하여 보완하고 싶음.
이 작업 진행을 했지만, 배포된 사이트에는 제외된 상태인데 그 이유가 제공되는 데이터들이 완성도가 있지 않기 때문임.
추후에 이 작업을 보완하면서 무한 스크롤 기능까지 추가하여 진행하고 싶음.
Learn
2개의 API를 함께 사용하는게 쉽지 않다는 것을 느낌.
어떤 API에는 있고 어떤 API에는 없고...
그리고 공통된 데이터를 찾아야하는데 어떤 API는 최대 500개까지 조회되고 없으면 또 refetch해야하는 작업, 그리고 그 곳에서 공통 필드 찾아 필터링을 해야하는 작업... 쉽지 않음을 느꼈음.
그리고 마지막에 배포하면서 일/주간 박스오피스 데이터 패칭 방식 변경임.
처음에는 빌드 시점의 고정 데이터라는 가장 중요한 지점을 자각하지 못하고 그저 SSG로 작업하고 진행했는데 차트 변경 및 리빌드에 대한 문제가 생기면서 ISR로 변경.
당시에는 매일 배포를 진행하다보니 해당 문제에 대해 자각하지 못했었는데 그래도 뒤늦게라도 공부하고 적용해보게 되어 좋았음. (특히, ISR 방식이 SSG에서 revalidate만 추가하면 되어서 더 좋았던 듯)
