RARRIT

기억을 너무 믿지 말자

:ledger: [3차] Next.js 리그오브레전드 정보 프로젝트

champion-detail

:rocket: 베포 링크

:one: 프로젝트 설명

NextJS와 TypeScript을 사용하고 Riot API를 활용하여 리그오브레전드의 다양한 데이터를 조회하고 이를 기반으로 생성한 프로젝트 입니다.

:two: STACK

Next JS TypeScript React Query TailwindCSS JavaScript GitHub

:three: 프로젝트 구조

  • 3차에선 챔피언 상세 페이지를 완료했습니다.
전체 프로젝트 구조 📦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

:four: 작업 목록

:pushpin: 4-1) 챔피언 상세페이지 설정

  1. app > champions > [id] > page.tsx 동적 경로를 생성해줌
  2. 선택한 챔피언의 데이터를 가져오기 위해 params를 정의해줬다.
const ChampionsPage = async ({ params } : { params: { id: string }}) => {}

:pushpin: 4-2) 최신 버전과 챔피언 데이터 가져오기

  1. 상세페이지의 id의 맞게 조회할 수 있게 전체 챔피언 데이터 중 params.id 값과 같은 챔피언 데이터를 가져옴 (getChampionDetail(params.id))
  2. getLatestVersionUrl 함수를 통해 최신 버전을 가져온 것은 Image 태그의 src에 값을 넣기 위함인데, 이게 최선인지 현재로선 판단이 되지 않았다. 최종 완료 후 피드백을 받고 수정할 예정이다.
// app > champions > [id] > page.tsx
const champion = await getChampionDetail(params.id);
const latestVersion = await getLatestVersionUrl();

// app > utils > serverApi.ts
export const getLatestVersionUrl = async () => {
  const latestVersions = `${RIOT_BASE_URL}/api/versions.json`;
  const res = await fetch(latestVersions);
  const version: string[] = await res.json();
  const latestVersion = version[0];
  return latestVersion;
}

export const getChampionDetail = async ( id : string ) => {
  try {
    const latestVersion = await getLatestVersionUrl();
    const res = await fetch(`${RIOT_BASE_URL}/cdn/${latestVersion}/data/ko_KR/champion/${id}.json`);
    const { data } = await res.json();
    return data;
  }catch (error) {
    console.error("챔피언 상세 데이터 가져오기 에러:", error);
    throw error; 
  }
}

:pushpin: 4-3) 데이터 정의 및 사용

  1. championKey: 최신 버전의 값을 할당함
  2. championDetail: 챔피언의 상세정보 데이터를 할당함
  3. championSkins: 챔피언의 관련 스킨 데이터를 할당함
  4. 데이터가 없는 경우 삼항연산자를 사용해서 기본 데이터 적용

:fire: 회고

상세페이지를 작업 완료 후 욕심에 비해 많은 기능을 적용하지 못한 아쉬움이 너무 컸다. 생각보다 테일윈드도 손에 쉽게 익지 않지만 재밌게 한 편

:pushpin: Keep - 현재 만족하고 있는 부분

테일윈드가 많이 익숙하지 않았는데, 호버, 반응형 및 커스텀 작업까지 할 수 있게 되었고 원하는 데이터를 필터링해서 바인딩할 수 있다.

:pushpin: Problem - 불편하게 느끼는 부분

타입을 정의하는 부분에서 너무 헷갈린다.

:pushpin: Try - problem에 대한 해결책, 당장 실행 가능한 것

생각해보니 타입스크립트도 배운 지 얼마 안되가지고 불편한 건 어쩔 수 없고 계속 써봐야한다고 생각함

참고