타입스크립트 프로젝트 만들기 - 패키지 구성 알아보기

우리가 구성한 패키지에 대해 알아보고 먼저 프로젝트를 진행하는게 좋을 것 같아
이번 포스팅은 우리가 환경 세팅에 활용한 패키지 구성에 대해 알아보려 합니다.

"dependencies": {
    "babel-loader": "^8.0.6",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^3.2.0",
    "path": "^0.12.7",
    "source-map-loader": "^0.2.4",
    "ts-loader": "^6.0.1",
    "typescript": "^3.4.5",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.4.1",
    "webpack-merge": "^4.2.1",
    "whatwg-fetch": "^3.0.0"
},
"devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
    "@babel/polyfill": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-typescript": "^7.3.3"
}

Webpack
대규모 웹 어플리케이션 개발을 하면서 복잡한 javascript의 대규모 의존성 트리를 관리하기 위해 다양한 기능을 갖춘 패키지 입니다.
Grunt,Gulp등의 태스크 러너나 빌드 시스템과 똑같은거 아니냐는 분들 많으신데 다릅니다.
'무엇이 다르냐?'
Grunt,Gulp는 경로를 정의하고 그 경로와 일치하는 파일을 찾아 파일을 조합,변환,축소 하는 작업을 지정하여 처리합니다.
반면 Webpack은 프로젝트 전체를 한 단위로 해석하고, 처음 지정한 파일을 시작점으로 import문을 참고해 프로젝트의 전체 의존성을 찾아 loader를 이용해 처리하고, 번들파일을 생성합니다. 처리속도도 더 빠르죠.
Webpack-dev-server설정을 통해 개발용 서버도 손쉽게 구축할 수 있습니다.
HMR (Hot Module Replacement)을 통해 수정된 사항을 브라우저에서 빠르게 확인할 수도 있구요.
Webpack-merge 이 패키지는 여러개의 파일로 나눠 공통과 개발 및 빌드환경 등 유용하게 파일을 나눌 수 있습니다.

...
var baseWebpackConfig = require('./base.js');
var merge = require('webpack-merge');

var webpackConfig = merge(baseWebpackConfig, {
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true
        })
    ]
});

이렇게 merge를 이용해 베이스,빌드,개발 환경 파일을 나눠서 사용합니다.
하나의 파일로 사용하게 되면 같은 설정의 코드를 관리하기가 힘들어져 조금 더 편의성을 제공합니다.

html-webpack-plugin
기본적으로, bundle한 css, js파일들은 html파일에 직접 추가해야하는 번거로움이 있습니다. html-webpack-plugin를 사용하면 이 과정을 자동화 할 수 있습니다. Webpack의 성능을 향상 시키고 개발을 편리하게 만들어 주는 것이 플러그인의 역할입니다.

source-map-loader
source-map-loader는 TypeScript의 모든 소스 맵 출력을 사용하여 자체 소스 맵을 생성 할 때 webpack에 알립니다.
이렇게하면 원래 TypeScript 소스 코드를 디버깅 하듯이 최종 출력 파일을 디버깅 할 수 있습니다.

babel
Babel은 상위 버전의 ES문법을 ES5이하의 코드로 트랜스 파일링 해줍니다.
상위버전의 ES문법은 크로스브라우징의 문제가 생기기 때문에 Babel을 이용해 트랜스 파일링을 해주어야 합니다.
가끔보면 바벨이 컴파일러란 글이 있더라구요.
컴파일링과 트랜스파일링은 약간 차이가 있습니다. 트랜스 파일은 한 언어로 작성된 코드를 비슷한 다른 언어로 변환하는 것이고,
컴파일은 한 언어로 작성된 코드를 다른 언어로 변환하는 것을 의미합니다.
plugin-proposal-class-properties - 정적 클래스 속성뿐만 아니라 속성 이니셜 라이저 구문으로 선언 된 속성을 변환을 도와줍니다.
plugin-proposal-object-rest-spread - 스프레드 속성의 변환을 도와줍니다.
polyfill - 바벨의 핵심 패키지입니다. 바벨의 트랜스파일링만으로는 해결하기 어려운 메서드들이 존재합니다. 이를 도와주기위해 polyfill이 필요합니다.

whatwg-fetch
whatwg-fetch는 Fetch Api Polyfill입니다. 브라우저에서 웹 요청을하는 Promise 기반 메커니즘이며 XMLHttpRequest의 대부분의 사용을 대체 할 수 있을만큼 표준 Fetch 스펙의 하위 세트를 구현하는 polyfill입니다.

이번 포스팅에는 타입스크립트 프로젝트를 구성하는 패키지에 대해 알아보았습니다.
많은 패키지를 설명 하는 만큼 간략하게 핵심 설명만 적어 두었어요.
더 자세히 깊게 알아보고자 하면 좋은 글들이 많으니 자료를 더 찾아보시길 바랍니다.