웹팩이란?
웹팩은 여러개 파일을 하나의 파일로 합쳐주는 번들러다. 하나의 시작점으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다.
로더
로더는 타입스크립트와 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환
한다. 뿐만 아니라 CSS 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다.
자주 사용하는 로더
- css-loader
css 파일을 모듈처럼 불러와 사용할 수 있게끔 해준다. - style-loader
모듈로 변경된 스타일 시트는 돔에 추가되어야만 브라우져가 해석할 수 있다. css-loader로 처리하면 자바스크립트 코드로만 변경되고 돔에 적용되지 않는다. 따라서 css를 번들링하기 위해서는 css-loader와 style-loader를 함께 사용한다. - file-loader
소스코드에서 사용하는 모든 파일을 모듈로 사용하게끔 해준다. - url-loader
플러그인
플러그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다.
자주 사용하는 플러그인
- BannerPlugin
결과물에 빌드 정보나 커밋 버전같은 걸 추가할 수 있다. - DefinePlugin
환경 의존적인 정보를 소스가 아닌 곳에서 관리하는 것이 좋은데 이러한 환경 정보를 제공하기 위해 사용한다. - HtmlWebpackPlugin
HTML 파일을 후처리하는데 사용한다. 빌드 타임의 값을 넣거나 코드를 압축할 수 있다. - CleanWebpackPlugin
빌드 이전 결과물을 제거하는 플러그인이다. 빌드 결과물은 아웃풋 경로에 모이는데 과거 파일이 남아 있을수 있다. - MiniCssExtractPlugin
css를 별도의 파일로 뽑아내는 플러그인이다.
바벨이란?
크로스 브라우징
브라우져마다 사용하는 언어가 달라서 프론트엔드 코드는 일관적이지 못할 때가 많다. 이러한 크로스브라우징 문제를 해결해 줄 수 있는 것이 바벨이다. ECMAScript2015+로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 지켜준다. 이렇게 변환 하는 것을 "트랜스파일" 한다라고 표현한다.
바벨의 기본 동작
바벨은 ECMAScript2015 이상의 코드를 적당한 하위 버전으로 바꾸는 것이 주된 역할이다.
바벨은 파싱 -> 변환 -> 출력 순으로 빌드를 진행한다.
플러그인
바벨은 파싱과 출력만 담당하고 변환작업은 플러그인이 처리한다.
프리셋
목적에 맞게 여러가지 플러그인을 세트로 모아놓은 것을 "프리셋"이라고 한다.
- preset-env
ECMAScript2015+를 변환할 때 사용. - preset-flow
flow를 변환할 때 사용. - preset-react
react를 변환할 때 사용. - preset-typescript
타입스크립트를 변환할 때 사용.
프리셋 설정
타겟 브라우져
module.exports = {
presets: [
[
"@babel/preset-env",
{
target:{
chrome:"79",
ie:"11",
},
},
],
],
}이렇게 target 옵션에 브라우져 버전명만 지정하면 env 프리셋은 이에 맞는 플러그인들을 찾아 최적의 코드를 출력해 낸다.
폴리필
바벨은 ECMAScript2015+를 ECMAScript5 버전으로 변환할 수 있는 것만 빌드한다. 그렇지 못한 것들은 "폴리필"이라고 부르는 코드조각을 추가해서 해결한다.
웹팩으로 통합
바벨을 직접 사용하는 것보다 웹팩으로 통합해서 사용하는 것이 일반적이다. 로더 형태로 제공하는데 babel-loader가 그것이다.
린트란?
코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트라고 부른다.
ESLint
ESLint는 ECMAScript 코드에서 문제점을 검사하고 더 나은 코드로 정정하는 린트 도구중의 하나이다.
코드에서 검사하는 항목은 크게
- 포맷팅
=> 일관된 코드 스타일을 유지하도록 하고 쉽게 읽히는 코드를 만들어 준다. - 코드 품질
=> 어플리케이션의 잠재적인 오류나 버그를 예방하기 위해. 사용하지 않는 변수 쓰지 않기, 글로벌 스코프 함부로 다루지 않기 등이 오류 발생 확률을 줄여 준다.
규칙
문서의 Rules 메뉴에서 규칙 목록을 확인 할 수 있다.
modlue.exports = {
rules:{
"no-unexpected-multiline":"error",
// "off"나 0은 끔, "warn"이나 1은 경고, "error"나 2는 오류
},
}자동 수정 가능한 규칙을 모아 놓은 eslint:recommended 설정이 있다.
module.exports = {
extends:[
"eslint:recommended",
],
}ESLint에서 기본으로 제공하는 설정 외에 자주 사용하는 두 가지가 있다.
- airbnb
=> airbnb 스타일 가이드를 따르는 규칙 모음 - standard
=> 자바스크립트 스탠다드 스타일을 사용한다.
Prettier
포매팅과 겹치는 부분이 있지만 좀 더 일관적인 스타일로 코드를 다듬는다.
ESLint와 통합하는 방법
{
extends:[
"eslint:recommended",
"eslint-config-prettier"
]
}이렇게 함으로써 ESLint는 중복된 포매팅 규칙을 프리티어에게 맞기고 나머지 코드 품질에 관한 검사만 한다.
또는 eslint-plugin-prettier라는 플러그인을 이용해 프리티어 규칙을 ESLint 규칙으로 추가할 수 있다.
{
plugins:[
"prettier"
],
rules:{
"prettier/prettier":"error"
},
}자동화
깃훅을 사용하는 경우
{
"husky":{
"hooks":{
"pre-commit":"lint-staged"
}
}
}이렇게 하면 커밋 메세지 작성전에 lint-staged를 실행한다. 그리고 커밋하면 변경되거나 추가된 파일만 검사한다.
에디터 확장도구를 사용하는 경우
vs-code의 eslint와 prettier 익스텐션이 그러한 기능을 제공한다.
