생존일기

빌드와 컴파일

방구석챌린저 2024. 12. 10. 22:23

 

컴파일(Compile)

웹 개발에서 컴파일(Compile)은 주로 웹 애플리케이션의 소스 코드를 브라우저가 실행 가능한 형태로 변환하는 과정에서 사용됩니다. 이 과정은 웹 기술의 다양성과 브라우저 간 호환성을 보장하기 위해 필수적인 작업입니다.

웹 개발에서의 컴파일이 필요한 이유

  • 최신 문법과 호환성 문제
    • 최신 JavaScript(ES6+) 문법은 일부 오래된 브라우저에서 지원되지 않습니다.
    • TypeScript와 같은 언어는 JavaScript로 변환이 필요합니다.
  • 다양한 언어 사용
    • CSS 전처리기(SASS, LESS 등), TypeScript, JSX(React) 등은 브라우저에서 직접 실행할 수 없으며, 컴파일 후 표준 코드로 변환해야 합니다.
  • 최적화
    • 웹 앱의 성능을 높이기 위해 코드 최적화 및 압축이 필요합니다.

웹 개발에서 컴파일이 수행되는 주요 영역

 

  • HTML 템플릿 엔진 컴파일
    • HTML 템플릿 엔진(Pug, Handlebars 등)으로 작성된 템플릿을 표준 HTML로 변환.
h1 #{title}

 

<h1>Hello World</h1>

 

CSS 전처리기 컴파일

  • SASS(SCSS)나 LESS 같은 CSS 전처리기로 작성된 스타일 파일을 표준 CSS로 변환.
$primary-color: #333;
body {
  color: $primary-color;
}
body {
  color: #333;
}

 

JavaScript 트랜스파일링

  • TypeScript, ES6+ 코드, JSX(React) 등을 브라우저 호환 JavaScript로 변환.
  • 도구: Babel, TypeScript Compiler, SWC.

예 (ES6 → ES5)

const greet = () => console.log("Hello");
var greet = function() {
    console.log("Hello");
};

 

프레임워크/라이브러리 컴파일

  • React, Vue.js, Angular와 같은 프레임워크는 컴파일을 통해 브라우저가 실행 가능한 코드로 변환.

예 (React JSX → JavaScript)

const element = <h1>Hello, world!</h1>;
const element = React.createElement("h1", null, "Hello, world!");

 

컴파일 과정이 필요한 워크플로우

 

    • React 앱 개발
      • 작성된 JSX 코드와 최신 JavaScript 문법을 Babel과 Webpack을 사용해 변환.
      • 명령어: npm run build -> 최적화된 HTML, CSS, JavaScript.
    • TypeScript 사용
      • TypeScript 코드를 tsc 명령으로 JavaScript로 변환.

명령어

tsc index.ts

-> 결과물: index.js.

 

SASS 스타일 적용

  • SCSS 파일을 CSS로 변환.

명령어

  • sass styles.scss styles.css

-> 결과물: styles.css.

웹 개발에서 컴파일의 특징

  • 빠른 개발 지원: 개발 중에는 실시간으로 소스 코드가 변환(컴파일)되어 브라우저에서 테스트 가능.
  • 생산성 향상: 고급 언어(TypeScript, SCSS 등)로 코드를 작성할 수 있어 코드 관리가 쉬워짐.
  • 최적화와 호환성 보장: 배포 시 코드를 압축, 번들링하고 이전 브라우저와 호환되게 변환.

 빌드(Build) - 웹

 

웹 빌드는 웹 애플리케이션의 소스 코드를 배포 가능한 형태로 변환하는 과정입니다. 이를 통해 개발자가 작성한 소스 코드(HTML, CSS, JavaScript, 이미지 등)가 브라우저에서 실행 가능한 최적화된 결과물로 변환됩니다.

 

웹 빌드는 단순한 파일 결합과 변환을 넘어, 성능 최적화와 호환성 확보를 위한 다양한 작업을 포함합니다.

웹 빌드 과정의 주요 작업

 

번들링(Bundling)

 

  • 여러 개의 JavaScript 또는 CSS 파일을 하나로 결합.
  • 네트워크 요청 수를 줄여 성능을 개선.
  • 예) app.js, util.js → bundle.js로 결합.

트랜스파일링(Transpiling)

  • 최신 문법을 사용한 코드를 이전 브라우저에서도 실행 가능하도록 변환.
  • 사용사례
    • ES6+ 코드를 ES5로 변환(Babel 사용).
    • TypeScript 코드를 JavaScript로 변환.

예 (ES6 → ES5 변환)

const greet = () => console.log("Hello");

 

변환 후

var greet = function() {
    console.log("Hello");
};

 

압축(Minification)

 

  • 코드에서 불필요한 공백, 주석, 줄바꿈 등을 제거.
  • 목적: 파일 크기를 줄여 로딩 속도 향상.

예

 

압축 전

function sum(a, b) { return a + b; }

 

압축 후

function sum(a,b){return a+b;}

 

코드 분할(Code Splitting)

  • 애플리케이션을 작은 단위로 나눠 필요한 부분만 로드.
  • 초기 로딩 시간을 줄이고 성능을 개선.
  • 도구: Webpack, Rollup 등.

이미지 최적화(Image Optimization)

  • 이미지 파일의 크기를 줄이고, 적절한 형식(WebP 등)으로 변환.
  • 도구: ImageMagick, Imagemin.

폴리필(Polyfill) 추가

*폴리필(Polyfill)은 오래된 브라우저나 환경에서 지원되지 않는 최신 웹 기술(예: HTML, CSS, JavaScript 기능)을 사용할 수 있도록 기능을 “메우는” 코드나 라이브러리입니다.

  • 오래된 브라우저에서 최신 기능을 사용할 수 있도록 지원 코드 삽입.
  • 예: Promise, fetch를 지원하지 않는 브라우저를 위해 폴리필 추가.

환경 변수 설정(Environment Variables)

    • 개발, 테스트, 프로덕션 환경에 맞는 설정 적용.
    • 예
      • 개발 환경에서는 디버깅용 코드 유지.
      • 프로덕션 환경에서는 디버깅 코드 제거.

웹 빌드의 장점

  • 성능 최적화
    • 압축 및 번들링을 통해 파일 크기를 줄이고, 로딩 속도를 개선.
  • 호환성 확보
    • 최신 기술을 오래된 브라우저에서도 실행 가능.
  • 환경 맞춤 설정
    • 개발 환경과 프로덕션 환경에 적합한 결과물 생성.
  • 자동화
    • 반복적인 작업을 빌드 도구로 자동화하여 생산성 향상

웹 빌드의 최종 결과물

  • 최적화된 HTML, CSS, JavaScript 파일.
  • 배포 가능한 폴더 구조(예: dist/ 폴더).
  • 압축된 이미지와 리소스 파일.

컴파일 vs 빌드(Web Build에서)

항목 컴파일 빌드
범위 소스 코드 → 브라우저가 이해 가능한 코드로 변환 컴파일 + 번들링 + 최적화 등 전체 과정 포함
결과물 변환된 HTML, CSS, JavaScript 코드 배포 가능한 최적화된 결과물(예: dist/ 폴더)
사용 도구 Babel, TSC, SASS 등 Webpack, Vite, Parcel 등

웹 개발에서 컴파일은 개발 생산성을 높이고 최신 기술을 지원하며, 빌드 과정의 중요한 부분으로 작용합니다.