다비오 변화 탐지 시스템 - 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 - 프로덕션 의존성 + 빌드 결과물만 포함하여 실행