DEVLOG

📖 목차 이름하야 next.js 배포 삽질 기록,,,,,😂 결론적으로는 vercel을 이용하여 배포를 진행했습니다! 🎈 gh-pages gh-pages 배포 참고 그동안 모든 프로젝트를 배포할때에는 간단하게 gh-pages를 이용했었다. 그래서 이번 프로젝트도 기존에 했던 것 처럼 gh-pages를 이용하여 배포하려고 했으나,, 예상하지 못한 문제를 만났다. 오류 : gssp(getServerSideProps) + export "build": "next build && next export", gh-pages로 배포하기 위해서는 next export 명령어를 통해 out폴더를 생성해내야 하는데 export 진행 시 아래와 같은 오류가 발생한다. Error occurred prerendering page ..

📖 목차 api형태 확인하기 클라이언트 개발을 하기전 api형태를 확인해야한다. api까지 직접 만들면 좋지만,, 일단 프론트엔드 개발에 집중하려고 오픈API를 사용하기 때문에 api가 어떻게 들어오는지 확인해보자! pagination으로 개발을 하든 infinite scroll로 개발을 하든 들어오는 api에서 return값으로 받아야 하는 값이 있다. 현재 페이지와 전체 페이지의 개수 다음 페이지가 존재하는지에 대한 여부 두가지 중 한가지가 값으로 들어와야한다. 전체 데이터를 전부 불러와서 클라이언트에서 쪼개는게 아니라 필요한 만큼만 데이터를 호출해야하기 때문! 내가 사용하는 TMDB api에서는 현재 페이지와 전체 페이지수를 알 수 있었다. 🎈 useInfiniteQuery useInfiniteQu..

📖 목차 🎈 Carousel이란? 흔히 이러한 형식의 구조를 우리는 슬라이더라고 부르곤했다. 그런데 '슬라이더 라이브러리'라고 검색을 하고 찾아보려고 하니 한국에서만 이런 구조를 슬라이더라고 하고 사실은 carousel이라고 부르는게 맞다. carousel은 회전목마라는 뜻! 빙빙 돌아가는,, 그런 느낌! 영어권나라에서 이런걸 슬라이더라고 부르는 것 같다! 사실 중요한건 아닌데 찾아보면서 흥미로워서 공유하고 싶었다 :) 🎈 swiper 메인페이지에 들어갈 캐러셀을 구현하기 위해 먼저 라이브러리부터 선택해야했다. 당연히 직접 만드는 것은 너무 비효율적일 것 같아 라이브러리를 사용하려고 찾아보는데 swiper을 가장 많이 사용하는 것 같고 공식문서도 정리가 잘 되어있길래 swiper을 선택했다. 공식 사이트..

📖 목차 🎈 왜 SSR을 도입하려고 했는가? 이전글에서 react-query를 이용하여 데이터를 불러와 페이지에 그려주었다. 하지만 클라이언트단에서 데이터를 불러오기 때문에 초기 진입시 데이터가 없는 경우를 방지하기 위해 getServerSideProps를 이용하여 react-query의 initialData를 채워주었다. 그런데 작업을 하다보니,,, 내가 지금 쓰는 데이터가 변할일이 얼마나 있다고 굳이 react-query를 이용하여 계속해서 페이지를 업데이트 해야할 필요가 있을까? 재포커싱이 될때마다 데이터를 계속 새로 불러와주는게 맞을까?하는 생각이 들었다. 그래서 재렌더링되는 문제를 없애고, SEO를 높이기 위해 서버사이드에서 데이터를 호출해서 페이지를 출력하고 내부에서 업데이트 되던 react-..