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

1. dotenv?React에서 .env 에서 설정한 변수를 사용하려고 하는데 알 될 경우 일반적으로 검색했을 때 dotenv를 사용해서설치해서 해결하는 글이 많다.  dotenv를 설치하고 App.js(혹은 다른 프로젝트 어딘가)에서 dotenv.config()를 호출하면 많은 오류가 나온다. 완전 동일하게 나올 수 있고 아닐 수 있지만, 일반적으로 fs, os, path쪽 오류가 나오게 된다.  dotenv는 무의존성 모듈로 Node.js에서 기본적으로 사용할 수 있게 만들어진 패키지이다. Node.js에서는 os, fs, path가 모두 제공되기 때문에 os와 path를 통해 파일을 찾아 fs를 사용해 읽어들인다. 하지만 React에서는 os, fs, path를 기본적으로 제공하지 않기 때문에 프로..

0. 들어가면서 webpack과 babel을 통해서 만든 프로젝트에 Code Splitting을 공부하기 위해서 추가로 작업한 것이다. 1. Code Splitting? 우리가 일반적으로 yarn build을 사용하면 하나의 번들 파일이 만들어진다. 프로젝트의 규모가 커지면서 번들 파일도 같이 점점 커지게 된다. 크기가 커진 번들 파일을 화면에 로드하는 경우 시간이 걸어지는 결과가 발생한다. 즉, 사용자가 느끼는 서비스의 만족도가 낮아지게 된다. 이때, 하나의 번들 파일을 여러 개의 번들 파일로 나누는 것이 Code Splitting이다. 여러 개의 번들 파일로 나누어서 실제 로드가 될 화면에 필요한 번들 파일만 불러오고 나머지 번들 파일은 호출하지 않고 필요할 때 호출하면서 더 빠른 속도로 화면에 보이..

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을 사용할 수 있게..