[TECH-QA] 컴파일(Compile)과 빌드(Build) 그리고 React 웹팩(Webpack)과 바벨(Babel)

Posted 4 months Updated 4 months

By 베짱이가 되고싶은 개미。

컴파일 (Compile)

컴파일은 소스 코드를 사람이 작성한 고급 프로그래밍 언어(예: C, Java, Python 등)에서 컴퓨터가 이해할 수 있는 저급 언어(기계어 또는 바이트코드)로 변환하는 과정을 뜻합니다. 이 작업은 컴파일러(Compiler)라는 도구가 수행합니다.

예를 들어, C 언어로 작성된 코드를 컴파일하면 실행 가능한 파일(예: .exe)이 만들어집니다.
문법 오류나 타입 오류 같은 문제가 있으면 컴파일러가 이를 잡아내고 에러 메시지를 출력합니다.

빌드 (Build)

빌드는 컴파일을 포함한 더 큰 프로세스를 의미합니다. 소프트웨어를 실행하거나 배포할 수 있는 상태로 만드는 전체 작업을 빌드라고 부릅니다. 빌드 과정에는 보통 이런 단계들이 포함되며 단순히 코드를 번역하는 것뿐만 아니라, 프로젝트 전체를 준비하는 과정이라고 볼 수 있습니다.

1.컴파일 : 소스 코드를 기계어로 변환.
2.링킹(Linking) : 여러 소스 파일이나 라이브러리를 하나로 연결.
3.테스트 : 자동화된 테스트 실행 (경우에 따라).
4.패키징 : 실행 파일이나 배포 가능한 파일(예: .jar, .apk) 생성.

요약해보자면

컴파일: 코드 번역 과정 (부분).
빌드: 컴파일 + 추가 작업까지 포함한 전체 준비 과정.

리액트 빌드(Build)도구

리액트(React)에서 주로 사용되는 빌드 도구들은 프론트엔드 개발에서 코드 번들링, 트랜스파일링, 최적화 등을 담당하며, 개발 경험과 배포 효율성을 높여줍니다. 아래에 리액트 프로젝트에서 많이 사용되는 대표적인 빌드 도구들을 설명 하겠습니다.

웹팩(Webpack)

웹팩은 프로젝트의 구조를 분석하여 자바스크립트 모듈을 비롯한 관련 리소스(예: CSS, 이미지, 폰트 등)를 찾아내고, 이를 브라우저에서 실행할 수 있는 하나의 번들(Bundle)로 묶고 패킹하는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란, 개발 과정에서 여러 개로 나뉘어 있는 파일들(모듈들)을 하나로 통합해 주는 도구이자 라이브러리로, 이를 통해 코드의 의존성을 관리하고 효율적으로 배포할 수 있게 도와줍니다.

예를 들어, 웹페이지를 구성하기 위해 자바스크립트, 스타일시트, 이미지 등 수많은 파일이 필요할 때, 브라우저가 이 파일들을 서버에 개별적으로 요청하면 로딩 시간이 길어지고 성능이 저하될 수 있습니다. 웹팩은 이런 문제를 해결하기 위해 모든 리소스를 하나의 파일(또는 필요에 따라 몇 개의 파일)로 압축하고 최적화합니다. 이렇게 번들링된 결과물은 요청 횟수를 줄이고, 코드 크기를 최소화하며, 브라우저에서 더 빠르게 실행될 수 있도록 만듭니다.

의존성 관리 : 웹팩은 프로젝트 내 모듈 간의 의존성을 파악합니다. 예를 들어, import나 require로 연결된 파일들을 추적해 필요한 코드만 포함시키고, 사용되지 않는 코드는 제외(트리 쉐이킹)할 수 있습니다.
로더(Loader) : 자바스크립트 외에도 CSS(css-loader), 이미지(file-loader), TypeScript(ts-loader) 등 다양한 파일 형식을 처리할 수 있게 해주는 확장 기능이 있습니다.
플러그인(Plugins) : 번들링 과정에서 추가 작업을 수행할 수 있도록 지원합니다. 예를 들어, HtmlWebpackPlugin은 HTML 파일을 자동 생성하고, UglifyJsPlugin은 코드를 압축합니다.
개발 편의성 : webpack-dev-server를 통해 실시간으로 코드 변경을 반영하는 핫 리로딩(Hot Reloading)을 제공해 개발 속도를 높여줍니다.
최적화 : 프로덕션 환경에서는 코드 분할(Code Splitting)을 통해 필요한 부분만 로드하거나, 캐싱을 활용해 성능을 개선할 수 있습니다.

리액트 프로젝트에서 웹팩은 JSX를 일반 자바스크립트로 변환(Babel과 함께 사용)하고, 컴포넌트와 스타일, 기타 자원을 하나로 묶어 배포 가능한 형태로 만드는 데 자주 사용됩니다. 특히 Create React App은 웹팩을 기반으로 설정이 미리 되어 있어, 개발자가 직접 설정하지 않아도 바로 사용할 수 있게 해줍니다. 결론적으로, 웹팩은 단순히 파일을 묶는 것을 넘어, 현대 웹 개발에서 필수적인 코드 최적화와 성능 개선을 담당하는 강력한 도구입니다. 다만, 설정이 복잡할 수 있다는 단점 때문에 최근에는 Vite나 Parcel 같은 대안도 주목받고 있죠.

바벨(Babel)

바벨은 모든 실행 환경에서 자바스크립트가 정상적으로 동작할 수 있도록 해주는 자바스크립트 컴파일러(Transpiler)입니다.

주로 최신 자바스크립트 문법(예: ES6/ES2015 이상)을 구형 브라우저에서도 실행 가능한 ES5 코드로 변환해 주는 역할을 합니다.
리액트의 JSX나 TypeScript(TS)와 같은 특수 문법을 일반 자바스크립트로 변환하며,
특정 브라우저에서 지원되지 않는 최신 기능을 사용할 수 있게끔 코드를 재구성해 줍니다.

트랜스파일링(Transpiling)의 의미

바벨은 엄밀히 말해 "컴파일러"라기보다는 "트랜스파일러"로 불립니다. 이는 소스 코드를 다른 언어로 바꾸는 대신, 같은 자바스크립트 언어 내에서 최신 문법을 구형 문법으로 변환하는 과정을 뜻하기 때문입니다. 예를 들어, const나 화살표 함수(=>) 같은 ES6 문법을 ES5의 var와 일반 함수로 바꿔줍니다.

ES6+ 변환: let, const, async/await, 모듈(import/export) 등 최신 자바스크립트 기능을 구형 환경에 맞게 변환.
JSX 지원: 리액트에서 사용하는 JSX 문법(예:
Hello
)을 React.createElement() 같은 자바스크립트 코드로 변환.
TypeScript 지원: .ts나 .tsx 파일을 자바스크립트로 변환하며, 타입 체크는 별도로 TypeScript 컴파일러(tsc)에 맡김.
폴리필(Polyfill): 바벨 자체는 문법만 변환하지만, @babel/polyfill이나 core-js와 함께 사용하면 Promise, Array.includes 같은 최신 API도 구형 브라우저에서 동작하게 추가 가능.

작동 방식

파싱(Parsing): 소스 코드를 읽어 추상 구문 트리(AST)로 변환.
변환(Transforming): 플러그인과 프리셋(Preset)을 통해 AST를 수정(예: ES6 → ES5).
생성(Generating): 수정된 AST를 기반으로 최종 자바스크립트 코드를 출력.

플러그인과 프리셋

바벨은 모듈화된 구조로, 특정 변환 작업을 플러그인(예: @babel/plugin-transform-arrow-functions)으로 추가할 수 있습니다.
프리셋은 여러 플러그인을 묶은 세트로, @babel/preset-env는 타겟 브라우저에 맞춰 필요한 변환만 적용해 효율성을 높여줍니다. 리액트용으로는 @babel/preset-react가 JSX 처리를 담당합니다.

리액트 개발에서 바벨은 필수적입니다. JSX를 브라우저가 이해할 수 있는 코드로 바꿔주고, 최신 자바스크립트 기능을 사용하면서도 다양한 브라우저 호환성을 보장해 줍니다. Create React App이나 Vite 같은 도구는 바벨을 기본으로 내장하고 있어 설정 없이도 바로 사용 가능합니다.
결론적으로, 바벨은 자바스크립트 개발에서 "호환성의 다리" 역할을 하며, 특히 리액트처럼 최신 기술을 사용하는 환경에서 없어서는 안 될 도구입니다. 웹팩이나 Vite 같은 빌드 도구와 함께 사용되며, 개발자가 최신 기능을 자유롭게 쓰면서도 모든 사용자를 지원할 수 있게 해줍니다.