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에 수십, 수백 개의 자바스크립트 파일을 포함하기 때문에 기존 방식이 통하지 않았다...

1. Polyfill? 자바스크립트의 최신 기능을 모두 사용하면서 오래된 브라우저를 지원하려면 Babel로 코드 문법을 변환함과 동시에 Polyfill도 사용해야 한다. Polyfill은 런타임에 기능을 주입하는 것을 말한다. 런타임에 기능이 존재하는지 검사해서 기능이 없는 경우 주입한다. Babel을 사용하면 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 있다고 생각하겠지만 Polyfill에 대한 설정은 별도로 해야 한다. 예를 들어 ES8에 추가된 String.padStart 메서드는 폴리필을 통해서 추가할 수 있다. if (!String.prototype.padStart) { String.prototype.padStart = func; } func는 padStart 폴리필 함수이다. 2. ..

0. 들어가면서 https://bum-developer.tistory.com/entry/React-Babel [React] Babel 0. Babel? Babel은 입력과 출력이 모두 자바스크립트 코드인 컴파일러이다. 일반적인 컴파일러는 고수준의 언어를 저수준의 언어로 변환하는 것과 다른 점이 있다. 초기엔 ES6 코드만 ES5 코드로 변환 bum-developer.tistory.com 정리 이후 내용을 다루고 있다. 해당 내용의 이해가 어려운 경우 먼저 읽기를 추천한다. 1. 확장성과 유연성을 고려한 Babel 설정 방법 Babel 설정에 사용할 수 있는 다양한 속성 중에 extends, env, overrides 속성을 알아보자 extends 속성을 이용하면 다른 설정 파일을 가져와 확장할 수 있고,..

0. Babel? Babel은 입력과 출력이 모두 자바스크립트 코드인 컴파일러이다. 일반적인 컴파일러는 고수준의 언어를 저수준의 언어로 변환하는 것과 다른 점이 있다. 초기엔 ES6 코드만 ES5 코드로 변환해주지만, 현재는 리액트의 JSX, 타입 스크립트와 같은 정적 타입 언어, 코드 압축 등의 단계에 있는 문법도 변환해준다. Babel을 실행하는 방법은 4가지가 있다. @babel/cli로 실행하기 웹팩에서 babel-loader로 실행하기 @babel/core를 직접 실행하기 @babel/register로 실행하기 이번엔 @babel/register를 제외하고 적용하는 방법을 알아본다. 1. 준비단계 패키지 설치 npm install @babel/core @babel/cli @babel/plugin..