📖 Reference
: copilot 선생님

---

🤔 WebPack이란 뭘까?

WebPack은 모듈 번들러(Module Bundler) 입니다. WebPack은 여러 개의 파일을 하나의 파일로 합쳐주는 역할을 수행합니다. 이를 통해 웹 애플리케이션에서 필요한 모든 리소스를 하나의 번들로 관리할 수 있습니다.

💡 모듈 번들러(Module Bundler)란?

: 여러 개의 JS 파일을 하나의 번들 파일로 결합하고, 필요한 모듈들을 로드할 수 있도록 해주는 도구입니다. 모듈 번들러는 웹 애플리케이션을 구성하는 자원(HTML, CSS, JS, 이미지 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 도출해내는 도구입니다.

→ 중복된 이름으로 인한 충돌을 방지, 파일 전송 속도 문제 해결 가능.

---

💡 WebPack을 사용하는 이유와 특징은?

1. 모듈화

: Webpack은 표준화된 모듈화 기법이 등장한 ES2015부터 사용됩니다. 그 이전에는 스크립트 태그를 사용하여 외부 스크립트 파일을 가져왔지만, Webpack을 사용하면 import/export 구문을 통해 모듈을 관리할 수 있습니다.

2. 스코프 분리

: Webpack은 각 모듈을 독립적인 실행 영역으로 분리하여 스코프(쉽게 설명하면, 전역 변수 혹은 지역변수와 같이 변수가 유효한 범위를 의미한다.) 문제를 해결합니다. 이로 인해 다양한 변수 충돌을 방지하고 의존성 관리도 편리하게 할 수 있습니다.

3. 번들링

: Webpack은 시작점(Entry point)으로부터 의존적인 모듈을 찾아 하나의 번들 파일로 만듭니다. 이러한 결과물을 Output이라고 합니다.

4. 설치 및 사용

: Webpack은 npm을 통해 설치할 수 있으며 CLI를 사용하여 커맨드라인에서 실행할 수 있습니다.

---

💻 Webpack 예제

// test.js
export function sum(x, y){
	return x + y;
}

// app.js
import * as test from "./test.js";
console.log(test.sum(1, 2));

Webpack은 위와 같은 모듈화를 더 효율적으로 관리하고 번들링할 수 있습니다. 웹팩을 사용하면 프론트엔드 개발에서 모듈 관리를 편리하게 할 수 있습니다.

---

🤔 Babel이란 뭘까?

Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ (ES6 이상) 코드를 이전 버전의 JavaScript로 변환하는 데 주로 사용되는 툴체인입니다.

Babel은 JS 개발자들이 항상 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 도구입니다. Babel을 사용하면 ES6 이상의 최신 문법으로 작성한 코드를 ES5 이하의 예전 문법으로 작성한 것처럼 소스 코드 내의 형태를 변경할 수 있습니다.

→ 위와 같이 형태가 바뀐 코드는 최신 문법을 지원하는 실행 환경 뿐만 아니라 아직 최신 문들이 적용되지 않은 실행 환경에서도 문제없이 작동합니다.

---

💡 Babel의 특징은?

1. 모든 브라우저와 환경에서의 호환성

: Babel은 ES6 이상의 문법을 지원하지 않는 환경에서도 코드를 실행할 수 있도록 변환합니다.

2. TypeScript와 JSX 지원

: Babel은 ES6 이상의 최신 문법 뿐만 아니라 TypeScript나 React의 JSX로 작성된 코드를 JavaScript로 변환할 수 있습니다.

3. 플러그인와 프리셋

: Babel은 플러그인과 프리셋을 통해 문법 변환 규칙을 설정할 수 있습니다. 이를 통해 프로젝트별 원하는 규칙을 적용하거나 다양한 규칙을 한 번에 적용할 수 있습니다.

---

💻 Babel의 사용 방법

1. 프로젝트에 @babel/core , @babel/cli 패키지를 개발 의존성으로 설치합니다.

2. 전체 설정파일(project-wide)은 아래와 같이 설정합니다.

   • babel.config.js 파일을 프로젝트 루트 디렉터리에 생성합니다.
   • 그 후 아래와 같이 설정합니다.

   // babel.config.js
   const presets = ['@babel/preset-react'];
   const plugins = [
   	['@babel/plugin-transform-template-literals', { loose : true }]
   ];
   
   module.exports = { presets, plugins };
   // 해당 설정은 리액트 프리셋을 사용하며, 템플릿 리터럴 플러그인에 loose 옵션을 넣었습니다.

3. 지역 설정파일(file-relative)은 아래와 같이 설정합니다.

   • .babelrc 파일을 프로젝트 내 해당 파일을 컴파일할 코드와 동일한 경로에 생성합니다.
   • 그 후 아래와 같이 설정합니다.

   // .babelrc
   {
   	"plugins" : [
   			"@babel/plugin-transform-arrow-functions",
   			"@babel/plugin-transform-template-literals"
   	]
   }
   // 지역 설정 파일은 플러그인에 대해서만 설정하며, 동일한 경로에 있는 코드 파일에 적용됩니다.

4. 컴파일

   • Babel을 실행하여 코드를 변환합니다.
   • 예로, 아래와 같이 코드를 컴파일할 수 있습니다. 💡 src 폴더의 코드를 dist 폴더로 컴파일하는 코드입니다.
     

   npx babel src --out-dir dist

지역 설정파일은 전체 설정 파일을 덮어씌우는 방식으로 작동하며, 동일한 플러그인이나 프리셋에 대한 설정이 있다면 지역 설정파일이 우선됩니다. 이와 같이 설정 파일을 유연하게 활용하여 Babel을 사용합니다.