✍️ Webpack이 모야?

웹팩은 자바스크립트 모듈 번들러의 한 종류이며 라이브러리의 형태입니다. 일반적으로 어떤 웹어플리케이션의 코드의 수가 많아지면 보통 협업 및 유지보수 등의 이유로 코드를 분할하여 관리합니다.
이렇게 되면 웹 어플리케이션에서 수 많은 자바스크립트 파일을 로딩하게 되고 이는 네트워크 비용을 증가시키게 됩니다. 따라서 자바스크립트 파일들을 모듈화 시켜서 관리하게 해주는 라이브러리가 웹팩입니다. 웹팩을 정적(static) 모듈 번들러라고 하는데 잠시 후에 이에 대해 더 알아보겠습니다.
webpack의 기본적인 개념으로는 자바스크립트 코드들을 모듈화하여 분할된 코드를 하나의 index를 통해 실행하게 하며 그 index로 다른 파일들을 모아주는 역할을 웹팩이 한다고 생각하시면 됩니다. 이렇게 웹팩과 비슷한 역할을 하는 모듈 번들러는 웹팩 이외에도 parcel, gulp, rollup, fusebox 등이 있습니다.

웹팩(Webpack)은 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는)시켜주는 역할을 한다. 프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build)라는 과정을 통해 하나의 파일로 짠!하고 만들어 준다.

✍️ Barbel이 모야?

바벨(Babel)은 코드 변환기다. 세상 사람들은 정말 다양한 종류의 버전의 브라우저를 사용하고 있다. 이건 누가 일괄 업데이트한다고 해결되는 문제도 아니라서 어떤 특정 버전을 딱 맞추기 어렵다. 대부분의 업체에서 최신 버전의 브라우저를 권장하지만 생각보다 이런 일에 관심없는 사람도 많고, 일례로 쇼핑몰과 같이 사람들이 온라인에서 돈을 쓰면서 매출을 올리는 회사들은 구형 브라우저를 쓰는 사람들을 그냥 무시하고 서비스 개발을 진행할수가 없다. 최대한 그 사람들이 불편없이 돈을 쓰고 가도록 만들어 줘야 한다. 하지만 개발자들은 어떤가. 수 십년 지난 브라우저에서만 도는 기능을 위해 지저분한 코드를 작성해야 하거나 최신 기능을 포기해야 하는 일까지 생긴다. 코드가 복잡해지니 당연히 유지보수는 어려워진다. 이런 이유로 개발자들은 최신의 코드를 쓰면서 최대한 많은 사람들이 사용하는데 불편함없이 만들어 주는게 바벨이다. 바벨은 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환시킨다.