빌드 build

빌드란 무엇인가?

• 소스 코드와 리소스를 배포 가능한 형태로 변환하는 과정

• 작성한 코드는 개발자의 언어 (ES6문법, JSX, TypeScript, Sass, etc.) => 브라우저가 이해할 수 있는 형태로 변환

  예시)

  • JavaScript : 최신 문법 -> 오래된 브라우저도 이해할 수 있는 코드

  • CSS : Sass나 Less 같은 언어를 일반 CSS로 변환

  • 이미지 : 크기를 줄이고 최적화

    => 빌드 결과 : 최적화된 HTML, CSS, JavaScript, 이미지 파일

빌드가 필요한 이유

1. 최적화

• 코드 크기를 압축하고 웹사이트 로딩 속도를 빠르게 함
• 사용하지 않는 코드를 제거 (트리 셰어킹)

2. 호환성

• 브라우저가 최신 JavaScript문법이나 모듈을 이해하지 못할 수 있는데 빌드를 통해 브라우저 호환성 보장

3. 배보 준비

• 개발 환경의 복잡한 파일들을 간단하고 효울적인 형태로 변환
• 배포할 때 필요없는 개발용 코드나 디버깅 정보를 제거

빌드 과정

1. 코드변환

• TypeScript -> JavaScript
• JSX -> 일반 JavaScript
• Sass/Less -> CSS

2. 번들링

• 여러 개의 파일(HTML, CSS, JS 등)을 하나의 번들로 묶음

3. 압축(최적화)

• 코드 크기를 줄이고(예: 변수 이름을 짧게 만듦), 주석 제거

4. 배포 파일 생성

• 결과물은 dist/나 build/ 폴더에 저장
• 이 폴더는 웹서버에 업로드할 준비가 된 상태