Transpiler, Compiler 역할
언어 ⇒ 언어 변환
특정 문법 등을 Javascript Code로 바꿔줌
ex) Optional Chaning (최신문법을 과거 문법으로)
//Put in next-gen JavaScript - Optional Chaning
const city = address?.city
//Get browser-compatible JavaScript out
"use strict";
var _address;
const city = (_address = address) === null || _address === void 0 ? void 0 : _address.city;
Plugin
각각의 문법마다 플러그인이 존재
ex) 위 Optional Chaining 사용시 @babel/plugin-proposal-optional-chaining
설치
ex) @babel/plugin-proposal-class-properties
Preset
plugin을 모아서 제공 (왜냐면 하나하나 설정해주기 귀찮으니까)
ex) @babel/preset-env
: plugin 모아 특정 환경으로 타겟팅 해줌
// target - caniuse
{
"targets": {
"chrome": "58",
"ie": "11"
}
}
JavaScript 표준 만드는 방법
어떻게 사용 ?
Transpiling → Babel로 대체 (babel-plugin-typescript)
Type Checking
타입이 맞는지 아닌지 체크?
ex) tsc —moEmit
Language Server
tsc
를 돌리지 않아도 VS Code에서 빨간줄을 볼수있는 이유결론
레버리징 : 지렛대를 이용함?
TypeScript로 타입 체킹 + Babel로 Transpile —> 지속적 개선을 위해
여러 파일(모듈)들을 한 파일로 뭉쳐준다.
파일 → Loader → Webpack → 후처리 Plugin
TypeScipt 적용 → ts loader 설치 - .ts로 끝나는 파일 설정해줌
JavaScript 관련된건 Babel Loader를 주로 쓴다!
Q. svg 파일을 읽고 싶다.
import ... from './hello/world/something.svg'
svg → 경로로 읽고싶다!
ex) url-loader
svg → string으로 읽고싶다!
ex) raw-loader
svg → React 컴포넌트로 읽고싶다.
ex) @svgr/webpack
결론적으로, 내가 뭔가 특이한걸 import 하고 싶다!
엑셀을 읽고싶다.
ex) xlsx-loader
CRA로 할때 (eject 안하고 사용하는 경우)
react-app-rewired
+ customize-cra
$ yarn add customize-cra --dev
$ yarn add react-app-rewired --dev
package.json에서 script를 수정하여 프로젝트 실행시 react-scripts 대신 react-app-rewired를 통해 실행
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
},
프로젝트 가장 최상단 위치에서 config-overrides.js 라는 파일을 생성한 뒤, 원하는 customizing을 하면 된다.
config-overrides.js 를 작성하기 전에, decorator 문법을 사용하기 위해 필요한 패키지를 설치
$ yarn add --dev @babel/plugin-proposal-decorators
아래와 같이
const {
addDecoratorsLegacy,
disableEsLint,
override
} = require("customize-cra");
module.exports = {
webpack: override(
disableEsLint(),
addDecoratorsLegacy()
)
};
customize-cra가 지원해주는 addDecoratorsLegacy 를 통해 decorator문법을 사용할 수 있게 되었다.
mobx-react의 observer decorator를 App.js에 적용해 볼 것이다.
customize-cra 문서에서 disableEsLint 플러그인을 같이 사용하라고 나타나있기 때문에 설정파일에 명시하였다.
craco