프론트엔드 개발환경6 바벨 개념 및 사용법 바벨 바벨은 크로스브라우징의 혼란을 해결해 준다. 특히 ECMAScript2015+ 로 작성한 코드를 모든 브라우저에서 동작하도록 호환성을 지켜준다. 여기에는 타입스크립트나, 리액트에서 주로 사용하는 JSX처럼 다른 언어로 분류되는 것도 포함된다. 바벨의 설치는 npm install @babel/core @babel/cli 명령어로 설치한다. (@babel/cli는 바벨 명령어를 터미널에서 실행하게 해 준다.) 바벨은 총 3단계로 빌드를 진행한다. 파싱 : 코드를 AST(Abstract Syntax Tree)로 변환하는 단계이다. AST는 간단하게 말하면 코드의 프로그램을 나타내는 Node 트리 라고 할 수 있다. 변환 : AST를 변경하는 것이 변환 단계이다. 출력 : 변환된 결과물을 출력하는 단계이다.. 2021. 1. 7. webpack 의 기본 웹팩의 등장 배경 자바스크립트에서 문법 수준으로 모듈을 지원하기 시작한 것은 ES2015 부터이다. import 와 export 구문이 없었던 때는 어떻게 모듈을 구현했을까? html 에서 로딩하기 // math.js function sum(a, b) { return a + b } // app.js sum(1, 2) 위의 방법은 index.html 에서 모두 로딩이 된다. 그러므로 sum 같은 경우 전역변수가 오염될 여지가 다분하다. 다른 파일에서 sum 이란 이름을 사용하게 되면 충돌하기 때문이다. IIFE 방식 (즉시실행 함수) 위에서 발생했던 문제를 예방하기 위해 스코프를 사용한다. 즉시실행 함수를 사용하여 외부에서 안으로 접근못하도록 하는 것이다. // math.js var math = math .. 2021. 1. 5. 이전 1 2 다음
