목차
- ESLint
- Webpack
- Babel
- TypeScript + Babel
1. ESLint
자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구로 자바스크립트용 스타일 가이드라고도 할 수 있다.
코딩 컨벤션에 위배되는 코드나 안티 패턴들을 자동 검출하여 코드 퀄리티를 보장하며, 일관된 방식의 코딩을 통해 가독성을 향상 시키는 등의 작업을 할 수 있다.
1.1. eslint config를 이용하여 설치
eslint가 필수 패키지 및 다양한 환경에 대한 설정을 자동으로 진행해 줌.
eslint가 이미 설치되어 있다면 'eslint --init' 도 동일한 커맨드임.
더 자세한 설정 정보(https://eslint.org/docs/latest/use/configure/configuration-files)
#npm
npm init @eslint/config
#yarn
yarn create @eslint/config
#동일한 기능의 커맨드
eslint --init
npx eslint --init
yarn run eslint --init
※ @eslint/config 를 사용하여 typescript 설정을 할 경우 간단하게 타입스크립트에도 적용할 수 있다.
1.2. 패키지 직접 설치
주요 패키지 목록
- eslint
- @eslint/js
- typescript-eslint : 타입스크립트 코드 적용
- globals : 사용자가 추가하는 전역변수 적용
#npm
npm install --save-dev eslint @eslint/js
#yarn
yarn add --dev eslint @eslint/js
1.3. eslint.config.js 설정 파일 직접 적용
//eslint.config.js
//esm 일 경우
export default [
{
rules: {
semi: "error",
"prefer-const" : "error"
}
}
];
//commonjs 일 경우
module.exports = [
{
rules: {
semi: "error",
"prefer-const" : "error"
}
}
];
1.4. eslint 실행
#terminal에서 직접 실행
eslint
#npx로 실행
npx eslint
#yarn으로 실행
yarn run eslint
#프로젝트 전체 실행
eslint
#특정 파일만 실행
eslint {filename}
2. Webpack
Webpack은 자바스크립트 모듈 번들러이다.
자바 스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 이미지와 같은 리소스를 포함한 모듈들을 대표하는 파일을 생성할 수 있다.
자바스크립트, HTML, CSS, 이미지 등 서로 의존하는 리소스들을 하나의 파일로 번들링한다.
- 모듈 번들러: 웹 애플리케이션을 구성하는 리소스(html, css, js, img 등등)을 각각 모듈로 보고 이를 병합해서 하나의 결과물로 만드는 도구
모듈이란?
(추가 예정)
장점
- 의존 관계에 있는 리소스를 하나의 파일로 번들링하기 때문에 HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야 하는 번거로움이 없어진다.
- 자바스크립트 파일 단위로 변수를 관리할 수 있게 해주기 때문에 중복된 변수로 인한 문제가 발생하지 않는다.
- 의존된 여러 파일을 가져오기 위한 네트워크 비용을 줄여 더 빠른 서비스 제공이 가능하다.
- 브라우저에 HTTP 요청 개수 제약이 있는 경우에도 문제가 발생하지 않는다.
단점
- 하나의 파일로 모듈화된 파일들을 요청하게 되면 첫 로딩시 속도가 너무 느려질 수 있음
- Code Splitting, Cache 등의 방법으로 문제를 해결할 수 있음
2.1. Webpack 설치
대표적인 웹팩 패키지 목록
- webpack
- webpack-cli
- webpack-stream
- @types/webpack
- copy-webpack-plugin
- warings-to-errors-webpack-plugin
- style-loader
- css-loader
- babel-loader
//npm
npm install --save-dev webpack webpack-cli
//yarn
yarn add --dev webpack webpack-cli
2.2. Webpack 설정
//webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
2.3. Webpack의 대안 : Gulp
(추가 예정)
3. Babel
Babel은 최신 ES(ES6 or later) 자바스크립트 코드를 이전 ES(ES5) 자바스크립트 엔진에서 실행할 수 있도록 이전 버전과 호환되는 자바스크립트 코드로 변환해주는 대표적인 자바스크립트 트랜스파일러(Transpiler)이다.
모던 웹 브라우저, 최신 ES를 지원하지 않는 브라우저 또는 자바스크립트 엔진에서도 문제없이 자바스크립트 코드를 실행할 수 있어야 한다. 즉, 크로스 브라우징 문제를 해결하기 위한 방법으로 이전 버전(ES5)의 자바스크립트 코드로 트랜스파일 또는 트랜스컴파일 해주는 도구이다.
3.1. Babel 설치
대표적인 바벨 패키지 목록
- @bable/core
- @babel/cli
- @babel/node
- @babel/register
- @babel/preset-env
- @babel/preset-flow
- @babel/preset-react
- @babel/preset-typescript
//npm
npm install --save-dev @bable/core @bable/cli @babel/preset-env
//yarn
yarn add --dev @bable/core @bable/cli @babel/preset-env
바벨에는 플러그인(Plugin)과 프리셋(Preset)이 존재한다.
바벨에서 다양한 플러그인 리스트(https://babeljs.io/docs/plugins-list)를 제공하며 플러그인 설정을 통해 원하는 트랜스파일링 기능을 설정할 수 있다.
프리셋은 플러그인 규칙들을 모아놓은 세트로 한번에 적용할 때 사용한다.
@babel/preset-env를 적용할 경우 모던 자바스크립트를 지원하기 위한 플러그인들이 적용된다.
3.2. Babel 설정
바벨 커맨드를 이용해 실행할 경우 커맨드 옵션으로 적용할 플러그인이나 프리셋을 설정해주어야 한다.
이를 바벨 설정 파일을 통해 대체할 수 있으며 바벨은 다양한 설정 방법을 제공한다.
- .babelrc : 하위 디렉토리나 파일에서 특정 플러그인이나 프리셋을 적용할 때 사용
- babel.config.js : 여러 패키지 디렉토리를 가진 프로젝트에 통합 설정할 때 사용(프로젝트 전체 구성)
이 외에도 더 많은 설정 방법들을 제공한다.( https://babeljs.io/docs/config-files)
//babel.config.js
module.exports = {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
'@babel/preset-typescript',
],
};
//package.json
{
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
}
3.3. Babel 실행
다양한 바벨 실행 방법들
- 웹팩에 babel-loader를 등록하여 웹팩 실행시 함께 적용시키기
- @babel/cli 커맨드를 이용해 실행하기
- @babel/core 모듈을 require(import)하여 js 파일을 통해 실행시키기
- @babel/register로 실행시키기
@babel/cli 를 이용한 실행 방법을 소개하겠다.
#babel cli 기본 커맨드
babel {directory or filename} --presets={preset list}
#npx를 이용한 실행
npx babel src/main.js --out-dir lib
#yarn을 이용한 실행
yarn babel src/main.js --out-dir lib
#nodejs를 이용한 실행
./node_modules/.bin/babel src/main.js --out-dir lib
주요 커맨드 옵션
- --out-file or -o : 컴파일된 파일명 설정
- --out-dir : 컴파일 파일 저장될 디렉토리 설정
- --plugins : 적용할 플러그인 리스트 설정
- --presets : 적용할 프리셋 리스트 설정
- --ignore : 예외처리할 파일 설정
더 많은 옵션 보기 : https://babeljs.io/docs/babel-cli
4. Typescript + Babel
4.1. tsc vs babel
타입스크립트에서 기본적으로 제공하는 컴파일러인 tsc는 타입스크립트 코드를 자바스크립트 코드로 변환하는 동시에 타입 검사도 수행한다. tsc는 최신 ES 표준을 따르기 때문에 최신 ES 표준의 자바스크립트 코드로 변환이 가능하며 이전 ES 버전의 자바스크립트 코드로도 변환이 가능하다.
tsc가 아닌 babel을 사용하여 트랜스파일링 하는 이유
- babel은 자바스크립트 코드로 변환할 때 타입스크립트의 타입 선언을 무시하고 타입 정보를 삭제한다. 즉, 빠르게 트랜스파일링 할 수 있다.
- babel은 플러그인을 가지고 있어 사용자 설정을 통해 다양한 커스텀 설정을 할 수 있다.
- 프로젝트에 이미 babel을 적용했을 경우 라이브러리마다 각각의 설정을 할 필요 없이 통합 컴파일 환경을 구성할 수 있다.
단점
- ts → js로 전환하는 동안 타입 검사를 할 수 없다. 즉, 에디터에서 타입 오류를 잡지 못하고 상용 코드에 적용될 수 있다.
- babel은 .d.ts 파일을 만들 수 없기 때문에 프로젝트가 라이브러리인 경우 작업이 번거로워질 수 있다.
타입스크립트를 적용함에도 tsc가 아닌 babel을 통해 컴파일을 수행하는 경우는 보통
- 타입스크립트 프로젝트에서 build를 통해 생성된 산출물이 웹 기반으로 크로스 브라우징을 지원해야 할 경우
- node + typescript 환경에서 jest, karma, webpack 등 다양한 기능에 대한 실행 또는 트랜스파일링을 한 곳에서만 관리하고 싶을 경우
등이 있다.
하지만 타입스크립트를 사용하는 이유 중 하나인 타입 검사를 수행할 수 없는 것은 치명적이기 때문에 보통 Babel과 Typescript를 함께 적용할 경우
- tsc는 타입 검사를 수행하고
- babel은 트랜스파일링을 수행하도록 설정하는 것이 일반적이다.
또는 컴파일 속도가 중요할 경우 tsc의 타입 검사는 생략하고 eslint 등으로 대체하는 경우도 있다.
바벨을 사용해 트랜스파일링을 적용할 경우 타입스크립트의 컴파일 옵션 설정. 즉, tsconfig.json의 compileOptions 컴파일 옵션 설정을 통해 단점을 어느정도 극복할 수 있다.
islatedModules: true
프로젝트 내의 모든 타입스크립트 파일을 모듈로 구성해야 하도록 강제한다. 즉, import, export 키워드를 정의해야 한다.
타입스크립트에서도 tsc가 아닌 babel 등과 같은 외부 트랜스파일러를 사용할 경우 true를 설정하도록 권장하는 옵션이다.
jsx: 'preserve'
.jsx 파일을 .js로 변환하지 않고 파일 내보내기 설정
babel의 프리셋을 통해 .jsx 파일을 babel을 이용해 변환하기 위한 설정으로 보인다.
noEmit: true
tsc를 이용해 컴파일하더라도 .js 파일을 생성하지 않는다. 이 기능을 이용해 타입스크립트의 타입 검사만 할 수 있다.
Reference.
https://chamdom.blog/babel-and-tsc/
'nodejs' 카테고리의 다른 글
| [typescript] 타입스크립트에서 Jest 이용한 테스트 모든 방법 설명 (1) | 2024.12.19 |
|---|
