이번 주에는 Riot API를 활용해 리그 오브 레전드 정보 앱을 만드는 개인 프로젝트를 진행했다.
프로젝트의 전반적인 기능은 다음과 같다.
프로젝트 기능
1️⃣ 페이지 별 다양한 렌더링 방식 적용
- 챔피언 목록 페이지(
/champions): ISR 방식으로 구현, 챔피언 목록 표시 - 챔피언 상세 페이지(
/champions/[id]): 동적 렌더링 방식으로 구현, 챔피언의 상세 정보 표시 - 챔피언 로테이션 페이지(
/rotation): CSR 방식으로 구현, 챔피언 로테이션 정보 표시 - 아이템 목록 페이지(
/itmes): SSG 방식으로 구현, 아이템 목록 표시
2️⃣ Tanstack Query를 활용한 데이터 관리
- 상태 관리와 데이터 요청/캐싱을 위해 Tanstack Query 활용
- 클라이언트 사이드에서
useQuery훅을 사용하여 데이터 요청 isPending,isError,data상태를 활용하여 로딩 및 에러 처리 구현- 제네릭을 활용해 API 응답의 타입을 정의하여 타입 안정성 보장
3️⃣ 성능 최적화
- Next.js의
<Image>컴포넌트를 활용하여 이미지 로딩 최적화 및 자동 서식 변경 적용 - Tanstack Query의 staleTime 및 revalidate 설정으로 불필요한 요청 감소 및 데이터 최신화 유지
4️⃣ 로딩 및 에러 핸들링
React Suspense를 활용하여 비동기 컴포넌트 로딩 상태 처리- 각 페이지별 로딩 화면을
loading.tsx로 구현 error.tsx파일에서 페이지별 에러 처리 및 사용자 피드백 제공gloabl-error.tsx파일을 생성하여 전역 에러 관리useRouter와startTransition을 활용하여 에러 발생 시 페이지 새로고침 및 재시도 기능 제공
5️⃣ 반응형 디자인 및 UI 개선
- Tailwind CSS의 유틸리티 클래스를 활용하여 화면 크기에 따른 반응형 레이아웃 구현
- 모바일 환경에서도 사용하기 편리한 인터페이스 제공
6️⃣ 다크 모드 기능 구현
- 헤더에 다크 모드 토글 스위치를 제공하여 테마 전환 기능 구현
next-themes라이브러리를 활용하여 사용자 설정에 따라 다크/라이트 모드 상태 유지
KPT 회고
Keep - 현재 만족하고 있는 부분
- 폴더 구조를 적절하게 나눠서 가독성과 유지보수성을 높인 점
- 처음으로 반응형 디자인을 적용해 다양한 화면 크기에 대응한 점
- 다크모드를 구현하며 사용자 맞춤형 UI를 제공한 점
- 외부 API를 활용하여 API별 규칙을 이해하고 제공되는 데이텨 형식에 맞게 타입을 정의해 프로젝트에 적용한 점
- Tanstack Query를 활용해 데이터를 관리한 것
Problem - 불편하게 느끼는 부분
- 사소한 실수를 많이 해서 시간 낭비한 것
- https://velog.io/@zi0w/NextJS-Trouble-Shootinglol-dex-app - 유틸리티 타입을 적극적으로 활용해보지 못한 것
- Scroll to Top 기능을 구현하지 못한 것
- 로딩 상태에서 스켈레톤 UI를 구현하지 못한 것
- 중복된 css 클래스를 따로 정리하지 못한 것
Try - Problem에 대한 해결책, 당장 실행 가능한 것
- Tailwind CSS의 활용법을 더 깊게 학습하여 체계적이고 재사용 가능한 스타일링 패턴 구축하기
- 코딩 전후에 체크리스트를 활용하여 사소한 실수 방지하기
- 다음 프로젝트 때 구현 못한 기능들 구현해보기
