Tech Stack - dnd-side-project/dnd-8th-1-frontend GitHub Wiki

๐Ÿ› ๏ธ Tech Stack

Language

TypeScript

FrameWork

Next.js

State Management

recoil ReactQuery

Styling

Tailwind CSS

UI Library

Storybook

Deploy

Vercel

Package Manager

Yarn berry

Convention

๊ธฐ์ˆ  ์Šคํƒ ์„ ์ • ์ด์œ 

TypeScript

  • ์ฝ”๋“œ์˜ ๋ฌธ์„œํ™” ๊ด€์ 
    • ์ปดํฌ๋„ŒํŠธ์˜ interface ์— ๋Œ€ํ•œ ๋ฌธ์„œํ™”๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค.
  • ๋ฐฑ์—”๋“œ๋ž‘ ํ˜‘์—… ์‹œ API ๋ช…์„ธ๋ฅผ type์œผ๋กœ ์ •์˜ํ•ด๋†“์Œ์œผ๋กœ์จ, ํ•ด๋‹น API ๋ช…์„ธ์— ์—ฐ๊ด€๋˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์šฉ์ดํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ํ•ด๋‹น ํƒ€์ž…์„ ๋ฏธ๋ฆฌ ์ •์˜ํ•ด๋†“๊ณ , ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํƒ€์ž…์„ ์ด์šฉํ•˜์—ฌ ํ•ด๋‹น ํƒ€์ž…์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ๋‹ค.
  • ์ปดํŒŒ์ผ ํƒ€์ž„์— ์ฝ”๋“œ ์˜ค๋ฅ˜๋ฅผ ์žก์„ ์ˆ˜ ์žˆ๊ณ , ํƒ€์ž… ์ฒดํ‚น์„ ์ง€์›ํ•จ์œผ๋กœ์จ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ์‹ค์ˆ˜ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ€๋Šฅ์„ฑ์„ ์ค„์—ฌ์ค€๋‹ค.

Next.js

  • Framework ๊ด€์ ์—์„œ์˜ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜ ํ–ฅ์ƒ
    • ํŒŒ์ผ ์‹œ์Šคํ…œ ๊ธฐ๋ฐ˜ routing ๋“ฑ์„ ์ง€์›ํ•จ์œผ๋กœ์จ, ๊ฐœ๋ฐœ์ž ๋ผ๋ฆฌ ์ •ํ•ด์•ผํ•  boiler plate์˜ ์ˆ˜๊ฐ€ ์ค„์–ด๋“ค๊ฒŒ ๋˜๊ณ  ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜ ํ–ฅ์ƒ๊ณผ ํ•จ๊ป˜ ํ•ด๋‹น ๋ถ€๋ถ„์—์„œ ์‹ค์ˆ˜ ๊ฐ€๋Šฅ์„ฑ์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.
  • SEO์˜ ํ•„์š”์„ฑ
    • ์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ์˜ ๊ฒฝ์šฐ ํ™๋ณด๊ฐ€ ์ค‘์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์— SEO์˜ ๋Œ€ํ•œ ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์œผ๋ฉฐ, Next.js์˜ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์„ ์œ ๋ฆฌํ•˜๊ฒŒ ํ™œ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค๊ณ  ํŒ๋‹จํ–ˆ๋‹ค.

Recoil

  • ๊ฐ„๊ฒฐํ•˜๋ฉฐ ์‰ฌ์šด ์ƒํƒœ ๊ด€๋ฆฌ
    • useState ์ฒ˜๋Ÿผ useSetRecoilState, useRecoilValue, useRecoilState์™€ ๊ฐ™์ด hooks์˜ ๊ด€์ ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ„๊ฒฐํ•˜๋ฉฐ ๋ณด๋‹ค ์‰ฌ์šด ์ƒํƒœ ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ํ”„๋กœ์ ํŠธ์˜ ์„ฑ๊ฒฉ ๊ณ ๋ ค
    • ๋ชจ๋ฐ”์ผ ์•ฑ๊ณผ ๋น„์Šทํ•œ UI ์—์„œ ๋ชจ๋‹ฌ๊ณผ ๊ฐ™์€ ์ „์—ญ์ ์ธ UI ์ƒํƒœ๊ฐ€ ๋งŽ์ด ์‚ฌ์šฉ๋  ๊ฒƒ์ด๋ผ๊ณ  ์˜ˆ์ƒ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ „์—ญ ์ƒํƒœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ณ ๋ คํ•˜๊ฒŒ ๋˜์—ˆ์œผ๋ฉฐ ๊ทธ ์ค‘ Recoil์„ ์ƒ๊ฐํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

React Query

  • ์„œ๋ฒ„ ์ƒํƒœ & ํด๋ผ์ด์–ธํŠธ ์ƒํƒœ์˜ ๋ถ„๋ฆฌ
    • ์„œ๋ฒ„ ๊ด€๋ จ ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•ด React Query ์—์„œ ๋ชจ๋‘ ์ฒ˜๋ฆฌ ๋  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„ ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ธฐ์กด ํด๋ผ์ด์–ธํŠธ ์ƒํƒœ์™€ ์„œ๋ฒ„ ์ƒํƒœ์˜ ๋ถ„๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ๋ฐ์ดํ„ฐ ์บ์‹ฑ์„ ํ†ตํ•œ ์„œ๋ฒ„ ๋ถ€๋‹ด์˜ ๊ฐ์†Œ
    • React Query๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ fetching ํ•ด์˜จ ํ›„ ์บ์‹ฑ ํ•˜๊ฒŒ ๋˜๋ฉฐ, ํ•ด๋‹น ๋ฐ์ดํ„ฐ๊ฐ€ stale ํ•˜๋‹ค๊ณ  ํŒ๋‹จ๋  ๋•Œ ๋ฐ์ดํ„ฐ๋ฅผ refetching ํ•ด์˜ค๊ฒŒ ๋œ๋‹ค.
  • ์—๋Ÿฌ ํ•ธ๋“ค๋ง์˜ ์ค‘์•™ํ™”
    • defaultOptions & queries ํ”„๋กœํผํ‹ฐ๋ฅผ ํ†ตํ•ด ๊ณตํ†ต์ ์ธ Success & Error handling์ด ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ ์ค‘๋ณต์„ ์ตœ์†Œํ™” ํ•  ์ˆ˜ ๋‹ค.
  • ํŽธ๋ฆฌํ•œ ๋””๋ฒ„๊น…
    • ํ™•์ธํ•˜๊ณ ์ž ํ•˜๋Š” ๋ชจ๋“  ์ฟผ๋ฆฌ ์บ์‹œ์˜ ๋ฐ์ดํ„ฐ ์ƒํƒœ(fresh, stale ๋“ฑ)๋ฅผ ํ™•์ธ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
    • query details, Actions, Data explorer, query explorer ๋“ฑ์˜ ์˜ต์…˜๋“ค์„ ์ œ๊ณตํ•œ๋‹ค.

Tailwind CSS

  • Utility Class
    • Utility Class๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์—, CSS ์˜ ์žฌ ์‚ฌ์šฉ์„ฑ์„ ๊ทน๋Œ€ํ™”ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ž˜ ๋งŒ๋“ค์–ด์ง„ css๋ฅผ ์‚ฌ์šฉํ•จ์œผ๋กœ์จ ์ผ๊ด€๋œ UI๋ฅผ ์‰ฝ๊ฒŒ ๊ตฌ์ถ• ๊ฐ€๋Šฅํ•˜๋‹ค.
  • Optimizing for Production
    • ํ”„๋กœ๋•์…˜ ์šฉ์œผ๋กœ ๋นŒ๋“œ ํ•  ๋•Œ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๋ชจ๋“  CSS๋ฅผ ์ž๋™์œผ๋กœ ์ œ๊ฑฐํ•จ์œผ๋กœ์จ ์„ฑ๋Šฅ์ ์ธ ์ด์ ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

StoryBook

  • ๋””์ž์ด๋„ˆ์™€์˜ ํ˜‘์—…
    • ๋…๋ฆฝ๋œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‰ฝ๊ฒŒ ๋ฌธ์„œํ™” ํ•จ์œผ๋กœ์จ ๋””์ž์ด๋„ˆ ๋“ค๊ณผ์˜ ํ˜‘์—…์— ์šฉ์ดํ•  ๊ฒƒ์ด๋ผ๊ณ  ํŒ๋‹จํ–ˆ๋‹ค.

Vercel

  • ci/cd
    • vercel์—์„œ ci/cd๋ฅผ ์œ„ํ•œ ํˆด์„ ์ง€์›ํ•ด์คŒ์œผ๋กœ์จ production ํ™˜๊ฒฝ์—์„œ ํ…Œ์ŠคํŠธ๊ฐ€ ๊ฐ€๋Šฅ ํ•˜๋‹ค.
    • ์ฝ”๋“œ ๋ฆฌ๋ทฐ ์‹œ production๊ณผ ํ™˜๊ฒฝ์˜ ci/cd๋ฅผ ํ†ตํ•ด ์ฝ”๋“œ ๋ฆฌ๋ทฐ ์‹œ ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•œ ๋™์ž‘ ํ…Œ์ŠคํŠธ๋ฅผ ์šฉ์ดํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค.
โš ๏ธ **GitHub.com Fallback** โš ๏ธ