바벨이란 : 최신 사양의 자바스크립트 코드(ES6+)를 IE나 구형 브라우저에서도 동작하는 코드로 변환(트랜스파일링)해주는 트랜스파일러이다. 1) babel 기본 라이브러리 설치 npm i -D @babel/core //기본적인 바벨 npm i -D@babel/preset-env //브라우져에 맞게 알아서 바꿔주기 npm i -D @babel/preset-react //리액트 용도로 jsx로 npm i -D babel-loader //바벨 웹팩 연결. npm i -D @babel/plugin-proposal-class-properties //jsx class 문법 지원 npm install --save-dev @babel/plugin-transform-runtime //es6 메서드나 생성자 지원 npm..

위 그림과 같이 webpack은 js를 제외하고도 css, style, file을 번들링 할 수 있다. 앞서 진행했던 webpack-sample 프로젝트에 app.css 와 image파일을 하나 만든다. app.css body{ background: blue; } app.js import {sum} from './math.js' import './app.css'; import webpackImage from './webpack.png' window.addEventListener('DOMContentLoaded',()=>{ const el = document.querySelector("#app"); el.innerHTML=` 1+2 = ${sum(1,2)} ` }) vscode 터미널에 #npm i -D ..

front-end를 개발하는데 있어 webapck이란 단어를 많이 들어봤을 것이다. 웹팩이란 “웹팩은 현대 자바스크립트 어플리케이션을 위한 정적 모듈 번들러 입니다.” 즉 웹팩은 js, css, file, html 들을 하나의 모듈로 묶어 동작하게 해주는 모듈 번들러이다. 사용하는 이유는 1. 파일 단위의 자바스크립트 모듈 관리의 필요성 2. 웹 개발 작업 자동화 도구 (Web Task Manager) 3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능 아래와 같은데 3번인 어플레케이션의 성능을 향상시키는데 많은 도움을 준다고 한다. (여러개의 js파일들을 하나로 읽으니 성능이 개선될 수 밖에 없을것이다.) 웹팩의 환경을 잡아 보기 위해서는 일단 vscode, node.js가 전제로 설치되어있어야 한다...