[기술면접] Webpack & Babel

💻  웹팩(Webpack)

모듈 번들러로 웹 어플리케이션을 개발할 때 사용하는 다양한 자원들(JavaScript, CSS, Img files etc)을 하나의 번들(Bundle)로 묶어주는 도구로, 웹팩을 사용하면 코드의 의존성 관리와 성능 최적화를 쉽게 할 수 있다.

---

⁉️ 웹팩을 사용하는 이유

- 모듈화와 의존성 관리
- 번들링
- 파일 크기 최적화
- 코드 스플리팅
- 개발 편의 기능

 

1. 모듈화와 의존성

• 웹팩은 각각의 파일을 모듈로 취급하고, 파일 간의 의존성을 분석하여 하나의 번들 파일로 묶어준다.
• 이렇게 하면 개별 파일 간의 종속성을 명확하게 관리할 수 있고, 모든 코드가 하나의 파일에 담기므로 브라우저 요청 회수가 줄어든다.

2. 번들링

• 웹팩은 여러 파일을 하나로 묶어 배포할 수 있게한다.
• 번들링된 파일은 불필요한 요청 수를 줄여 어플리케이션 로딩 속도를 개선한다.
• 이 과정에서 JavaScript 뿐만 아니라 CSS, Image, Font 등 다양한 파일 형식도 번들링할 수 있다.

3. 파일 크기 최적화

• 웹팩의 plug-in 과 loader 를 사용해 코드 압축(Minification), 코드 분할(Code Splitting), 이미지 압축 등 최적화 작업을 수행하여 파일 크기를 줄일  수 있다.
• 이를 통해 웹 패이지의 로딩 속도가 개선된다.

4. 코드 스플리팅

• 웹팩은 코드 스플리팅 기능을 통해, 필요한 시점에 필요한 코드만 로드할 수 있다.
• 초기 로딩 시점에 모든 파일을 로드하는 대신, 사용자가 특정 페이지에 접근 했을 때 해당 부분의 코드만 로딩하여 시간을 단축한다.

5. 개발 편의 기능

• 웹팩은 개발서버를 제공하여 코드 변경 사항을 자동으로 반영한다.
• Hot Module Replacement 기능을 통해 어플리케이션을 새로고침하지 않고도 코드 변경 내용을 실시간으로 확인할 수 있다.

---

💻  바벨(Babel)

최신 JavaScript 코드를 구형 브라우저에서도 호환되도록 변환해주는 JavaScript Compiler 이다.

주로 최신 문법을 구형 브라우저에서 호환되는 버전으로 변환(Transpile) 하거나, React.Js의 JSX 문법을 일반 JavaScript 로 변환할 때 사용한다.

---

⁉️ 바벨을 사용하는 이유

- 호환성 확보
- JSX 문법 지원
- 최신 JavaScript 기능 도입

1. 호환성 확보

• 최신 JavaScript(ES6+ 및 이후의 ECMAScript 표준) 문법은 많은 기능 개선을 포함하나 오래된 브라우저에서는 지원되지 않는 경우가 많다.
• 바벨(Babel) 은 이 최신 문법을 구형 브라우저에서 호환가능한 코드로 변환해 주어 호환성 문제를 해결한다.

2. JSX 문법 지원

• React.Js 와 같은 라이브러리에서는 HTML 과 유사한 JSX 문법을 사용한다.
• 바벨(Babel) 은 JSX를 표준 JavaScript 로 변환해 주어 브라우저가 이를 해석하고 실행할 수 있게 해준다.

3. 최신 JavaScript 기능 도입

• 비동기 함수(async / await) 나 Promise 등 과 같은 ES6+ 의 최신 JavaScript 기능이 구형 브라우저에서 실행되지 않을 수 있다.
• 바벨(Babel) 은 이러한 기능을 폴리필(Polyfill) 을 통해 지원할 수 있도록 한다.