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..

0. 들어가면서 Webpack과 Babel을 사용한 프로젝트에서 html-webpack-plugin은 webpack이 html 파일을 읽어서 로드할 수 있도록 도와준다고 했다. 근데 이게 무슨 말일까? 여기서부터 시작된 의문이 ' 과연 이게 진짜 해당 기능을 하는 걸까? ', ' 사실 더 어썸 한 기능이 있는 것은 아닐까? ', ' 아에 다른 기능인가? ', ' 쓸모없는 기능일까? ' 등 별에 별 의문이 생겨서 한번 알아보게 되었다. 1. html-webpack-plugin ? Custom Html html-webpack-plugin은 webpack 번들을 제공하는 HTML 파일 생성을 단순화시켜준다. const path = require("path"); const HtmlWebpackPlugin = r..

0. 들어가며 해당 프로젝트는 webpack과 babel을 사용해서 만든 프로젝트에 그동안 React 프로젝트를 할 때마다 헷갈리던 폰트 파일을 적용하는 방법을 작성하였다. 1. 준비물 특별하게 사용한 것은 React 프로젝트, 구글에서 가져온 Font 파일(ttf), styled-components 패키지가 있다. 2. 시작 public 폴더 이용하기 먼저 구글에서 가져온 폰트를 public 폴더에 넣어주었다. import React from "react"; import styled from "styled-components"; const CustomDiv = styled.div` @font-face { font-family: "BlackHanSans"; src: url("./assets/fonts/B..

0. 들어가며 처음 React를 공부할때, 보통 CRA(create react app)을 사용해서 프로젝트를 만들지만 Webpack과 Babel을 공부하는 겸 한번 빈 페이지에서 프로젝트를 만들어보겠다. 1. 세팅 및 패키지 설치 npm init npm init 명령어를 통해서 package.json을 만들어주자! npm i --s react react-dom React 프로젝트를 만들 것이기 때문에 당연히 react와 react-dom을 설치한다. npm i -D --s webpack webpack-cli webpack-dev-server - webpack : webpack을 사용해서 프로젝트를 만들기 때문에 당연히 설치한다. - webpack-cli : 커맨드 라인에서 webpack을 사용할 수 있게..

1. JSX 문자도 HTML도 아닌 JavaScript의 확장 문법 const text = "Hello, world!"; const textClass = "title" const element = {text} React 개발을할 때 JSX는 필수가 아니다. 하지만 시각적으로 더 도움이 된다. 2. Babel JavaScript Complier로 React 언어를 JavaScript가 이해할 수 있게 해석해주는 프로그램이다. const text = "Hello, world!"; const textClass = "title" const element = {text} = // 바벨처리 => const text = "Hello, world!"; const textClass = "title"; const elem..