89 lines
2.0 KiB
Markdown
89 lines
2.0 KiB
Markdown
# 개발환경
|
|
|
|
---
|
|
|
|
## 기술 스택
|
|
|
|
| 항목 | 버전 |
|
|
|---|---|
|
|
| Vite | ^8.0 |
|
|
| SCSS (sass) | ^1.101 |
|
|
| jQuery | ^4.0 |
|
|
| Prettier | ^3.8 |
|
|
|
|
---
|
|
|
|
## 명령어
|
|
|
|
```bash
|
|
npm run dev # 개발 서버 실행 (localhost:3000, 자동 브라우저 오픈)
|
|
npm run build # 프로덕션 빌드 → dist/
|
|
npm run preview # 빌드 결과물 미리보기
|
|
npm run format # SCSS, JS Prettier 포맷 (HTML 제외)
|
|
```
|
|
|
|
---
|
|
|
|
## 디렉터리 구조
|
|
|
|
```
|
|
src/ # Vite root
|
|
├── index.html
|
|
├── js/
|
|
│ └── main.js
|
|
├── scss/
|
|
│ ├── main.scss
|
|
│ ├── base/ # reset, variable, mixin, font
|
|
│ └── page/ # 페이지별 SCSS
|
|
├── font/
|
|
│ ├── SUIT/
|
|
│ │ └── SUIT-Variable.woff2
|
|
│ └── DMSerifDisplay/
|
|
│ ├── DMSerifDisplay-Italic-latin.woff2
|
|
│ └── DMSerifDisplay-Italic-latin-ext.woff2
|
|
└── assets/ # 이미지 등 정적 파일
|
|
|
|
dist/ # 빌드 결과물 (git 제외)
|
|
doc/ # 프로젝트 문서
|
|
```
|
|
|
|
---
|
|
|
|
## 빌드 설정
|
|
|
|
- **출력 경로**: `dist/`
|
|
- **포맷**: `iife` — `file://` 로 직접 열어도 동작하도록 모듈 속성 제거
|
|
- **이미지 압축**: `vite-plugin-imagemin`
|
|
- jpg: mozjpeg quality 80
|
|
- png: optipng level 5 / pngquant 0.7~0.9
|
|
- gif: gifsicle level 3
|
|
- svg: 빈 속성 제거, viewBox 유지
|
|
- **CSS sourcemap**: 개발 서버에서만 활성화 (`devSourcemap: true`)
|
|
|
|
---
|
|
|
|
## SCSS 설정
|
|
|
|
- `modern-compiler` API 사용 (`@use` 기반, `@import` 미사용)
|
|
- 7-1 패턴 구조
|
|
|
|
---
|
|
|
|
## Prettier 설정
|
|
|
|
- 대상: `src/**/*.scss`, `src/**/*.js` (HTML 제외)
|
|
- `printWidth: 1000` — 줄바꿈 최소화
|
|
- `tabWidth: 2`, `useTabs: false`
|
|
- `singleQuote: false`
|
|
|
|
---
|
|
|
|
## 웹폰트
|
|
|
|
외부 CDN 없이 셀프호스팅. `src/font/` 에 woff2 파일 포함.
|
|
|
|
| 폰트 | 용도 |
|
|
|---|---|
|
|
| SUIT Variable | 기본 본문 폰트 (weight 100~900) |
|
|
| DM Serif Display Italic | 포인트 serif 폰트 |
|