[FE] 기술 스택 - woowacourse-teams/2026-gachi-gacha GitHub Wiki

기술 스택

항목 버전·기준
Node.js 24.19.0 LTS
Package Manager pnpm 11.9.0
React 19.2.8
TypeScript 6.0.3
Bundler Webpack 5
TypeScript Loader ts-loader
Styling styled-component
Lint ESLint
Format Prettier
API Mocking MSW
UI Workshop Storybook

사전 요구사항

도구 버전·기준
Git -
WSL2 Ubuntu 24.04 권장
NVM Node.js 버전 관리
Node.js 24.19.0
pnpm 11.9.0

Node.js와 pnpm 버전은 각각 frontend/.nvmrc, frontend/package.json에 고정되어 있습니다.

기술 스택 선정 이유

백엔드 API가 준비되기 전에는 MSW로 API 동작을 재현하고, Storybook을 통해 페이지 결합 전 컴포넌트를 독립적으로 확인.

  • Node.js 버전 고정
    • .nvmrc와 package.json의 engines를 통해 팀원 간 실행 환경 차이를 줄인다.
    • 로컬과 CI에서 동일한 Node.js 버전을 사용할 수 있게 한다.
  • React와 TypeScript
    • UI를 컴포넌트 단위로 구성한다.
    • API 응답과 컴포넌트 Props에 타입을 적용하여 런타임 오류 가능성을 줄인다.
  • Webpack
    • CRA나 Vite 같은 보일러플레이트를 사용하지 않고 직접 개발·운영 빌드를 구성한다.
    • 번들링, 정적 자원 처리, HMR, 소스 맵, 코드 스플리팅 과정을 직접 학습한다.
  • pnpm
    • 엄격한 peer dependency 검사를 통해 잘못된 의존성 구성을 빠르게 발견한다.
    • lockfile을 이용해 팀원 간 동일한 패키지 설치 결과를 재현한다.
    • 향후 프론트엔드 내부에 공유 패키지가 필요해질 경우 workspace 구조로 확장할 수 있다.
  • Emotion - styled component
    • Emotion의 styled API를 사용해 컴포넌트와 스타일의 연관성을 유지한다.
    • Props에 따른 동적 스타일을 TypeScript 타입과 함께 관리할 수 있다.
    • 별도의 CSS 파일을 사용하지 않기 때문에 현재 Webpack에는 CSS loader가 필요하지 않다.
  • ESLint와 Prettier
    • ESLint는 코드의 잠재적인 오류와 React Hooks 사용 규칙을 검사한다.
    • Prettier는 세미콜론, 따옴표, 들여쓰기 등 코드 형식을 통일한다.
    • 두 도구의 역할을 분리해 규칙 충돌을 방지한다.
  • MSW
    • 실제 백엔드 API가 준비되기 전에도 브라우저의 네트워크 요청을 가로채 동일한 응답 구조를 재현한다.
    • UI 코드를 임시 데이터에 강하게 결합하지 않고 실제 fetch 흐름에 가깝게 개발할 수 있다.
  • Storybook
    • 페이지에 컴포넌트를 결합하기 전에 독립적인 상태와 UI를 확인한다.
    • 로딩, 성공, 빈 데이터, 오류 등의 상태를 개별적으로 재현할 수 있다.