지난번 Node.js 와 NPM 정리에 이어서 웹팩과 바벨이 무엇인지에 대해서 내용정리를 해보고자 한다. 맨날 구글링 해서 찾아봐도 볼때만 이해하고 뒤로가면 계속 헷갈려하니까 차라리 정리하면서 익히기로..
웹팩이란?
웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)로 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.
모듈
웹 애플리케이션을 구성하는 모든 자원( HTML, CSS, Javascript, Images, Font)등을 의미하며 쉽게 말하면 해당 파일의 하나하나가 모듈이다.
모듈 번들링
아래 그림과 같이 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링이라고 한다.
빌드, 번들링, 변환 이 세 단어 모두 같은 의미
그럼 왜 웹팩을 사용할까?
- 파일 단위의 자바스크립트 모듈 관리의 필요성
자바스크립트의 변수 유효 범위는 기본적으로 전역 범위를 갖는다 최대한 넓은 변수 범위를 갖기 때문에 어디에서도 접근하기가 편하지만 이러한 장점이 실제로 웹 애플리케이션을 개발할 때는 아래와 같은 문제로 변할 수 있다.
<!-- index.html -->
<html>
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<script src="./app.js"></script> // getNum() = 10
<script src="./main.js"></script> // getNum() = 20
<script>
getNum(); // 20
</script>
</body>
</html>
// app.js에서 선언한 num 변수는 main.js에서 다시 선언하고 20을 할당하였기 때문에 getNum()은 20이 됨
- 웹 개발 작업 자동화 도구(Web Task Manager)
웹팩의 사용 이전에는 웹 서비스를 개발하고 웹 서버에 배포할 때 아래와 같은 작업들을 해야 했다.
HTML, CSS, JS 압축
이미지 압축
CSS 전처리기 변환
이러한 일들을 자동화 해주는 도구들이 필요했기에 웹팩을 사용한다.
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
웹 사이트의 로딩 속도를 높이기 위해서는 브라우저에서 서버로 요청하는 파일 숫자를 줄여야 한다. 이를 위해 웹 개발 작업 자동화 도구(Web Task Manager)를 이용해 파일들을 압축하고 병합하는 작업들을 진행하는 것이다.
뿐만 아니라 초기 페이지 로딩 속도를 높이기 위해 나중에 필요한 자원들은 나중에 요청하는 레이지 로딩(Lazy Loading)이 등장하였다.
바벨이란?
바벨은 대표적인 트랜스파일러로 트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것이다.
자바스크립트는 다른 언어들과 달리 여러 환경에서 실행된다. 웹 브라우저, NodeJS, Deno 등에서 실행되며 웹 브라우저 또한 각자 다른 자바스크립트 엔진을 통해 자바스크립트 코드를 읽게 된다.
이렇게 실행되는 환경의 버전에도 자바스크립트는 영향을 받는다. 특정 버전 이상에서만 실행되는 코드가 있고 특정 브라우저에서는 실행되지 않는 코드도 있다. 그렇기 때문에 모든 자바스크립트 실행 환경에서 정상적으로 동작할 수 있도록 하려면 바벨이 필요하다.
쉽게 말하자면 최신의 자바스크립트 코드(ES6)를 모든 환경에서 유효한 예전의 자바스크립트 코드(ES5)로 변환해준다.
웹팩에 대한 더 자세한 내용은 하단의 출처로 확인
