[React] Day_64 개인 프로젝트 후기

 

어헝헝헝헝 ㅠㅡㅠ.....

 

 

오.. 오늘은 간단하게 리드미로 할게요..

(너무 여기에 힘쏟았거든요 ㅠㅡㅠ)

 

 

👾 LoL_Info 👾

---

---

📝 프로젝트 개요

LoL_Info은 Riot Games의 API 및 Data Dragon을 활용하여
게임 리그오브레전드 의 다양한 데이터를 조회할 수 있는 웹 어플리케이션입니다.

---

🛠️ 기술 스택

---

📂 프로젝트 구조

src/
│
├── app/                      # Next.js의 App Router 기능을 사용하는 디렉토리
│   ├── api/rotation/         # API 라우트 디렉토리 (데이터 제공용 API 파일들이 들어감)
│   │   └── route.ts          # Rotation 관련 데이터를 반환하는 API 라우트 파일
│   │
│   ├── champions/            # 'champions' 페이지와 하위 라우트
│   │   ├── [id]/             # 동적 라우팅을 위한 챔피언 ID 라우트
│   │   │   └── page.tsx      # 개별 챔피언 상세 페이지
│   │   └── page.tsx          # 챔피언 메인 페이지 (전체 목록 또는 주요 뷰)
│   │
│   ├── items/                # 'items' 페이지와 하위 라우트
│   │   ├── [id]/             # 동적 라우팅을 위한 아이템 ID 라우트
│   │   │   └── page.tsx      # 개별 아이템 상세 페이지
│   │   └── page.tsx          # 아이템 메인 페이지 (전체 목록 또는 주요 뷰)
│   │
│   └── rotation/             # 'rotation' 관련 페이지 라우트
│       ├── page.tsx          # 챔피언 로테이션 메인 페이지
│       ├── globalError.tsx   # 에러 핸들링을 위한 글로벌 에러 페이지
│       ├── layout.tsx        # 로테이션 페이지 레이아웃 설정
│       └── page.tsx          # 추가 페이지 (중복으로 보이지만 로직이 다를 수 있음)
│
├── components/               # 재사용 가능한 컴포넌트 모음
│   ├── champ_rotation/       # 챔피언 로테이션과 관련된 UI 컴포넌트들
│   ├── champion/             # 챔피언 관련 공통 컴포넌트들
│   ├── home/                 # 홈 페이지에서 사용하는 컴포넌트
│   ├── layout/               # 레이아웃 관련 컴포넌트들 (Header, Footer 등)
│   ├── providers/            # React-Query Provider
│
├── styles/                   # 전역 CSS, 스타일링 파일
├── types/                    # 타입 정의 (champion / championRotation / item)
├── utils/                    # serverApi 및 문자 제거 정규식 컴포넌트
└── .env.local                # 환경 변수 설정 파일 (로컬 환경에서만 사용)

 

---

📜 페이지 설명

1. Home

 

- 메인 비주얼
    League of Legends를 상징하는 고화질 배경 이미지와 타이틀이 돋보임.

- 네비게이션 바
    HOME, 챔피언 목록, 아이템 목록, 챔피언 로테이션, Dark mode 버튼 제공.

- 주요 기능 버튼
    챔피언 목록 보기, 아이템 목록 보기, 이번 주 로테이션 챔피언 확인 가능.

- 푸터
    Riot Games와의 관계 및 저작권 안내 문구 포함.

 

2. 챔피언 리스트

 

- 쳄피언 목록 페이지
    그리드 형식의 카드 형태로 나열 (반응형 적용)
    각 카드에는 챔피언 이미지, 이름, 별칭(?) 이 표시됨

- 상세 페이지
    챔피언 스킨 이미지를 배경으로 표시, 세부 내용의 경우 조건부 렌더링을 적용하여 깔끔한 UI 구현에 집중
    세부 내용 - 스토리, 역할군, 패시브 스킬정보, 아군/적군을 위한 Tip, 스킨

 

3. 아이템 리스트

 

- 아이템 목록 페이지
    그리드 형식의 카드 형태로 나열 (반응형 적용)
    각 카드에는 아이템 이미지, 이름, 가격 이 표시됨
    `<Image>` 컴포넌트 사용 -> 이미지 최적화

- 상세 페이지
    목록 리스트와 동일하게 카드 형식 적용
    세부 내용(설명 및 가격정보)의 경우 조건부 렌더링 적용

 

4. 로테이션 챔피언 리스트

 

 

- 로테이션 챔피언 목록 페이지
    동적 데이터 처리를 위한 `Tanstack-Query` 사용
    그리드 형식의 카드 형태로 나열 (반응형 적용), 각 카드에는 챔피언 스킨이미지, 이름이 표시됨
    초보를 위한 무료 챔피언 리스트 추가 (타입 적용)
    `<Image>` 컴포넌트 사용 -> 이미지 최적화

- 상세 페이지
    `Link`를 활용하여 챔피언 목록의 상세페이지로 이동하도록 라우팅 설정

 

---

🖌️ 프로젝트 체크리스트

---

✅  필수 구현 사항

1. 데이터 Fetching

 

-  types/ 디렉토리 내 필요한 타입 정의

- Server Actions로 데이터 fetching (/champions, /items, /rotation)

- fetch 활용한 외부 API 호출 및 에러 처리 구현

 

2. Tanstack Query

 

- 클라이언트 컴포넌트에 Tanstack Query (useQuery, useMutation) 사용

- Query Key 및 옵션 설정

- 로딩 및 에러 상태 (isPending, isError, data) 처리

 

3. 각 페이지 구현 및 렌더링 방식 적용

 

- 챔피언 목록 페이지 (/champions): ISR 방식

- 챔피언 상세 페이지 (/champions/[id]): 동적 렌더링, 동적 메타데이터 생성

- 챔피언 로테이션 페이지 (/rotation): CSR 방식

- 아이템 목록 페이지 (/items): SSG 방식

 

4. 레이아웃 및 네비게이션 구성

 

- 글로벌 레이아웃 설정

- 네비게이션 메뉴 추가 및 페이지 간 이동 구현

 

---

🚀  도전 기능

1. 로딩 및 에러 핸들링 고도화

 

- Suspense, loading.tsx로 로딩 상태 관리

- 스트리밍 서버 사이드 렌더링(SSR) 적용

- 의도적인 API 호출 지연으로 로딩 시간 시뮬레이션

- error.tsx 파일 생성 및 사용자 친화적 에러 처리

- global-error.tsx 파일로 전역 에러 관리

- 에러 발생 시 리셋/재시도 기능 구현 (useRouter, startTransition 활용)

 

2. 성능 최적화

 

- <Image> 컴포넌트로 이미지 최적화

- Lazy Loading 적용

 

3. 반응형 디자인 및 UI 개선

 

- Tailwind CSS로 반응형 디자인 구현

- 모바일 친화적 인터페이스 제공 (헤더 제외)

 

4. 다크 모드 기능 구현

 

- Header 컴포넌트 생성 및 다크 모드 토글 추가 -> Next-Theme활용

- layout.tsx에서 Header 포함 및 다크 모드 지원

 

---

 

트러블 탕탕은 음... (바로가기)

 

내일 컴포넌트화만 시키고 끝내야지-!!!!

...들으렁