Babel
-
babel 직접 설정해보기FrontEnd/JavaScript 2024. 4. 6. 14:40
1. 기본 웹팩의 등장 배경과 마찬가지로 브라우저는 자바스크립트의 발전 속도를 따라오지 못하면서 es5 이후의 문법들을 직접적으로 해석할 수 없다. 때문에 화살표 함수라던가 let cont 변수, jsx, 타입스크립트 등의 문법들을 브라우저가 알고 있는 자바스크립트 문법으로 변환시켜줘야 함. 이러한 도구를 트랜스파일러 라고 하는데 babel은 트랜스파일러 중 하나. Babel의 동작(빌드)은 3단계로 진행된다. Parsing -> Transforming -> Printing npm install -D @babel/core @babel/cli 바벨을 사용하기 위해 babel/core 와 커맨드 라인 인터페이스인 babel/cli를 개발 모드로 설치해줌. // ./src/math.js const sum = ..
-
webpack과 babel (feat. CRA)FrontEnd/React.js 2024. 1. 11. 14:00
webpack 여러 개의 파일을 하나로 합쳐주는 모듈 번들러 기능 css loader 기능 jsx 변환 작업 여러 개로 나눠진 js 파일을 html이 실행 할 수 있는 하나의 js파일로 합쳐줌 파일 분할(Code Splitting) 애플리케이션 번들에 포함된 코드를 여러 개의 조각/청크 로 분할하는 기술 초기 로딩 시 필요한 최소한의 코드만 다운로드 하여 페이지 로딩 속도 향상 대규모 애플리케이션에 유용 리액트 라우터와 같은 라이브러리와 잘 통합되어 있어, 각 페이지에 필요한 코드만 로딩하게 도와줌 // 동적 import() - 모듈은 필요할 때만 로딩되며 웹팩은 이를 감지하여 해당 모듈을 별도의 청크로 분할 const someModule = import('./someModule.js'); // 웹팩의 ..