[리액트] 바벨과 웹팩

 - 바벨이란?

 

🍀자바스크립트 컴파일러

바벨은 입력과 출력이 모두 자바스크립트 코드인 컴파일러다. 초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 일만 했지만, 현재는 리액트의 JSX 문법, 타입스크립트, 코드 압축, Proposal 까지 처리

 

🍀 왜 필요할까?

자바스크립트가 실행되는 환경은 웹 브라우저, NodeJS, Deno 등 다양하게 실행되고, 웹 브라우저 또한 각자 다른 자바스크립트 엔진을 통해 코드를 읽는다. 환경 버전에도 JS는 영향을 받는다(특정 버전 이상에만 실행되는 코드, 특정 브라우저에는 실행되지 않는 코드 등 → 인터넷 익스플로러는 프라미스를 이해하지 못한다!!)

 

🍀 리액트에서는 왜 써야하나?

브라우저에서 JSX문법을 읽을 수 없기 때문에 필요하다!

 

즉, 모든 실행 환경에서 정상적으로 동작할 수 있도록 하려면 바벨이 필요하다

 

설치명령어

 yarn add --dev @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

 

• @babel/core : 바벨 코어 = 핵심 기능들을 포함
• @babel/preset-env: ES6 코드를 ES5로 트랜스파일링
• @babel/preset-react : 리액트 jsx파일을 트랜스파일링하기 위해 필요
• @babel/plugin-proposal-class-properties : 특정 플러그인 설치(옵셔널 체이닝, 애로우 펑션 등)

 

---

- 웹팩이란?

 

🍀 모듈 번들러란?

여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리! 모듈 번들러 라이브러리에는 웹팩, Parcel 등이 있다. 웹 애플리케이션을 구성하는 자원(HTML, CSS, JS,Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 하나의 병합된 결과물을 만드는 도구이다.

 🌈 모듈: 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위 (HTML, CSS, JS 등 모든 파일을 모듈이라 한다)

 

🍀모듈 번들러가 왜 필요할까?

웹 페이지는 페이지를 보여주기 위한 수많은 자바스크립트 파일을 서버에 요청하는데, 페이지마다 서버와 여러번 통신하는것은 비효율적! 이를 해결하기위해 최신 JS에서 모듈 개념이 생김! 여러개의 JS파일을 하나의 파일로 묶어서 한번에 요청 가능, 코드를 압축하고 최적화하고, 서버로 요청하는 파일 숫자를 줄여 로딩 속도가 효율적이다.

 

🍀웹팩이란?

프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 사용할 수 있는 번들로 묶고 패킹하는 모듈 번들러(Module bundler)다.

 

 

설치명령어

 yarn add --dev @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

 

• @babel/core : 바벨 코어 = 핵심 기능들을 포함
• @babel/preset-env: ES6 코드를 ES5로 트랜스파일링
• @babel/preset-react : 리액트 jsx파일을 트랜스파일링하기 위해 필요
• @babel/plugin-proposal-class-properties : 특정 플러그인 설치(옵셔널 체이닝, 애로우 펑션 등)