[LoL info App_Final] LoL 정보 페이지

👾 LoL info App 메인 화면 및 작동 영상

 

 

 

• Github 링크 : https://github.com/JinchaeKim/lol-info-app.git
• 배포 링크 : https://lol-info-app-git-main-jinchaes-projects.vercel.app

---

🖥️ 프로젝트 소개

• LoL의 아이템, 챔피언, 챔피언 로테이션 등 다양한 데이터를 조회하는 페이지입니다.
• TypeScript를 활용하여 타입 선언, useState에서 제네릭을 사용하였습니다.
• Next.js를 활용하여 동적 라우팅, App Router, 레이아웃 구성, Route Handler를 다루었습니다.
• Riot Games의 API와 Data Dragon를 활용하여 LoL의 다양한 정보를 나타냅니다.

 

🕰️ 개발 기간

2025 / 03 / 10 ~ 2025 / 03 / 19

 

 

⚙️ 개발 환경

Next.js, React, Riot Games, TailwindCSS, Tanstack Query

 

 

📌 주요 기능

✔️ Next.js의 주요 렌더링 기법인 CSR, SSG, SSR, ISR을 활용하여 페이지를 구성했습니다.

✔️ Home : 전체 페이지의 정보를 확인하고 카드를 클릭하여 해당 페이지로 이동합니다.
       SSG 렌더링 방식으로, 빌드 시 정적으로 생성된 정보를 나타냅니다.

✔️ Champions : LoL에서 사용되는 모든 챔피언의 목록이 나타납니다. 카드를 클릭 시 해당 챔피언의 상세 페이지로 이동합니다. 
        ISR 렌더링 방식으로 자주 변경되지 않는 정보를 나타냅니다.(재검증 시간 : 하루)

✔️ Champion Detail : 동적 라우팅을 사용하여 클릭한 챔피언의 상세 정보를 나타냅니다.
        SSR 렌더링 방식으로 항상 최신의 챔피언 상세 데이터를 불러옵니다.

✔️ Rotation : 현재 무료로 플레이 가능한 챔피언들을 표시합니다.
        CSR 렌더링 방식으로 클라이언트 사이드에서 데이터를 렌더링하여 나타냅니다.

✔️ Route Handlers 활용하여 클라이언트 사이드에서 실시간으로 데이터를 처리합니다.

✔️ Server Actions 활용하여 서버 컴포넌트 내에서 직접 API 데이터를 페칭하고 처리합니다.

✔️ 로딩 UI와 에러 UI 처리를 하여 컴포넌트에서 발생한 에러를 사용자에게 알리고, 페이지 전체가 중단되지 않도록 하였습니다.

 

 

🚨 트러블슈팅

• 서버 액션, 객체 데이터 배열 변환, Image 태그 설정
• 인덱스 시그니처 VS Record<key, value> / 정규표현식
• Next의 Tanstack Query
• Error Handling

 

✨마무리

이번 캠프 정규 교육 중 마지막 기술 스택인 TypeScript와 Next.js를 배우고 그를 활용한 마지막 개인 과제를 마무리했다.

마무리라고 하니까 왜 이리 아쉬운지..ㅎㅎ

자바스크립트로 간편하게 작성했던 로직들에 타입을 일일히 명시적으로 표현해줘야 하는 점이 처음에는 막막하기만 했다.

과제를 하던 중 타입 때문에 애를 먹었던 경험을 통해 조금의 감은 잡은 듯 하다.

 

이전까지 리액트로 구현했던 것들은 모두 클라이언트 사이드(브라우저)에서 이루어졌던 것이다.

넥스트를 통해 서버 사이드의 존재를 알고 둘의 관계와 페이지 렌더링 기법, 둘을 다루는 방법 등을 배웠다.

리액트를 처음 배웠을 때 '상태' 라는 것이 허공에 둥 떠있는 느낌이라 감을 잡기가 어려웠는데
넥스트를 배우면서 또 다시 그런 기분이 들었다. 브라우저에서의 상태 뿐만 아니라 더욱 눈에 보이지 않는 '서버'라니...

단지 눈으로 확인할 수 있는 건 콘솔 뿐이지만 그마저도 같은 곳에서 확인할 수 없다.

 

서버는 노드 환경에서 JS를 작동시키기 때문에 터미널에 콘솔이 찍히고,

클라이언트는 브라우저에서 JS를 작동 시키기 때문에 개발자도구에 콘솔이 찍히는 것이다.

즉 Node.js는 웹 바깥 어느 곳에서든 JS를 구동하게 해주는 런타임 환경이다.

 

정말정말 복잡한 넥스트.

프레임워크인만큼 자체적으로 처리하는 부분이 많아서 편리한 부분도 있지만 많은 내용을 파악하기는 시간이 꽤 걸리겠다고 느껴졌다.

다행인 건, 이번 개인 과제 기간이 길었고 과제 자체에 큰 기능이 없어서 넥스트에 대해 깊이 고민해보는 시간도 가졌었다.

넥스트의 네 가지 렌더링 기법인 SSG, SSR, ISR, CSR을 비교해보고 간단한 로직으로 다양한 시도를 해보았다.

 

✔️각 렌더링을 적용시키기 위한 조건들을 알고 SSG가 기본값인 14버전에서는 fetch 옵션을 확실하게 명시하는 편이 좋다는 점

✔️정적 페이지(SSG)에 동적 컴포넌트(SSR)를 포함시키면 해당 페이지는 빌드 시 동적 페이지로 적용 된다는 

✔️또한 리퀘스트 메모이제이션 때문에 같은 엔드포인트를 바라보는 페이지는 한 번의 처리로 인식된다는 점,

✔️클라이언트 사이드에서만, 한 두 뎁스만 캐싱되는 라우터 캐시 때문에
링크로 페이지를 이동할 때는 서버까지 요청이 보내지지 않아서 새로고침으로 서버에 새로운 요청을 보내야 한다는 점(ISR)

등등 기억에 남는 배움이 있었다.

 

외에도 다양한 기능들이 있지만 모든 것을 다 외울 순 없으니..
해당 기능들이 어떻게 작동하는지, 왜 필요한지 정도는 꼭 이해하고 넘어가는 부분도 중요하다고 생각된다.

이러한 시간이 있었기에 어려운 넥스트에 대해 한 발 다가설 수 있었고 더 배워서 활용하고 싶은 마음이 생긴다.