[REACT] Babel ? webpack?

create-react-app에 기본적으로 들어있는  babel, webpack .. 

가끔 종종 웹페이지 구성시 봤던것들인데  한번알아보기로했다.

깊은 이해보다는 어떤 역할을 하는지 대해 알아보자!

 

 

Babel

공홈에는 간단하게 Babel is a Javascript complier 라고 적혀있다.

Babel의 역할은 transpiling 이다

즉 상위버전의 js 코드로 작성된 문법을 하위 버전의 js 코드 문법으로 바꿔준다.

예를들면 ES6 ,ES7. ... 등으로 작성된 js코드를 -> ES5 로 바꿔준다.

 

왜 이런 transpiling 이 필요할까..?

js 경우 매년 새로운 js 버전들이 나온다 .

이렇게 js 가 매우 빠르게 꾸준히 발전하는것에 반해 브라우저가 그것을 전부 다 지원하지 못하는 경우가 존재한다.

즉, 개발자가 어떤 js 버전을 사용하더라고 Babel이 중간에서 호환성을 신경써주기 때문에 개발자는 코드 버전에  대해 신경쓸필요가 없어진다.

결론

== 웹개발 코드와 브라우저의 호환성을위해 Babel 을 사용한다.!

 

Babel Preset

 

babel-preset-es2015 : = > ES6

babel-preset-es2016 : = > ES7

babel-preset-es2017 : = > ES8

 

babel-preset-env

- 디폴트로 동작으로 ES6 이상의 preset을 적용하여 , ES5 로 transpiling 해준다.!

babel-preset-env 을 쓰는이유는 거의 대부분의 브라우저들이 ES5 지원하기 떄문이다 !

 

 

Webpack

 

js, jsx, css ,less ,es6, 이미지, html , 폰트등 ... 거의 모든것이 모듈이 될수있으며 , 하나의 파일(bundle) 로 묶을수있다.

== 모듈성과 네트워크 성능향상

 

모듈들(js,css,less ....)   = > 엔트리파일  = = = == > 번들파일 (bundle)

 

 웹팩은 프로젝트 전체를 한 단위로 분석한다. 즉, 지정한 메인 파일에서 시작해 자바스크립트의 require(webpack commonJS 모듈 지원)과 import(ES6)문을 참고해 프로젝트의 모든 의존성을 조사하고 로더를 이용해 처리한 후 번들로 묶은 자바스크립트 파일을 생성한다.

 

효과

-코드를 필요할떄 로딩가능

-파일크기 줄일수있음. , 네트워크 비용감소

- HMP(Hot Modle Replacement) : 개발모드에서 원본 소스코드 변경을 감지하여 ,변경된 모듈만 즉시 갱신.