Question 1

프로젝트 빌드와 배포가 무엇인가요?

Accepted Answer

## 빌드(Build)

**개발용 소스 코드를 브라우저(또는 런타임)가 실행할 수 있는 최적화된 산출물로 변환하는 과정**입니다.

```
소스 (TS, JSX, SCSS, 이미지, 다수 모듈)
  ↓ 트랜스파일 — TS/JSX → JS, 최신 문법 → 타깃 문법 (SWC, Babel, esbuild)
  ↓ 번들링 — 모듈 의존성 그래프를 따라 파일 병합 (Turbopack, Webpack, Vite/Rollup)
  ↓ 트리 셰이킹 — 사용하지 않는 export 제거
  ↓ 코드 스플리팅 — 라우트·동적 import 단위로 청크 분리
  ↓ 최소화(Minify) — 공백·주석 제거, 변수명 축약
  ↓ 에셋 처리 — 이미지 최적화, CSS 추출, 폰트 서브셋
  ↓ 해싱 — main.a3f9c2.js (콘텐츠 해시 → 장기 캐싱 + 즉시 무효화)
  ↓ 소스맵 생성
산출물 (.next/, dist/)
```

**해싱이 중요한 이유**: 파일명에 콘텐츠 해시가 들어가면 `Cac

Question 2

번들러를 사용하는 이유는 무엇인가요?

Accepted Answer

번들러는 **여러 모듈과 에셋을 의존성 그래프로 분석해 최적화된 소수의 파일로 묶는 도구**입니다. Webpack, Vite(Rollup), esbuild, Turbopack, Rspack, Parcel이 대표적입니다.

## 왜 필요한가

**1. 모듈 시스템 해결 (역사적 출발점)**
브라우저에 모듈 개념이 없던 시절, 전역 스코프 오염과 스크립트 로딩 순서 문제가 심각했습니다. 번들러가 CommonJS/AMD/ESM을 하나로 합쳐 이를 해결했습니다.

**2. 네트워크 요청 수 감소**
수백 개 모듈을 개별 파일로 내려받으면 HTTP/1.1에서는 치명적이었습니다. HTTP/2의 다중화로 완화됐지만, **요청마다 오버헤드(헤더·우선순위 협상)는 여전히** 있고 수천 개 단위에서는 문제가 됩니다.

**3. 트랜스파일 통합** — TS/JSX/최신 문법을 타깃 브라우저용으로 변환

**4. 트리 셰이킹** — 사용하지 않는 export 제거. ESM의 정적 구조 덕분에 가능합니다.

Question 3

package.json 파일의 주요 필드와 역할을 설명할 수 있나요?

Accepted Answer

`package.json`은 Node.js 프로젝트의 **매니페스트**로, 메타데이터·의존성·스크립트·모듈 해석 규칙을 담습니다.

## 기본 메타데이터

```jsonc
{
  "name": "@scope/pkg",        // npm 배포 시 유일해야 함
  "version": "1.2.3",          // SemVer: MAJOR.MINOR.PATCH
  "private": true,             // ⭐ 실수로 npm에 배포되는 것을 막음. 앱은 반드시 true
  "type": "module",            // "module" = ESM 기본, 없거나 "commonjs" = CJS
  "license": "MIT",
  "packageManager": "pnpm@9.12.1"  // Corepack이 이 버전을 강제
}
```

## 의존성 4종 — 구분이 면접 포인트

| 필드 | 설치 시점 | 용도 |
| --- | --- | --- |
|

빌드·배포

01프로젝트 빌드와 배포가 무엇인가요?쉬움빌드

02번들러를 사용하는 이유는 무엇인가요?보통번들러

03package.json 파일의 주요 필드와 역할을 설명할 수 있나요?보통패키지 관리