Jinseok (심진석)
d1fdae63ac
## webpack vs vite vite는 최근 webpack 대신 많이 채택되고 있는 빌드 도구. 내부는 rollup이나 dev에선 esbuild, native esm을 사용하여 속도가 빠름. 반면 webpack은 관련된 모든 파일을 번들링 해야하기 때문에 개발에서 빌드 속도 차이가 수 초 이상 발생하게됨 ## react-router vs tanstack router react router는 리액트 초창기부터 사용되어져왔고, tanstack router는 비교적 최근에 생겨났는데, 타입 안정성에 신경을 쓰다보니 라우트를 위해 신경써야할 장치들이 있고, export 해야할 데이터가 달라 처음 사용하는 사람은 혼란이 있을 수 있음. 또한 그에 따른 러닝커브가 존재하여 react-router를 선택 Reviewed-on: #1 Co-authored-by: Jinseok (심진석) <jinseok.sim@tf.dabeeo.com> Co-committed-by: Jinseok (심진석) <jinseok.sim@tf.dabeeo.com>
다비오 변화 탐지 시스템 - Web Application
React Router 7 기반 SPA 웹 애플리케이션
기술 스택
| 분류 | 기술 |
|---|---|
| Framework | React 19 + React Router 7 (SPA) |
| Language | TypeScript 5.9 (strict) |
| Styling | Tailwind CSS 4.2 |
| Build Tool | Vite 8 |
| Package Manager | pnpm (corepack) |
| Code Quality | ESLint 10 + Prettier |
| Container | Docker + Docker Compose |
사전 요구사항
- Node.js 24+
- corepack 활성화 (
corepack enable실행 시 pnpm 자동 설치) - Docker & Docker Compose (선택, 컨테이너 환경 사용 시)
시작하기
로컬 개발
corepack enable
pnpm install
pnpm dev
개발 서버가 http://localhost:5173에서 실행됩니다.
Docker 개발
docker compose up
소스 코드가 볼륨 마운트되어 HMR이 동작합니다. http://localhost:5173에서 접근 가능합니다.
프로젝트 구조
web-app/
├── app/
│ ├── root.tsx # Root layout, ErrorBoundary
│ ├── app.css # Tailwind 글로벌 스타일
│ ├── routes.ts # 라우트 정의
│ ├── routes/
│ │ ├── home.tsx # 메인 페이지 (/)
│ │ ├── users.tsx # 유저 목록 (/users)
│ │ └── catch-all.tsx # 404 처리
│ └── welcome/ # Welcome 컴포넌트
├── public/ # 정적 파일
├── Dockerfile # 프로덕션 빌드 (multi-stage)
├── docker-compose.yml # 개발 환경
├── vite.config.ts # Vite 설정
├── react-router.config.ts # React Router 설정
├── tsconfig.json # TypeScript 설정
└── eslint.config.js # ESLint 설정
경로 별칭:
~/는./app/을 가리킵니다. (tsconfig.json에서 설정)
스크립트
| 명령어 | 설명 |
|---|---|
pnpm dev |
개발 서버 실행 (Vite HMR) |
pnpm build |
프로덕션 빌드 |
pnpm start |
프로덕션 서버 실행 |
pnpm typecheck |
TypeScript 타입 검사 |
pnpm lint |
ESLint 검사 |
pnpm lint:fix |
ESLint 자동 수정 |
Docker
개발 환경 (Docker Compose)
docker compose up
- 소스 코드를 컨테이너에 볼륨 마운트하여 실시간 반영
node_modules는 별도 named volume으로 관리- 포트:
5173
프로덕션 빌드 (Dockerfile)
docker build -t dabeeo-web .
docker run -p 3000:3000 dabeeo-web
Multi-stage 빌드로 최적화된 이미지를 생성합니다:
- development-dependencies-env - 전체 의존성 설치 (빌드 도구 포함)
- production-dependencies-env - 프로덕션 의존성만 설치
- build-env - 애플리케이션 빌드
- final - 프로덕션 의존성 + 빌드 결과물만 포함하여 실행