오늘

• Programmers algo
• toy project (todo List) 준비

지금

이번에 토이프로젝트를 위해 typescript 기초 세팅부터 할 수 있도록 준비 해보았다.

프로젝트 준비

node intialization

npm init -y

package.json 파일이 생성되고 해당 프로젝트에서 nodejs 기반 프로젝트로 설정 하게 된다.

react

npm i --save react react-dom

react, react-dom 설치

타입 정의 파일

$ npm install --save @types/react @types/react-dom

Typescript 설치

npm -i --save-dev typescript

TS 초기화

npx typescript --init

초기화를 의미하는 --init 옵션을 붙여 실행하면 tsconfig.json 파일이 자동으로 생성된다. 리액트 jsx 코드를 사용하기 위해서는 compilorOptions의 jsx 속성에 "react" 값을 추가해야 해야한다. (기본값은 주석 처리 되어 있다)

"compilorOptions": {
  "jsx": "react" // "preserve" => "react"

웹팩 빌드 환경 설정
먼저 타입스크립트 로더인 ts-loader와 웹팩 패키지를 설치한다.

$ npm install --save-dev ts-loader webpack webpack-cli

webpack.config.js 파일을 만들어 아래 내용으로 웹팩 설정을 구성한다. (root Dir)

module.exports = {
  mode: "development",

  // 엔트리 포인트
  entry: "./src/index.tsx",

  // 빌드 결과물을 dist/main.js에 위치
  output: {
    filename: "main.js",
    path: __dirname + "/dist",
  },

  // 디버깅을 위해 빌드 결과물에 소스맵 추가
  devtool: "source-map",

  resolve: {
    // 파일 확장자 처리
    extensions: [".ts", ".tsx", ".js"],
  },

  module: {
    rules: [
      // .ts나 .tsx 확장자를 ts-loader가 트랜스파일
      { test: /\.tsx?$/, loader: "ts-loader" },
    ],
  },
}

엔트리 포인트(entry)를 src/index.tsx로 설정한다.

빌드 결과(output)는 dist 폴더에 main.js로 만들 것이다.
디버깅을 위해 결과물에 소스맵을 추가한다(devtool). 특정 속성에서는 디버깅이 불가능하다
모듈이 타입스크립트 파일을 처리하기 위해 resolve.extensions 속성에 .ts, .tsx 확장자를 추가한다.
es6 코드를 바벨이 처리하는 것처럼 타입스크립트 코드를 ts-loader가 처리하도록 설정했다. .ts나 .tsx 파일을 ts-loader가 해석하라는 설정이다.

이렇게 웹팩 설정을 마치고 빌드 스크립트를 package.json에 등록한다.

{
  "scripts": {
    "build": "webpack"
  }
}

다음 명령어로 빌드 해주면

$ npm run build // yarn build

dist 폴더에 main.js과 main.js.map 파일이 생성된다.

내일

• 프로젝트 메인 페이지 구성 (TodoList)
• 정부지원금 관련 교육 이수
• 내일 수업
• 알고리즘