사전지식
웹 개발을 진행하다 보면 브라우저의 호완성과 자신이 쓴 코드를 비교를 할 수밖에 없게 된다.
예를들어, 모듈 시스템인 ESM은 ES6부터 지원이 가능하다. 대부분의 모던 브라우저는 이를 지원하지만 구식 IE와 같은 환경에서는 해당 시스템이 지원이 되질 않는다. 그렇다고 이 환경을 지원하는 방향으로 모든 코드를 일일이 수정할 수는 없는 법이다.
이를 해결하기 위해 나온 것이 이른바 트랜스파일러라고 불리우는 babel이다.
babel
babel은 위에서 언급한, 우리의 최신 디센트 어썸한 코드를 하위버전으로 알아서 변환해주는 트랜스파일러다
트랜스파일러라는 이름처럼,
이 babel의 패키지 구조는 크게 이러하다
| 이름 | 기능 |
|---|---|
| @babel/core | 말그대로 코어다. babel의 기본구조를 가지고 있다 |
| @babel/cli | 이 바벨 코어를 cli 명령어로 조작하기 위한 패키지다 |
| @babel/preset-env | 자동으로 환경을 인식해서 어떤 플러그인이 필요한지 말해준다(세부적으로 컨트롤하려면 .browserlistrc 파일에서 정의) |
webpack
개발을 하다 보면, 필연적으로 Import와 export가 남발되게 되는데, 그렇다는 의미는 파일이 많아진다는 뜻이고, 파일이 많아지면 불필요하게 사용되야 하는 메모리의 양도 늘어난다는 소리다.
이 불필요한 공간을 효율적으로 압축하여 경량화를 도와주는 패키지가 바로 웹팩이다.
중요한것은, 서로의 의존성을 파악해서 하나의 파일에 압축한다는 개념이 중요하다.
웹팩의 구조는 또한 이러하다
| 이름 | 기능 |
|---|---|
| @webpack/core | 말그대로 코어다. babel의 기본 스트럭쳐를 가지고 있다 |
| @webpack/cli | 이 webpack 코어를 cli 명령어로 조작하기 위한 패키지다 |
| babel-loader | 웹팩은 옵션으로 여러가지 파일들을 어떻게 압축할것인지에 대한 config들을 설정할 수 있는데, 이 중에서 특히나 파일을 압축할 때에 자동으로 babel을 통해 파일들의 코드를 다운그레이드하면서 압축할 수 있도록 하는 패키지이다 |
자라나라 프론트엔드 개발새싹!