2025 . 오은

repo

포켓몬 도감

2024.07.01 ~ 2024.07.04

개인Next.js
detail image
detail image

🗝️ 주요 기능 및 특징

  • - 포켓몬API 활용한 데이터 불러오기
  • - 무한스크롤 기능
  • - 커서 위치에 반응하는 카드 움직임 및 반짝임 효과
  • - cva를 활용한 공용 칩 컴포넌트

🤔 기술적 의사결정

  • Pre-Fetching
  • Next.js 의 서버 컴포넌트에서 Prefetch Query 및 PrefetchInfiniteQuery를 적극적으로 활용하여 클라이언트 컴포넌트에서는 초기 데이터를 가지고 실행할 수 있게 하였습니다.

  • getQueryData
  • 상세 페이지에서는 getQueryData 메서드를 활용하여 완전한 서버사이드렌더링을 구현하고 클라이언트 컴포넌트에서는 fetch가 없도록 하였습니다.

  • React-Intersection-Observer
  • intersection-observer API를 활용한 React-Intersection-Observer 라이브러리를 사용하여, 무한 스크롤시 observing 을 편리하게 구현하였습니다.

💥 트러블 슈팅

  • Tanstack Query SSR
  • Tanstack Query를 서버사이드에서 처음 사용해 보았고, Hydrate, Dehydrate에 대한 이해가 부족하여 어려움을 겪었습니다. 결과적으로 Hydration과 서버사이드 동작 원리를 습득하였고 prefetchQuery, ensureQueryData, getQueryData 등을 원하는대로 사용할 수 있게 되었습니다.

  • Response Data의 복잡성으로 인한 어려움
  • Response Data의 객체 구조가 너무 복잡하여 Typing에 어려움을 겪었습니다. 객체에서 필요한 프로퍼티만 추출하고자 하였으나 사용되는 프로퍼티들이 복잡하게 중첩되어 있었습니다. 타입스크립트의 유틸리티 타입등 사용법을 더욱 익히면서 해결되었습니다.