Babel이란? Babel은 자바스크립트 트랜스파일러로, ECMAScript 2015+ 코드를 구형 및 최신 브라우저 환경에서도 호환도록 변환하는 도구 체인이다.  주요 기능문법 변환최신 ECMAScript 문법을 구형 브라우저에서도 동작할 수 있도록 변환한다. 예) const나 arrow function 같은 문법을 구형 문법으로 변환polyfill 적용브라우저에서 지원하지 않는 새로운 JavaScript 기능을 사용할 수 있도록 추가 기능을 삽입한다. 예) Promise, Array.prototype.includes 등.코드 전환React(JSX), TypeScript와 같은 다양한 JavaScript 확장 언어를 표준 JavaScript로 변환한다. 예) JSX 코드를 React.createElem..

우리가 개발을 하면 빼먹을 수 없는 것이 있다. 그것은 바로 Console.log 지우기! 이게 또 은근 귀찮은 작업인데, 자동으로 지워주는 플러그인이 있어서 소개를 한다! 설치 npm install --save-dev babel-plugin-transform-remove-console 어썸한 패키지를 먼저 설치해준다. 적용하기 const babelArgv = require("yargs").argv; const isProd = babelArgv.env === "prod"; const config = { presets: [ [ "@babel/preset-env", { targets: "> 0.25%, not dead", useBuiltIns: "usage", corejs: 3, shippedProposal..

Webpack과 Babel을 사용해서 React 환경을 구성하는 작업은 많이 했었다. 하지만 이번에 타입스크립트를 같이 적용하면서 Webpack 5버전의 기능도 사용하면서 다시 환경을 구성해보려고 한다. 기본 세팅 npm i --s core-js react react-dom 바벨 설정을 위한 core-js, 리액트 사용을 위한 react, react-dom 이다. npm i --save-dev @babel-cli @babel/core @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react @babel/preset-typescript 엉청 많다. ㅋㅋ... 우선 마찬가지로 바벨 설정을 위한 패키지들이다. babel/plugin-s..

들어가며 이 글은 Webpack을 사용해서 JavaScript를 기본적으로 구성한 이후라고 판단하여 작성합니다. 필요 패키지 다운로드 npm install --save-dev typescript @babel/preset-typescript 필요한 패키지는 타입스크립트를 사용하기 위한 typescript와 babel에서 읽기 위한 @babel/preset-typescript이다. 초기 설정 먼저 프로젝트에서 사용할 tsconfig를 추가한다. ./node_modules/typescript/bin/tsc --init 몇가지 옵션을 적어보자면, target 옵션 : 타입스크립트 파일을 어떤 버전의 자바스크립트로 변경할지 지정 es5로 세팅하면 es5 버전의 자바스크립트로 컴파일해준다. module 옵션 : 자..

0. 준비사항 본인은 프로젝트를 구성할 때 express-generator를 사용하기 때문에 먼저 설치를 해야한다. npm i -g express-generator express-generator는 자동으로 express 환경울 구성해주는 멋진 도구이다. 1. npm 프로젝트 생성 // express 프로젝트명 --view=템플릿 express webpackProject --view=ejs cd webpackProject npm i express-generator를 설치하면 express 명령어를 사용할 수 있는데, 원하는 프로젝트명을 입력하고 원하는 템플릿을 입력해주면 된다. 템플릿에는 pug, ejs 등이 있는데, 본인은 pug알못이기 때문에 ejs를 사용해서 설치했다. 명령어를 실행하면 위와 같이 ..

0. 들어가며 Babel에 대해서 정리한 글이 이곳 저곳 나의 티스토리에 많이 있다. 하지만 모두 다른 블로그를 이곳 저곳 뒤지면서 정리한 내용이라 한눈에 이해가 되지 않는다. 이번 기회에 한번 다시 정리하고자 한다. 1. Babel? 입력과 출력이 모두 자바스크립트인 컴파일러이다. ES6 코드, 리액트의 JSX, 타입 스크립트와 같은 언어를 ES5 코드로 변환해준다. 즉, 최신 자바스크립트 코드를 지원하지 않는 explorer 같은 브라우저에서 최신 자바스크립트 코드를 구버전 자바스크립트 코드로 호환이 가능하게 변환해준다. 2. Babel의 구동 방법 구동에 있어 필수인 패키지는 @babel/core 이다. Babel을 사용하기 위해서 필수로 필요한 패키지이고 그 외에는 @babel/plugin-tra..

1. import React from 'react' JSX 문법을 사용하면 우리는 import React from 'react'를 항상 사용한다. 하지만 실제로 해당 모듈을 우리가 사용한다는 느낌은 들지 않는다. Babel이 JSX 문법을 React.createElement 코드로 변환하기 때문에 우리가 실제로 사용을 하지 않지만 컴파일된 후 코드에는 React가 쓰이고 있다. 그렇기 때문에 우리가 사용한다고는 느끼지 못하지만 Babel을 통해서 React 모듈을 사용하고 있던 것이다.

0. Webpack? 웹팩은 모듈 번들러이다. 여기서 모듈은 각 리소스 파일을 말하고, 번들은 Webpack 실행 후 나오는 결과 파일이다. 하나의 번들 파일은 여러 모듈로 만들어진다. 즉, Webpack을 이용하면 우리가 제작한 여러 가지 리소스(js, css, ... )를 사용자에게 전달하기 좋은 형태로 만들 수 있다. 필요 이유? 초기 웹 페이지는 페이지가 바뀔 때마다 새로운 HTML을 요청해서 화면을 그리는 방식이었다. 자바스크립트는 돔을 간단하게 조작하는 역할만 했고, Ajax가 유행했을 때는 자바스크립트의 비중이 더 커졌지만 페이지당 자바스크립트 파일 몇 개면 충분했다. 하지만 SPA가 나오면서 하나의 HTML에 수십, 수백 개의 자바스크립트 파일을 포함하기 때문에 기존 방식이 통하지 않았다...