ํฐ์คํ ๋ฆฌ ๋ทฐ
๐พ 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)
๋ฑ๋ฑ ๊ธฐ์ต์ ๋จ๋ ๋ฐฐ์์ด ์์๋ค.
์ธ์๋ ๋ค์ํ ๊ธฐ๋ฅ๋ค์ด ์์ง๋ง ๋ชจ๋ ๊ฒ์ ๋ค ์ธ์ธ ์ ์์ผ๋..
ํด๋น ๊ธฐ๋ฅ๋ค์ด ์ด๋ป๊ฒ ์๋ํ๋์ง, ์ ํ์ํ์ง ์ ๋๋ ๊ผญ ์ดํดํ๊ณ ๋์ด๊ฐ๋ ๋ถ๋ถ๋ ์ค์ํ๋ค๊ณ ์๊ฐ๋๋ค.
์ด๋ฌํ ์๊ฐ์ด ์์๊ธฐ์ ์ด๋ ค์ด ๋ฅ์คํธ์ ๋ํด ํ ๋ฐ ๋ค๊ฐ์ค ์ ์์๊ณ ๋ ๋ฐฐ์์ ํ์ฉํ๊ณ ์ถ์ ๋ง์์ด ์๊ธด๋ค.
'Project' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [NEXTFLIX_Day3] ํ์ด์ง๋ค์ด์ (1) - ๊ธฐ๋ฅ ํ์ (1) | 2025.03.24 |
|---|---|
| [NEXTFLIX_Day2] ๊ตฌ์กฐํ ๋ฐ ์ ์ (5) | 2025.03.22 |
| [Outsourcing_Final] HotPlace In Seoul ๐ฅ (1) | 2025.03.05 |
| [Outsourcing_Day 3] HotPlace In Seoul ๐ฅ - tanstack query & custom hook (0) | 2025.03.02 |
| [Outsourcing_Day 2] HotPlace In Seoul ๐ฅ (0) | 2025.03.01 |