7강 바벨과 웹팩 자세히 들여다보기

바벨과 웹팩은 웹 애플리케이션을 제작 할때 없어서는 안되는 기반 기술이 되었습니다

기본적으로 프로젝트를 구축해주는 create-react-app ,next.js , vue-cli , nuxt 등의 툴은 바벨과 웹팩을 기본적으로 포함함

 

제스트(jest) 와 같은 테스트 프레임워크를 도입할때 , 스토리북(storybook) 과 같이 별도의 빌드 과정이 필요할때

서버사이드 렌더링을 위해서 서비측 코드를 빌드해야할때 등 바벨과 웹팩을 이해해야만 하는 순간이 반드시 옴!

 

7.1 바벨 실행 및 설정

바벨과 폴리필의 관계를 이해하지 못하면 오래된 브라우저에서 오류가 발생하는 코드가 만들어질 수 있다.

바벨에서 공식적으로 관리하는 @babel/polyfill 패키지와 @babel/preset-env 프리셋을 통해 관리하는 방법을 알아보자

7.2 바벨을 실행하는 여러가지 방법

@babel/cli 로 실행

웹팩에서 babel-loader 로 실행하기

@babel/core 를 직접 실행하기

@babel/register 로 실행  // 리액트에서 함계 사용되는 경우는 많지 않다

 

바벨이란?

바벨은 입력과 출력이 모두 자바스크립트 코드인 컴파일러다

초기의 바벨은 ES6 코드를 ES5 코드로 변환해주는 컴파일러였다.

현재는 바벨을 이용해서 리액트의 JSX 문법, 타입 스크립트와 같은 정적 타입언어,코드압축, 제안단계에 있는 문법등을 사용함

 

바벨을 실행하기 위해서는 @babel/core 패키지를 필수로 설치해야한다

두개의 플러그인과 프리셋 하나를 추가로 설치함

 

웹팩의 babel-loader 로실행

웹팩을 시용하기 위해 다읍과 같이 추가로 패키지를 설치

 

@babel/core를 직접 이용

이전에 살펴봤던 @babel/cli 와 babel/loader 는 모두 @babel/core 를 이용해서 바벨을 실행한다

 

@babel/cli 또는 babel/loader 를 이용한다면 바벨을 두번 실행해야한다

@babel/core 를 사용하면 바벨을 좀더 효율적으로 실행 할수 있다

바벨은 컴파일 시 다음 세 단계를 거친다

1.파싱단계 :입력도니 코드로 부터 AST(abstract syntax tree) 를 생성

2.변환단계 : AST 를 원하는 형태로 변환함

3.생성단계 : AST를 코드로 출력함

 

AST 코드의 구문이 분석된 결과를 담고 있는 구조체이다

코드가 같다면 AST 도 같기 때문에 같은 코드에 대해서 하나의 AST 를 만들어 놓고 재사용 할 수 있다!