[FE면접/CS] 웹팩과 바벨이란?
1. 웹팩(Webpack)
💡 웹팩이란?
웹팩은 여러개 파일을 하나로 합쳐주는 모듈 번들러이다.
모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, 이미지 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.
의존성 있는 .js, css, 이미지 등은 하나의 파일로 번들링을 하기 때문에 별도의 모듈 로더가 필요없고, 여러 .js 파일을 하나로 묶어주기 때문에 HTML에서는 script tag를 여러 개로 로드해야 하는 번거로움을 줄일 수 있다.
웹팩은 의존성을 분석해 모듈을 번들시켜주는 역할을 한다.
웹팩은 크게 5가지 이유때문에 사용된다.
- 모듈화 지원: 코드를 여러 모듈로 나누어 작성, 관리할 수 있음 → 재사용可, 유지보수 용이
- 번들링: 여러 파일을 하나의 파일로 번들링 → 페이지 로딩 속도↑
- 로더(Loader)와 플러그인(Plugin): 자바스크립트 외에도 CSS, 이미지, 폰트 등 다양한 형태의 리소스 처리可
- 코드 최적화: 프로덕션 환경에서 사용될 코드 최적화하고 압축 → 로딩 속도↑, 성능↑
- 생태계: 많은 개발자들이 사용
그렇다면 리액트에서도 웹팩이 사용되는가?
대답은 Yes이다!
리액트 애플리케이션을 생성할 때 CRA(create-react-app)으로 애플리케이션을 쉽고 빠르게 생성한다.
이때, CRA 설치시 웹팩이 포함된다.
다만, 이 파일은 숨겨져 있기에 다음과 같은 방법으로 볼 수 있다.
npm run eject
해당 명령어를 입력하면 숨겨져있던 config와 scripts 폴더가 생긴다
(※주의: 한 번 eject를 하면 이전으로 돌릴 수 없다)
webpack.config.js가 웹팩 설정 파일이며, 이 파일 내부에 웹팩 구성 요소가 담겨있다.
2. 바벨(Bable)
💡바벨이란?
트랜스파일러, 높은 버전의 소스 코드를 다운시켜주는 역할을 한다.
트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것이다.
이를 해주는 것이 트랜스파일러이다.
그렇다면 트랜스파일링이 왜 필요할까?
ES6에서 자바스크립트 표준 문법이 정의되어 있음에도 불구하고, ES6 문법을 구형 브라우저에서 사용하지 못하는 경우가 종종있다.
이때 필요한 것이 트랜스파일러이다. 한 번 컴파일하면 구형 브라우저에서도 동작하는 코드가 나오게 만드는 도구이다.
트랜스파일러로 가장 유명한 것으로는 바벨이 있다.
개발할 때에는 최신 자바스크립트 문법(ES6)을 사용하되, 바벨로 컴파일을 하고 난 후에는 같은 동작을 하면서 구형 브라우저 호환이 되는 자바스크립트 코드(ES5)로 변환되는 (개꿀)좋은 도구이다.
이로 인해 개발자들은 호환성 걱정 없이 생산성 높은 최신 문법을 사용할 수 있다.
[참고]
https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html