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>
103 lines
2.9 KiB
Markdown
103 lines
2.9 KiB
Markdown
# 다비오 변화 탐지 시스템 - 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** (선택, 컨테이너 환경 사용 시)
|
|
|
|
## 시작하기
|
|
|
|
### 로컬 개발
|
|
|
|
```bash
|
|
corepack enable
|
|
pnpm install
|
|
pnpm dev
|
|
```
|
|
|
|
개발 서버가 `http://localhost:5173`에서 실행됩니다.
|
|
|
|
### Docker 개발
|
|
|
|
```bash
|
|
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)
|
|
|
|
```bash
|
|
docker compose up
|
|
```
|
|
|
|
- 소스 코드를 컨테이너에 볼륨 마운트하여 실시간 반영
|
|
- `node_modules`는 별도 named volume으로 관리
|
|
- 포트: `5173`
|
|
|
|
### 프로덕션 빌드 (Dockerfile)
|
|
|
|
```bash
|
|
docker build -t dabeeo-web .
|
|
docker run -p 3000:3000 dabeeo-web
|
|
```
|
|
|
|
Multi-stage 빌드로 최적화된 이미지를 생성합니다:
|
|
|
|
1. **development-dependencies-env** - 전체 의존성 설치 (빌드 도구 포함)
|
|
2. **production-dependencies-env** - 프로덕션 의존성만 설치
|
|
3. **build-env** - 애플리케이션 빌드
|
|
4. **final** - 프로덕션 의존성 + 빌드 결과물만 포함하여 실행
|