bodalab/doc/개발환경.md

개발환경

---

기술 스택

항목	버전
Vite	^8.0
SCSS (sass)	^1.101
jQuery	^4.0
Prettier	^3.8

---

명령어

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 폰트