요즘 구인구직 사이트를 찾아보며 웹팩이나 바벨에 대해서 자격요건에 지식이나 사용해봤는지 물어보는 글들이 많아서 한 번 정리를 해보았다. 내가 공부할 때는 CRA(create-react-app)을 통해서 개발환경을 구축했는데, 원래 웹팩과 바벨은 리액트로 개발할 때 함께 따라온다고 한다.
웹팩(Webpack)
의존성을 분석해서 모듈들을 하나로 묶어주는(번들시켜주는) 역할을 한다. 프로젝트를 진행하면 여러가지 라이브러리들을 설치하게되는데 npm install 혹은 yarn install을 진행해보면 node_modules 폴더에 많은 양의 모듈들이 설치되는 모습을 볼 수가 있다. 웹팩은 이런 여러 개의 모듈들을 프로젝트 build를 진행할 때 하나의 파일로 만들어주는 역할을 한다.
바벨(Babel)
바벨은 웹팩과 대립적인 관계에 있는 것이 아닌 함께 사용하면 좋은 관계에 있는 것으로 일종의 코드 변환기이다. 개발자는 코드를 작성할 때 최신 기술과 기능을 적용해서 유저들에게 더 좋고, 더 빠른 기능들을 제공하기 위해서 최신화된 문법으로 코드를 작성한다. 하지만 이를 사용하게되는 유저들의 입장에서는 그들의 환경이 항상 최신화된 브라우저에서만 사용될 것이라고 기대하기는 어렵다.
만약에 구버전의 브라우저 등에서 실행하는 유저들의 입장까지 모두 고려해서 코드를 작성한다면 같은 기능을 제공하기 위해서 더욱 더 복잡한 코드가 작성되어 유지보수 측면에서 매우 좋지않은 코드가 나올 것이고, 혹은 최신의 기능을 제공하지 못하는 경우가 발생할 수도 있다.
이런 유저들까지도 모두 고려하기 위해서 나온 것이 바로 바벨(Babel)이다. 바벨은 개발자들이 최신 자바스크립트 문법에 따라서 작성된 코드들을 다양한 브라우저, 다양한 버전에서 실행할 수 있도록 코드 자체를 변환시켜주는 역할을 한다.
