실전리액트프로그래밍 썸네일형 리스트형 Babel과 Webpack의 내부 동작 이해하기 - 4 webpack [실전 리액트 프로그래밍] webpack을 설치해보자! 👉🏻 webpack 실행해보기 웹팩은 웹에 들어가는 여러 가지 리소스를 사용자에게 전달하기 좋게 하나의 번들 형태로 만들어준다. mkdir webpack-init cd webpack-init/ npm init -y { "name": "webpack-init", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } npm install webpack webpack-cli webpack-cli.. 더보기 Babel과 Webpack의 내부 동작 이해하기 - 3 polyfill [실전 리액트 프로그래밍] polyfill을 설치해보자! > 바벨과 폴리필 JS의 최신 기능을 모두 사용하면서, 오래된 브라우저에서도 최신 문법을 지원하려면 바벨로 코드 문법을 변환하는 동시에 폴리필도 사용해야 한다. 폴리필은 런타임에 기능을 주입하는 것을 말한다. 기능이 존재하는지 검사하여 없는 경우에만 주입한다. 바벨만으로는 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 없다. 폴리필을 별도 설정해줘야 한다. > 모든 폴리필 사용하기 import '@babel/polyfill'; module.exports = { entry: ['@babel/polyfill', './src/index.js'], //... }; 웹팩 사용하는 경우는 entry 속성에 추가한다. 이 경우 필요하지 않은 폴리필까지.. 더보기 Babel과 Webpack의 내부 동작 이해하기 - 2 Babel 설정 [실전 리액트 프로그래밍] babel을 사용하는 여러 방법을 직접 설정해보자! 바벨 설정 파일에서 사용할 수 있는 다양한 속성이 있다. extends: 다른 설정 파일을 가져와서 확장 env / overrides: 환경별 또는 파일별로 다른 설정 적용 > extends 속성으로 다른 설정 파일 가져오기 /common/.babelrc { "presets": ["@babel/preset-react"], "plugins": [ [ "@babel/plugin-transform-template-literals", { "loose": true } ] ] } plugins에 옵션을 설정할 때는 배열로 만들어서 두 번째 자리에 옵션을 넣는다. loose 옵션을 주면 문자열을 연결할 때 concat 메서드 대신 + 연산.. 더보기 Babel과 Webpack의 내부 동작 이해하기 - 1 Babel 실행 [실전 리액트 프로그래밍] babel을 실행해보자! babel이란? 리액트의 JSX 문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안 단계에 있는 문법 등을 사용할 수 있게 해 주는 자바스크립트 코드의 컴파일러. babel을 실행하는 여러 가지 방법 @babel/cli로 실행하기 웹팩에서 babel-loader로 실행하기 @babel/core를 직접 실행하기 @babel/register로 실행하기 프로젝트를 생성할 폴더에 npm으로 생성한다. npm init -y /package.json 파일이 생성된다. > 다음으로 필요한 패키지를 설치 바벨을 실행하기 위해서 필수적인 @babel/core와, 두 개의 플러그인, 프리셋 하나를 설치한다. npm install @babel/core @babe.. 더보기 이전 1 다음
