빌드(Build)

빌드는 소프트웨어 개발 단계 중 하나로, 소스 코드와 리소스를 컴파일하고 패키징하여 실행 가능한 프로그램이나 라이브러리를 생성하는 과정입니다. 즉, 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업입니다.

빌드 도구는 이러한 작업을 자동화하며, 빌드를 통해 프로젝트의 일관된 상태를 유지하고 실행 가능한 결과물을 생성합니다. 주요 목적은 코드를 최적화하고, 프로덕션 환경에서 실행 가능한 형태로 변환하는 것입니다. 빌드 과정에는 여러 단계가 포함될 수 있습니다:

1. 컴파일(Compile): 소스 코드를 기계어나 중간 코드로 변환합니다. 주로 프로그래밍 언어에 따라 다르며, 예를 들면 Java의 경우 Java 코드를 바이트코드로 변환하는 것이 있습니다.
2. 번역(Translate): 다양한 언어나 플랫폼 간의 번역을 수행합니다. 예를 들어 TypeScript를 JavaScript로 번역하는 단계가 여기에 속합니다.
3. 리소스 처리(Resource Processing): 이미지, 텍스트 파일, 설정 파일 등의 리소스를 처리하여 실행 가능한 형식에 포함시킵니다.
4. 코드 최적화(Optimization): 코드의 성능을 향상시키거나, 불필요한 부분을 제거하여 최적화합니다.
5. 번들링(Bundling): 번들링은 여러 파일로 분리된 소스 코드나 리소스를 하나로 묶어주는 과정입니다.

1. 컴파일(Compile):

컴파일은 주로 정적인 언어에서 사용되는 용어로, 소스 코드를 기계어 또는 중간 언어로 변환합니다. 자바의 경우에는 Java 코드를 바이트 코드로 컴파일하는 것이 해당됩니다. 그러나, 동적인 언어인 자바스크립트는 일반적으로 컴파일러에 의해 직접적으로 기계어로 변환되지 않습니다.

컴파일러는 소스 코드를 목적 코드(바이너리 코드 또는 중간 코드)로 변환하는 프로그램입니다. 이 변환은 전체 소스 코드를 한 번에 처리하며, 목적 코드는 주로 기계어나 가상 머신 코드입니다. 컴파일된 코드는 실행 파일로 저장되고, 이후에는 해당 실행 파일을 사용하여 프로그램을 실행합니다.

즉, 컴파일러는 고급 프로그래밍 언어(프로그래머가 사용하는 프로그래밍 언어)를 컴퓨터가 이해할 수 있는 저급 프로그래밍 언어(어셈블리어)로 변환하는 프로그램입니다.

JavaScript는 일반적으로 인터프리터 언어로 취급되지만, 최근에는 JIT(Just-In-Time) 컴파일러와 같은 기술이 도입되면서 일부 브라우저에서는 JavaScript 코드를 미리 컴파일하여 실행 속도를 향상시키고 있습니다.

1. 정적 언어(Static Language)와 동적 언어(Dynamic Language)의 기준?
   : 정적 언어와 동적 언어는 주로 언어가 변수의 타입을 언제 결정하느냐에 따라 구분되는 용어입니다.

• 정적 언어(Static Language):
  • 변수의 타입이 컴파일 시간에 결정되는 언어입니다. 개발자는 변수를 선언할 때 해당 변수의 데이터 타입을 명시적으로 지정해야 합니다.
  • 컴파일러는 소스 코드를 컴파일할 때 변수의 타입을 검사하고, 타입 불일치 등의 오류를 빠르게 발견할 수 있습니다.
  • 대표적인 정적 언어로는 Java, C++, Swift 등이 있습니다.
• 동적 언어(Dynamic Language):
  • 변수의 타입이 런타임(실행 시간)에 결정되는 언어입니다. 개발자는 변수를 선언할 때 명시적으로 데이터 타입을 지정할 필요가 없습니다.
  • 변수에 대한 타입 정보는 실행 도중에 동적으로 결정되므로, 런타임 오류가 발생할 수 있습니다. 이를 컴파일 시간에 잡아내기 어려울 수 있습니다.
  • 대표적인 동적 언어로는 JavaScript, Python, Ruby 등이 있습니다.

2. 동적 언어와 인터프리터 언어?
   동적 언어는 코드 실행 시점에 변수의 타입이 결정되며, 인터프리터 언어는 소스 코드를 한 줄씩 읽어들여서 즉시 실행하는 언어를 의미합니다. 이 둘의 특성은 종종 함께 언급되곤 합니다.
   예를 들어, 파이썬의 경우에는 파이썬 인터프리터가 소스 코드를 실행하면서 코드를 해석하고 즉시 실행합니다. 마찬가지로, 자바스크립트 엔진이 웹 브라우저나 Node.js에서 소스 코드를 해석하고 실행하는 것 역시 인터프리터 언어의 특성을 나타냅니다.

2. 트랜스파일(Transpile)

주로 동적인 언어에서 사용되는 용어로, 소스 코드를 동일한 수준의 추상화를 유지하면서 다른 버전의 언어로 변환합니다. 예를 들어, TypeScript는 JavaScript로 트랜스파일됩니다. 또는 ES6+ 코드를 ES5로 트랜스파일하는 경우도 해당됩니다.

트랜스파일러는 소스 코드를 다른 버전의 소스 코드로 변환하는 도구입니다. Source-to-source compile이라고도 부르며, 주로 언어의 버전이나 형식을 변환하는 데 사용되며, 변환된 코드는 여전히 소스 코드의 형태를 유지합니다. JavaScript에서는 ES6(ES2015) 버전의 코드를 ES5로 변환하는 Babel과 같은 트랜스파일러가 널리 사용됩니다. 뿐만 아니라, TypeScript나 React의 JSX 문법으로 작성된 코드도 브라우저에서 실행가능한 JavaScript로 변환하여 올바르게 동작하도록 만들어 줍니다.

트랜스파일러는 위에서 설명한 컴파일러의 하위분류입니다. 언어를 변환해 주는 기능을 제공하는 소프트웨어인 것은 일반적인 컴파일러와 동일하지만, 트랜스파일러는 완전히 다른 두 언어 사이를 변환해 주는 것이 아니라 유사한 두 언어 사이에서 변환해주는 한정된 역할을 제공해 주는 소프트웨어라는 점이 다릅니다.

예를 들어 고급 프로그래밍 언어를 저급 프로그래밍 언어로 변환해 주는 컴파일러가 외국어를 한국어로 번역해 주는 번역가라고 한다면, 트랜스파일러는 옛 우리말을 현대 한국어로 번역해 주는 번역가라고 할 수 있겠습니다.

바벨이라는 툴이 트랜스파일러인 이유는, 최신 자바스크립트 문법으로 작성된 코드를 구버전 브라우저도 이해할 수 있는 수준의 오래된 자바스크립트 코드로 변환해 주는 소프트웨어이기 때문입니다. 즉, 바벨은 트랜스파일러로써 유사한 두 언어 사이에서의 변환 기능을 제공해줍니다.

바벨(Babel)과 폴리필(polyfill)

polyfill의 사전적 의미는 ‘충전솜’으로써 브라우저가 지원하지 않는 기능을 사용 가능한 코드 조각이나 플러그인으로 즉, JavaScript 코드로 변환하여 채워넣어주는 역할을 합니다. 주로 새로운 JavaScript 기능이나 API를 이전 버전의 브라우저에서도 사용할 수 있도록 지원합니다.

Babel이 트랜스파일링을 통해 구현하는 것은 주로 문법적인 측면이고, Polyfill은 브라우저의 런타임 환경에서 지원하지 않는 새로운 API나 기능을 채워넣는 역할입니다.

두 기술은 종종 함께 사용되어 최신 JavaScript 코드를 구식 브라우저에서 실행할 수 있도록 도와줍니다. Babel로 코드를 변환하고, 필요한 Polyfill을 적용하여 브라우저 간의 호환성을 유지할 수 있습니다. 예를 들어, Babel을 사용하여 ES6 코드를 ES5로 변환하고, 그에 필요한 Polyfill을 추가하여 ES6에서 도입된 새로운 기능(ex: ES6부터 도입된 Promise와 같이 ES5로 대체 불가능한 기능)을 오래된 브라우저에서도 사용할 수 있게 할 수 있습니다.

Polyfill은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 합니다.

앞에서 말한대로 polyfill 은 프로그램이 처음 시작될 때 지원하지 않는 기능을 추가하는 것, 다시말하면 Babel은 컴파일시에 실행되고 Polyfill은 런타임시에 실행됩니다.

3. 번들(Bundle):

번들링은 여러 파일로 분리된 소스 코드나 리소스를 하나로 묶어주는 과정입니다. 주로 웹 개발에서 사용되며, 프론트엔드에서는 주로 JavaScript, CSS, 이미지 등을 하나의 파일로 번들링하여 네트워크 전송량을 줄이고 성능을 향상시킵니다. 번들링은 여러 모듈 간의 의존성을 해결하고, 코드의 최적화를 수행하여 빠르게 로딩되는 웹 페이지를 만들 수 있도록 도와줍니다.

번들러는 프로젝트에서 사용하는 여러 개의 파일을 하나로 묶어주는 도구입니다. 주로 웹 개발에서 사용되며, 프론트엔드에서는 JavaScript, CSS, 이미지 등을 번들링하여 네트워크 비용을 줄이고 성능을 향상시킵니다.

번들러는 여러 모듈 간의 의존성을 해결하고, 번들링된 결과물을 최적화하는 역할을 수행합니다. 주요 기능은 다음과 같습니다:

1. 개발 서버 지원 및 HMR(Hot Module Replacement) 기능 지원: HMR은 코드의 변경 사항을 새로고침 없이 즉시 반영 시켜주는 기능입니다.
2. 코드 경량화(Minify): 코드를 작은 용량으로 변환해 줍니다.
3. Tree shaking: 사용하지 않는 코드들을 제거하여 번들 크기를 최소화하는 기능입니다.
4. 모듈 번들링(Module Bundling): 여러 파일을 하나로 묶어 하나의 파일로 만듭니다. 이는 웹페이지에서의 HTTP 요청 수를 줄여 로딩 시간을 단축시키는 데 도움이 됩니다.
5. 의존성 해결(Dependency Resolution): 프로젝트의 모듈 간의 의존성을 자동으로 해결합니다.
6. 코드 스플리팅(Code Splitting): 필요한 코드만 요청 시점에 동적으로 로딩할 수 있도록 코드를 분할하는 기능을 제공합니다.

인기 있는 번들러로는 Webpack, ESbuild, Rollup, Vite, Parcel, Turbopack 등이 있습니다. 이러한 도구들은 모듈 시스템을 지원하고, 번들링된 결과물을 최적화하여 성능을 향상시킵니다.