[Next.js + TypeScript] 리그 오브 레전드 정보 도감 만들기

프로젝트 개요

• Next.js와 TypeScript를 사용하여 리그 오브 레전드 캐릭터&아이템 정보 도감 만들기

 

주요 기능

• 챔피언 정보 조회
• 아이템 정보 조회
• 금주의 챔피언 로테이션 정보 조회

---

 

프로젝트 셋업

npx create-next-app@14 // 14버전 설치하기

What is your project named? my-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? No
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? Yes
What import alias would you like configured? @/*

 

Next.js와 TypeScript를 사용하여 프로젝트를 설정하고, Tailwind CSS도 설치한다. src/ 디렉토리와 @/* import alias를 설정해서 프로젝트 구조를 정리했다. 과제를 시작할 즈음에 next.js가 15 버전업이 되면서 개발 과정에 불안정성이 있어 14 버전으로 진행하게 되었다.

 

@/ import alias ?
프로젝트의 경로를 짧고 간단하게 사용할 수 있게 하는 방법이다. @/는 현재 프로젝트의 루트 디렉토리를 가리키는 alias로 설정되며, 여러 파일을 import할 때 절대적인 경로로 활용할 수 있다. 예를 들어, src/components/Dashboard.jsx 파일을 src/pages/HomePage.js 에서 가져오려면 '@/components/Dashboard'로 작성하면 된다. 프로젝트 규모가 커지면서 깊어지는 파일 구조에서 상대 경로를 사용하지 않아서 쉽게 관리할 수 있고 코드 가독성이 높아진다.

 

 

프로젝트 기본 구조 설정

📦src
 ┣ 📂app
 ┃ ┣ 📂api
 ┃ ┣ 📂champions
 ┃ ┣ 📂items
 ┃ ┣ 📂rotation
 ┃ ┣ 📜favicon.ico
 ┃ ┣ 📜globals.css
 ┃ ┣ 📜layout.tsx
 ┃ ┗ 📜page.tsx
 ┣ 📂components
 ┣ 📂public // 프로젝트에서 사용할 정적 파일들이 들어갈 예정. 이미지, 아이콘 등
 ┃ ┣ 📜next.svg
 ┃ ┗ 📜vercel.svg 
 ┣ 📂styles
 ┣ 📂types
 ┗ 📂utils

 

 

메인 페이지 레이아웃 구성

<nav>
  <ul>
    <li>
      <Link href="/">홈</Link>
    </li>
    <li>
      <Link href="/champions">챔피언</Link>
    </li>
    <li>
      <Link href="/items">아이템</Link>
    </li>
    <li>
      <Link href="/rotation">챔피언 로테이션</Link>
    </li>
  </ul>
</nav>
{children}

 

메인 페이지(경로 "/") 에서 주요 링크와 간단한 페이지 소개를 제공할 예정이다. 빌드 시점에서 페이지를 정적으로 생성하는 SSG에 대해 공부하며 작성했다. layout.tsx 파일에서 글로벌 레이아웃으로 내비게이션 메뉴를 추가해서 각각 챔피언 정보, 아이템 정보, 로테이션 정보 페이지로 이동할 수 있게 만들었다.

 

 

Riot Games API Key 발급

 

Riot Games Developer Portal에 접속해서 계정 생성 후 API KEY를 발급받았다. 개인 developer가 발급받는 키는 24시간 동안만 유효하기 때문에 개발 과정에서 주기적으로 확인해서 재발급해주어야 한다. 환경 변수를 설정하고 키를 추가해 주었다.