빌드(Build)란
"내가 짠 코드를 컴퓨터나 브라우저가 실행할 수 있는 형태로 변환하는 과정" 이다.
왜 변환이 필요한가
개발자가 짜는 코드와 실제 실행되는 코드는 다르기 때문이다.
개발자가 짜는 코드:
// 읽기 좋게 작성
const greeting = (name) => {
return `안녕하세요 ${name}님!`
}
브라우저가 실행하는 코드:
// 용량 줄이고 최적화된 형태
const a=n=>`안녕하세요 ${n}님!`;
빌드가 하는 일들
1. 압축 (Minify)
공백, 줄바꿈, 긴 변수명 제거 → 파일 크기 줄임 → 로딩 빠름
2. 번들링 (Bundling)
파일 100개짜리 코드 → 파일 1~2개로 합침 → 요청 횟수 줄임
3. 변환 (Transpile)
최신 JavaScript 문법 → 구형 브라우저도 읽을 수 있는 문법으로 변환 TypeScript → JavaScript로 변환
일상적인 비유
요리사(개발자)가 레시피(소스코드) 를 보고 요리하는 건 사람이 읽기 좋게 쓰여있다. 근데 실제 식당에서 손님한테 내보내려면 완성된 요리(빌드 결과물) 로 만들어야 한다.
빌드 = 레시피를 완성된 요리로 만드는 과정
개발할 때 vs 빌드할 때
개발할 때 (npm run dev)
- 빌드 없이 바로 실행
- 코드 수정하면 바로 반영
- 속도 느려도 괜찮음 (나만 보니까)
배포할 때 (npm run build)
- 압축, 최적화, 변환 전부 실행
- 완성된 결과물 생성
- 이걸 서버에 올려서 사용자한테 보여줌
정리
빌드는 개발자가 읽기 좋게 짠 코드를 사용자에게 빠르게 전달할 수 있는 최적화된 형태로 변환하는 과정이다.