CH14. 프로젝트 구성과 번들링

아래의 내용은 "타입스크립트 퀵스타트"의 CH14(프로젝트 구성과 번들링)를 요약 및 관련 설명을 추가한 내용입니다.

번들링

• 여러 리소스(파일)를 합치는 과정
• 타입스크립트 파일을 tsc와 —out 옵션을 통해 타입스크립트 파일을 하나의 파일로 번들링 할 수 있다.
  • 그러나 위 방법으로는 타입스크립트 파일에 대해서만 번들링을 할 수 있다.
  • 이러한 한계를 극복하기 위해 웹팩(webpack)과 같은 번들러를 이용
• 개별 파일에서 호출한 모듈을 적절한 순서로 배치
• 흩어져 있는 라이브러리와 사용자 코드를 합쳐 최적화된 배포 파일을 생성해 낸다.
• 번들러를 이용하여 이미지, css, js와 같은 파일을 모아서 배포 가능한 단위로 합친다.
• 번들러는 트랜스 파일처럼 `ES6->ES5` 로 변환해주지는 않는다.
  • 여러 군데 흩어져 있는 모듈, 이미지, css 파일을 묶어 배포하기 쉽도록 한 군데로 모으는 역할을 한다.
  • 모듈 간의 의존 관계를 파악해 정적 파일 형태로 빌드 결과를 생성한다.
    
  • 번들러 종류 - webpack, rollup, parcel, vite 등
    

• 엔트리 파일 : 웹팩 실행 시 최초로 읽어들이는 파일
• webpack 명령어를 실행하면 웹팩 설정 파일(webpack.config.js)을 기준으로 번들링을 수행
  
  • 만약 webpack.config.js 파일이 현재 디렉터리에 없다면 설정 파일을 찾을 수 없다는 오류 메시지가 출력된다.

• 웹팩 설정 파일
• var path = require("path"); module.exports = { entry: './src/entry1.js', // 웹팩 실행 시 번들링의 시작 파일, 엔트리가 다른 모듈을 포함하고 있다면 다른 모듈을 포함해 번들링 / 컴파일할 최초의 파일 output: { filename: "build1.js", // 번들링 된 파일 이름 path: path.resolve(__dirname, "dist") // 번들링 된 결과를 출력할 디렉토리 경로 }, module: { loaders: [{ // entry에 설정한 파일을 변환할 컴파일러를 입력 test: /\.tsx?$/, loader: 'ts-loader', }] }, plugins: [ // 번들링 된 결과 파일을 다룰 때 사용 new webpack.optimize.UglifyJsPlugin({ // 번들링 된 파일을 난독화 compress: { warnings: false } }), // 번들링 된 js 파일을 html 파일에 넣어주는 역할 // html 마지막 부분에 번들링 된 js 파일이 호출될 수 있도록 script 엘리먼트로 추가하고 // /dist/js/index.html 파일을 생성해 주는 역할 new HtmlWebpackPlugin({ title: "Custom Template", template: "./src/ts/index.html" }) ], resolve: { extensions: [".ts", ".js"] } };

• ts-loader
  • 타입스크립트 로더로서, tsconfig.json 파일을 기준으로 타입스크립트 파일들을 컴파일을 한다.
  • 컴파일될 때, node_modules 디렉토리는 예외로 해야 하는데, exclude 속성에 해당 모듈을 작성해야 한다.

    tsconfig.json
  
    {
      "compilerOptions": {
        "module": "commonJs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
      },
      "exclude": [
        "node_modules",
      ],
    }

• webpack 명령어는 기본적으로 webpack.config.js 파일을 웹팩 설정 파일로 이용
  • 이 설정 파일을 사용자가 지정하는 파일로 바꾸려면 —config 옵션을 이용해야 한다.
    $ webpack --config webpack2.config.js
  • 매번 배포를 할 때마다, —config 옵션을 주어 빌드하는 것이 불편한 경우에는 상황에 따라 다른 설정 파일로 배포될 수 있도록 package.json에 옵션을 등록해 두면 좋다.

    package.json
  
    {
      ...
  
        "scripts": {
        "build": "webpack --config webpack.config.js",
        "build2": "webpack --config webpack2.config.js",
        "build3": "webpack --config webpack3.config.js",
      }
    }

• html-webpack-plugin 플러그인: 웹팩 실행 후 커스텀 index.html 페이지를 output 경로에 출력하고자 할 때
• 애플리케이션에서 메인 함수가 위치한 영역을 app이라는 namespace를 두었다고 한다.
• cf) underscore VS lodash lodash를 사용하는 것이 나아보인다.
  

• jQuery
  • $는 jQuery 패키지의 이름으로, jQuery의 타입 정의 파일인 index.d.ts에서 앰비언트 선언
    • cf) ambient?
      

      

      
      

      

  • 위 함수는 $(document).ready(){ … }의 축약형으로 페이지가 준비되면 호출된다.
  • jQuery 메인 함수에는 주로 DOM을 다루는 것과 관련한 로직을 추가하는 것이 좋음
  • DOM과 직접적인 관련이 없는 공통 모듈은 외부로 분리하는 것이 더 나음.
• $(function() { … })
• 스타터킷과 CLI
  • 스타터 킷이란?
    • 특정 라이브러리나 프레임워크를 빠르게 실행해 볼 수 있도록 만들어진 프로젝트
    • 특정 라이브러리의 개발 환경 구성을 잘 이해하고 있는 개발자가 미리 환경을 구성한다.
    • 미리 구축된 스타터 킷을 이용하여 환경 구축에 소요되는 시간을 절약할 수 있다.
    • 프로젝트 구성이나 실행에만 초점을 맞추기 때문에 테스트나 빌드와 같은 전문적인 작업을 처리해주지 않는다.
    • 따라서 복잡한 상황을 처리할 수 있는, 명령어 기반으로 프로젝트를 관리할 수 있는 최적의 환경인 CLI(Command Line Interface)를 이용하는 것이 좋다.
      • 프레임워크가 새로 나올 때, 그에 따라 CLI 환경을 함께 제공해 개발환경 구축, 설정과 관련된 문제에 대해 쏟는 시간을 최소화할 수 있도록 돕는다.