1. 프로젝트 소개: Riot API를 활용한 LoL 정보 앱 만들기
이 프로젝트에서는 Riot Games의 Riot API와 Data Dragon을 활용하여 리그 오브 레전드(LoL) 정보를 제공하는 웹 애플리케이션을 만들 계획입니다. 이 앱은 Next.js와 TypeScript로 구현되며, LoL의 챔피언 정보와 챔피언 로테이션 같은 주요 기능을 포함할 예정입니다.
1.1 주요 목표
- Riot API를 활용하여 LoL의 다양한 데이터를 가져와 사용자에게 유용한 정보를 제공
- 챔피언 정보 조회 및 챔피언 로테이션 기능 구현
- Next.js와 TypeScript를 사용하여 효율적인 웹 애플리케이션 개발 및 타입 안전성 확보
- 동적 라우팅, SSG 등 Next.js의 기능을 활용한 성능 최적화
- Tailwind CSS로 스타일링을 쉽게 적용하여 사용자 친화적인 UI 구현
1.2 사용 기술 스택
- Next.js: 프레임워크로 프로젝트 구조화 및 동적 라우팅 구현
- TypeScript: 타입 선언을 통해 안전한 코딩 및 유지보수성 향상
- Tailwind CSS: 스타일링에 사용, 빠르고 쉽게 반응형 UI를 구현
- Riot API: LoL 관련 데이터 조회에 사용
- Vercel: 애플리케이션 배포에 사용
2. 개발 계획 및 진행 프로세스
2.1 프로젝트 셋업
- Next.js 프로젝트 생성
- npx create-next-app@latest 명령어로 기본 설정
- TypeScript, Tailwind CSS, ESLint 등의 설정 적용
- src/ 디렉토리 및 App Router 설정
2.2 기본 프로젝트 구조
프로젝트의 기본 구조는 다음과 같으며, 각 디렉토리의 역할은 다음과 같습니다:
- app/: 페이지 컴포넌트 및 API Route Handlers
- layout.tsx: 글로벌 레이아웃 컴포넌트
- page.tsx: 홈 페이지
- champions/: 챔피언 관련 페이지들이 위치
- items/: 아이템 관련 페이지들이 위치
- rotation/: 챔피언 로테이션 페이지가 위치
- api/: API Route Handlers가 위치
- components/: 재사용 가능한 UI 컴포넌트
- styles/: 스타일 관련 파일
- types/: TypeScript 타입 정의
- utils/: 유틸리티 함수
- public/: 정적 파일
2.3 메인 페이지 및 레이아웃 구성
- 홈 페이지: Riot API를 통해 주요 챔피언 정보 및 로테이션 정보를 제공하는 기능
- 레이아웃: 글로벌 네비게이션 메뉴와 페이지 구조 정의
- 페이지 간 이동: 챔피언 정보, 아이템 정보 페이지 등으로의 네비게이션 구현
3. 주요 기능 설명
3.1 챔피언 정보 조회
- API 연동: Riot API를 사용해 챔피언 정보를 가져오고, 해당 데이터를 UI에 표시
- 챔피언 필터 기능: 필터를 통해 특정 챔피언의 정보를 검색하고 필터링 가능
3.2 챔피언 로테이션
- 챔피언 로테이션 정보 조회: 매주 업데이트되는 무료 챔피언 목록을 API에서 받아와 렌더링
- 로테이션 데이터 캐싱: 성능 향상을 위해 SSG를 사용해 데이터를 정적으로 생성
4. API 키 발급 및 환경 변수 설정
4.1 Riot API 키 발급
- Riot 개발자 포털에서 API 키 발급
- 개발용 API 키 사용 (24시간 유효)
- 환경 변수 파일 설정: .env.local 파일에 API 키를 저장하고 .gitignore에 추가하여 보안 유지
5. 마무리
이 프로젝트는 Riot API를 사용하여 실제 데이터를 기반으로 한 LoL 정보 애플리케이션을 개발하는 것이 목적입니다. 이 과정에서 Next.js의 다양한 기능과 TypeScript를 활용해 타입 안전성을 유지하면서 프로젝트를 구축할 수 있으며, 사용자에게 유용한 정보를 제공하는 앱을 완성하는 것이 목표입니다.