[6차] Next.js 리그오브레전드 정보 프로젝트 완료
[6차] Next.js 리그오브레전드 정보 프로젝트
베포 링크
프로젝트 설명
NextJS와 TypeScript을 사용하고 Riot API를 활용하여 리그오브레전드의 다양한 데이터를 조회하고 이를 기반으로 생성한 프로젝트 입니다.
-
프로젝트 기간
- 2024.09.30 ~ 2024.10.07
-
프로젝트 명
- 리그오브레전드 정보 앱
-
프로젝트 목표
- Next.js를 사용한 리그오브레전드 정보 반응형 웹사이트 제작
STACK
프로젝트 구조
전체 프로젝트 구조
📦app┣ 📂_components
┃ ┣ 📂champions
┃ ┃ ┣ 📜ChampionCard.tsx
┃ ┃ ┗ 📜ChampionList.tsx
┃ ┗ 📂items
┃ ┃ ┣ 📜itemCard.tsx
┃ ┃ ┣ 📜itemDesc.tsx
┃ ┃ ┗ 📜itemList.tsx
┣ 📂api
┃ ┣ 📂rotation
┃ ┃ ┗ 📜route.ts
┃ ┗ 📜apiKey.ts
┣ 📂champions
┃ ┣ 📂[id]
┃ ┃ ┗ 📜page.tsx
┃ ┣ 📜layout.tsx
┃ ┣ 📜loading.tsx
┃ ┗ 📜page.tsx
┣ 📂fonts
┃ ┣ 📜GeistMonoVF.woff
┃ ┗ 📜GeistVF.woff
┣ 📂items
┃ ┣ 📜loading.tsx
┃ ┗ 📜page.tsx
┣ 📂rotation
┃ ┣ 📜loading.tsx
┃ ┗ 📜page.tsx
┣ 📂types
┃ ┣ 📜Champion.ts
┃ ┣ 📜ChampionRotation.ts
┃ ┗ 📜Item.ts
┣ 📂utils
┃ ┣ 📜riotApi.ts
┃ ┗ 📜serverApi.ts
┣ 📜favicon.ico
┣ 📜global-error.tsx
┣ 📜globals.css
┣ 📜layout.tsx
┣ 📜loading.tsx
┗ 📜page.tsx
디렉토리 설명
4-1) app > _components
공통 컴포넌트 디렉토리
-
ChampionList.tsx: 챔피언 리스트 -
ChampionCard.tsx: 챔피언 리스트에 출력될 챔피언 카드 -
ItemList.tsx: 아이템 리스트 -
ItemCard.tsx: 아이템 카드
4-2) app > api
api key값과 챔피언 로테이션 라우터 핸들러를 세팅했습니다..
-
rotation > route: 로테이션 라우트 핸들러 -
apiKey.ts: api key 정의
4-3) app > utils
초기 api 세팅 디렉토리, api 관련 세팅이 되어있습니다.
-
serverApi.ts: API 최신 버전, 아이템, 챔피언 최신 정보를 가져오고 해당 버전에 맞는 데이터를 요청하여 반환합니다. -
riotApi.ts: 라우트 핸들러를 통한 로테이션 챔피언 데이터를 반환합니다.
4-4) app > champions
챔피언 리스트, 챔피언 상세페이지, 해당 페이지에서 최신 챔피언 리스트를 조회할 수 있으며, 클릭해서 상세 정보를 확인할 수 있습니다.
4-5) app > items
아이템 리스트, 아이템 상세페이지, 해당 페이지에서 리그오브레전드의 아이템 리스트를 확인할 수 있습니다.
4-6) app > rotation
매주 무료로 플레이할 수 있는 챔피언들의 목록을 확인할 수 있습니다.
4-7) app > layout.tsx
공통 헤더 및 푸터 를 생성 후 헤더에 챔피언,아이템,로테이션 메뉴를 생성
4-8) app > types
이번 프로젝트에서 사용할 정보를 정의한 타입 인터페이스입니다.
4-9) app > loading.tsx
전역으로 사용되는 로딩 컴포넌트입니다.
4-10) app > global-error.tsx
전역으로 사용되는 에러 컴포넌트입니다.
작업 목록
5-1) 메인 페이지
메인 페이지에서는 리그오브레전드의 인기 챔피언인 징크스를 배경화면으로 설정하며, 어떤 웹사이트인지 간접적으로 설명하려 했습니다. “Meet your own champion” 문구와 버튼을 통해 챔피언 리스트 페이지로 이동이 가능합니다.
5-2) 로테이션 챔피언 리스트
환경 변수에서 API키 값을 정의하고 호출한 현재 무료로 플레이 가능한 챔피언 리스트로 구성되어 있습니다.
-
페이지 링크 -
관련 글
5-3) 전체 챔피언 리스트
라이엇 API의 최신 버전과 챔피언 데이터를 반환하여 해당 페이지에서 최신 챔피언 리스트를 조회할 수 있으며, 클릭해서 상세 정보를 확인할 수 있습니다.
-
페이지 링크 -
관련 글
5-4) 챔피언 상세페이지
전체 챔피언 리스트 및 로테이션 챔피언 리스트에서 챔피언을 선택하면 선택한 챔피언의 상세 페이지입니다. 해당 페이지에서 챔피언의 스킬 및 스킨 등 정보를 확인할 수 있습니다.
-
페이지 링크 -
관련 글
5-5) 전체 아이템 리스트
리그오브레전드의 모든 아이템의 정보를 확인할 수 있는 리스트 페이지 입니다.
-
페이지 링크 -
관련 글
5-6) 로딩 및 에러
전역으로 설정된 로딩 및 에러를 구현했으며, 특정 이미지가 렌더링될 때 “로딩중” 문구를 기입하였습니다.
5-7) 반응형
PC부터 MOBILE까지 확인할 수 있도록 반응형 작업을 진행했습니다.
Trouble Shooting
- [Next.js] Unhandled Runtime Error 해결
- [Next.js] use client 컴포넌트 metadata 에러
- [Next.js] CSR 환경에서 Suspense 사용해보았다.
- [Next.js] 서버 컴포넌트에서 ERROR UI가 노출이 되지 않은 이유를 알아보자.
회고
이번에 Next.js를 처음 사용해보면서 솔직히 편리한 부분이 많았다. 이전의 리액트에서는 여러가지 설정을 해주고 세팅하는 데 시간이 많이 걸렸던 기억이 있다 반면에 Next.js에서는 그런 번거로움을 상당 부분 덜어주었다. 특히 페이지 기반 라우팅이나 서버사이드 렌더링 같은 기능을 기본으로 제공하는 것이 매력적이었던 것 같았다. 또한 이미지 최적화와 SEO를 설정하는 부분도 Next.js의 가장 큰 강점이라고 생각함!
Keep - 현재 만족하고 있는 부분
Next.js로 간단한 미니 프로젝트를 구현할 수 있었다는 점.
Problem - 불편하게 느끼는 부분
아직 나는 너무나 허접하다.
Try - problem에 대한 해결책, 당장 실행 가능한 것
지금의 열정 그대로 열심히 하다보면 더 나은 내가 될거라 생각하며 포기하지만 말자
추가 작업 예정
- react query 사용해서 리팩토링하기