리액트 공부를 다시 시작함,, 그래서 기초부터 다시 시작하는데 망할 은수기지배는 기본을 잘 알지 못하지,, 그래서 처음부터 다시 공부하기로 함.
오늘의 공부 주제는 트랜스파일러 바벨
중점적으로 공부할 부분
1. 바벨과 트랜스파일러
2. 바벨을 리액트에서 사용하는 이유
3. 작동원리
내가 알고있는 바벨은 트랜스 파일러로 자바스트립트 새로운 문법(ES6이상)을 사용하는 프레임워크/ 라이브러리를 자바스크립트 신 문법을 지원하지 않는 브라우저에서 사용하기 위해 사용하는 트랜스 컴파일러이다. 리액트에서 바벨을 사용하는 이유는 , 리액트는 JSX컴포넌트는 Root에 그려주는 JS기반 프레임워크이다. 불변성을 유지해야 하는게 리액트의 특징인데, 리액트에서 데이터를 관리하거나 ( 전화번호부를 만들때 삭제하기 위해 데이터 배열을 삭제하고 다시 만드는데, 이때 Arr.filter로 배열을 새로 만듬.) 코드를 작성할 때 array ES6문법인 filter,map,replace 문법을 사용하며, 리액트에서 사용하는 여러 라이브러리들 또한 ES6기반으로 작성된 코드이므로 트랜스파일러를 사용해 브라우저에 그려줘야 한다.
그럼,,, 어디 한번,, 내가 생각한 것이 맞는지,, 확인 해볼까,,,
바벨은 무엇입니까? (feat.공홈)
바벨은 자바스크립트 컴파일러이며, 현재, 이전의 브라우저 또는 환경에서 ES6코드를 이전버전의 자바스크립트로 변환하는데 주로 사용되는 도구체인이다.
바벨이 하는 일
1. 변환구문
2. 대상 환경에서 누락된 폴리필 기능
3. 소스코드 변환
*폴리필이란??
새로운 문법을 사용해 코드를 작성하면 트랜스파일러는 이를 구 표준을 준수하는 코드로 변경해줍니다. 반면, 새롭게 표준에 추가된 함수는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용할 수 있습니다. 자바스크립트는 매우 동적인 언어라서 원하기만 하면 어떤 함수라도 스크립트에 추가할 수 있습니다. 물론 기존 함수를 수정하는 것도 가능합니다. 개발자는 스크립트에 새로운 함수를 추가하거나 수정해서 스크립트가 최신 표준을 준수 할 수 있게 작업할 수 있습니다.
이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 "폴리필(polyfill)"이라 부릅니다. 폴리필(polyfill)은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는(fill in) 역할을 합니다.
https://ko.javascript.info/polyfills 자바스크립트 INFO
const arr= [1,2,3];
const test1= arr.filter(n => n !==2 )
const test2 = arr.filter(function(n){
return n !==2
})
console.log(test1) => [1,3]
console.log(test2) => [1,3]바벨 시작하기
npm install --save-dev @babel/core @babel/cli @babel/preset-env1. @babel/core
-> babel의 핵심기능 모듈.
2. @babel/cli
-> 터미널에서 babel을 사용할 수 있게 해주는 도구.
./node_modules/.bin/babel src --out-dir lib
--out-dir위 의 옵션을 사용했는데, cli 도구를 실행하였기 때문에 가능한거임.3. @babel/plugin
npm install --save-dev @babel/plugin-transform-arrow-functions
플러그인 -에 해당하는 자바스크립트 문법들을 변환해줌.4. @babel/preset-env
-> 필요한 플러그인 조합을 공유
-> 구성이 없으면 이 사전 설정에는 최신 JavaScript(ES2015, ES2016 등)를 지원하는 모든 플러그인이 포함
++ -g / --save-dev
--save-dev 옵션으로 설치하는 이유는 하나의 컴퓨터에 존재하는 다른 프로젝트들이 각각 다른 버전의 babel에 의존성을 갖고 있을 수 있습니다. --save-dev 옵션을 통해서 이를 해결할 수 있습니다.
결론
1.바벨과 트랜스파일러
- 바벨은 ES6이상의 문법을 ES5문법을 변환해주거나(es6->es5) 현재 브라우저에는 없는 새로운 문법을 추가해주는(es5기준) 트랜스 파일러이며, 브라우저 환경에서 안전하게 자바스크립트를 사용하게 위해 사용된다.
- 트랜스파일러란 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른언어로 변환하는 것을 의미한다. 컴파일은 한 언어로 작성된 코드를 다른 언어로 변환하는 것인데, 트랜스파일러와 컴파일은 이 부분에서 다르다.
ex. Compiler
Java -> bytecode
c -> assembly
ex. Transpiler
es6 코드 -> es5 코드로 변환하는 경우
c++ -> c - 트랜스파일러
babel https://babeljs.io/
구글 트레이서, 터미 등등
2. 리액트에서 바벨을 사용하는 이유
React는 일반적으로 JSX라는 특수한 문법을 사용하여 코딩을 하기 때문에 개발자가 작성한 원본 코드는 브라우저에서 제대로 실행이 되지 않는다. 따라서 보통 Webpack 번들러와 Babel 로더를 이용하여 React 프로젝트를 빌드함.
3. 작동원리
npm install -D @babel/core @babel/clinpm을 통해 설치하면 node_modules 디렉토리가 생기고, 이 디렉토리 안에 @babel/core cli 등 바벨 플러그인과 같은 모듈들이 저장됨. 이 모듈들로 코드를 변환해 주는 거임. (ex. plugin-arrow-function 등등 플러그인에는 코드를 변환해주는 세부적인 ES6문법들이 많이 들어가 있음.)
npm install -D @babel/preset-envpreset-env를 설치하면 플러그인 조합을 사전설정, 공유 할 수 있으며, 세부적인 긴 코드를 간결하게 만들어 준다. preset을 install하고 .babelrc 혹은 babel.config.js 파일을 만들어 플러그인을 관리해주면 변환된 코드로 브라우저에 나타난다.
