📌 웹팩(Webpack)이란?

이미지 출처 : https://webpack.js.org

웹팩은 번들러이다.
번들러란, 하나의 파일에서 연결하고 있는 무수히 많은 파일들을 하나로 묶어주어 한개의 파일로 새롭게 만드는 프로그램이다.

왜 하나로 만들어 주어야 하나⁉️

파일들이 여러 개로 분산되어 있으면 페이지에 들어갈 때마다 서버는 자바스크립트 파일들과 필요한 파일들을 보낸다.
이렇게 되면 페이지를 보여주기 위해 여러 번 서버와 통신하게 되는데 네트워크 비용이 많이 들기에 비효율적이기 때문이다.

---

📌 바벨(Babel)이란?

이미지 출처 : https://babeljs.io

자바스크립트는 시간이 지남에 따라 점차 변화하고 발전해가고 있다.
하지만, 그만큼 발전한 버전을 따라와주지 못하는 브라우저나 환경이 있기 마련이다.
Babel은 최신 문법을 써도 이전 브라우저 환경에서도 사용할 수 있도록 최신 문법을 특정 예전 버전의 js로 변환해주는 것을 말한다.
즉, 최신 문법을 이전 문법으로 바꿔주는 API인 것이다.

아래에서 babel에 사용하는 4가지 모듈을 알아보자.

• @babel/core : 말 그대로 바벨의 코어, 핵심 요소들이 들어가 있는 모듈
• @babel/cli : 명령어를 통해 cmd에서 바벨을 직접 control할 수 있게 해준다.
• @babel/preset-env : 바벨의 설정을 일일이 할 필요 없이 가장 일반적인 대표 설정들을 모은 플러그인 세트
• @babel/preset-react : 바벨을 JSX 문법에도 사용 가능하게 해주는 모듈

Babel을 사용하면 ES6 이상의 최신 문법으로 작성한 js 코드를 ES5 이하의 예전 문법으로 작성한 것 처럼 소스 코드 내의 문법을 변경할 수 있다.
이렇게 Babel을 통해 문법이 바뀐 소스 코드는 최신 문법을 지원하는 실행 환경 뿐만 아니라, 아직 최신 문법이 적용되지 않은 실행 환경에서도 문제없이 작동하게 된다.

❗️Babel 사용 예시

[0, 1, 2].map((n) => n + 1);

위의 코드는 ES6에서 도입된 화살표 함수(arrow function) 문법을 사용하여 작성한 코드이다.
하지만, 만약 이 코드가 돌아가는 브라우저에서 ES6 문법을 지원하지 않는다면 에러가 발생할 수 있다.

아래의 babel을 사용하여 function 문법으로 변경된 코드를 보자.

[0, 1, 2].map(function(n) {
	return n + 1;
});    

우리는 babel을 통해 최신 ES6 문법 등 최신 사양을 사용하며 편리하게 코딩하고, 결과물을 구형 브라우저에서도 작동되게끔 변환해줄 수 있다.

이상, 웹팩과 바벨에 대해 간단히 알아보았다.