← ClaudeAtlas

frontend-buildlisted

pnpm 워크스페이스와 Vite 빌드를 설정·정비하거나, 의존성·락파일·번들 크기·폐쇄망 self-host 문제를 다룰 때 사용한다. 프레임워크 자체의 코드 작성이 아니라 빌드/패키징 층이 대상이다.
LeeYudok/doksam-skills · ★ 10 · Web & Frontend · score 77
Install: claude install-skill LeeYudok/doksam-skills
# frontend-build 빌드·패키징 층을 담당한다. 컴포넌트 코드는 `react-expert` 가 맡는다. 이 문서는 **모델이 이미 아는 일반론을 적지 않는다.** 버전별 함정, 실측으로 확인한 사실, doksam 고유 규약, 그리고 판단이 갈리는 지점만 담는다. ## 0. 먼저 확정할 것 1. **산출물이 어디로 가는가** — 정적 호스팅 / 다른 언어 바이너리에 내장(`go:embed` 등) / 컨테이너. 내장이면 §4 를 반드시 읽는다. 뒤늦게 바꾸면 `.gitignore` 와 빌드 순서가 전부 얽힌다. 2. **폐쇄망인가** — 그렇다면 외부 CDN·폰트·원격 이미지가 0건이어야 한다(§3). 3. **패키지 매니저** — 레포에 이미 있는 락파일을 따른다. 섞지 않는다(§1). ## 1. pnpm ### 락파일이 곧 계약이다 - 설치는 CI·재현 환경에서 **`pnpm install --frozen-lockfile`**. 락파일이 어긋나면 조용히 올려버리는 대신 실패해야 한다. - 락파일을 지우고 다시 만드는 것은 "고치는" 게 아니라 **의존성 트리 전체를 바꾸는 변경**이다. 원인 파악 없이 삭제·재생성하지 않는다. - `package.json` 과 락파일은 **항상 같은 커밋**에 들어간다. ### lifecycle 스크립트는 기본 차단이다 pnpm 10부터 의존성의 install 스크립트가 기본으로 실행되지 않는다. `esbuild`·`sharp` 처럼 네이티브 바이너리를 내려받는 패키지는 **명시 허용**이 필요하다. ```jsonc // package.json "pnpm": { "onlyBuiltDependencies": ["esbuild", "sharp"] } ``` 증상이 "빌드는 되는데 런타임에 바이너리가 없다"로 나타나므로, 이 계열 오류를 보면 설치 로그의 차단 경고부터 확인한다. **아무거나 허용 목록에 넣지 않는다** — 임의 코드 실행이다. ### 워크스페이스 - `pnpm-workspace.yaml` 이 패키지 경계다. 루트에는 도구만 두고 앱 의존성을 올리지 않는다. - 패키지 간 참조는 `"workspace:*"`. 버전 번호를 손으로 맞추지 않는다. - 특정 패키지에서 실행: `pnpm --filter <pkg> build`. 루트에서 `cd` 로 들어가지 않는다. - 버전을 강제로 맞춰야 하면 `pnpm.overrides`. 단 **왜 필요한지 주석**을 남긴다. 근거 없는 override 는 다음 업그레이드에서 아무도 못 지운다. ### npx / dlx 일회성 CLI 는 `pnpm dlx <pkg>`. `npx` 는 npm 계열 캐시를 따로 쓰므로 pnpm 레포에서 섞으면 버전이 갈린다. 다만 **shadcn CLI 처럼 `npx` 를 전제로 문서화된 도구**는 그대로 써도 된다 — 설치가 아니라 코드 생성이 목적이라 트리에 영향이 없다. ## 2. Vite ### 반드시 확인하는 설정 ```ts export default define