6 모듈화 진행을 위한 프로젝트 환경 구성 안내

source: categories/study/typescript-advanced/typescript-advanced6.md

6.1 모듈화 진행을 위한 프로젝트 환경 구성 안내

앞시간까지 명시적인 any 선언하기를 위해 tsconfig.json 파일에 noImplicitAny: true를 추가하고 나오는 에러들을 살펴봤다.
그리고 나머지 에러들을 살펴보기 전에 이후에 진행되는 과정들, 내용들에 대해서 좀 더 편하게 진행을 하려면
이 시점에서 프로젝트의 설정들을 좀 더 추가하고,
예를 들어서 ESLint라던가 prettier같은 문법 보조 도구들, 이런 것들을 추가를 해서 모듈화도 진행을하고 그러면 좋을 거 같다.

그래서 이번 시간엔 프로젝트 설정에 대해 추가로 진행을 할 것이다.

6.1.1 앞시간에 추가한 설정

• 명시적인 any 선언하기

  • 프로젝트 테스트 코드가 통과하는지 확인한다.
  • 타입스크립트 설정 파일에 noImplicitAny: true를 추가한다.
  • 가능한 타입을 적용할 수 있는 모든 곳에 타입을 적용한다.
    • 라이브러리를 쓰는 경우 DefinitelyTyped에서 @types 관련 라이브러리를 찾아 설치한다. (아직 axios, chart쪽 에러들을 못잡은 상태이다.)
    • 만약, 타입을 정하기 어려운 곳이 있으면 명시적으로라도 any를 선언한다.
  • 테스트 코드가 통과하는지 확인한다.

6.1.2 모듈화 과정을 진행하기 위한 프로젝트 설정 (타입스크립트 프로젝트 환경 구성)

1. 프로젝트 폴더 생성
2. npm init -y로 package.json 파일 생성
3. 아래 명령어로 타입스크립트 및 문법 검사, 코드 정리 도구 라이브러리 추가

npm i -D typescript @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier

1. 프로젝트 폴더 바로 아래에 ESLint 설정 파일 추가

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        useTabs: false,
        tabWidth: 2,
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
};

1. ESLint 이그노어 파일 추가

// .eslintignore
node_modules

VSCode ESLint 플러그인 관련 설정

1. VSCode의 ESLint 플러그인 설치
2. VSCode에서 ctrl + shift + p / cmd + shift + p 키를 이용하여 명령어 실행 창 표시
3. 명령어 실행 창에 open settings (json) 입력 후 선택

1. VSCode 사용자 정의 파일인 settings.json 파일의 내용에 아래와 같이 ESLint 플러그인 관련 설정 추가.

{
  // ... <-- 기존 내용을 꼭 유지한 상태에서 아래 내용을 추가하고 이 주석은 제거할 것
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.workingDirectories": [
      {"mode": "auto"}
  ],
  "eslint.validate": [
      "javascript",
      "typescript"
  ]
}

1. ctrl + , 또는 cmd + , 눌러서 VSCode 설정 파일(Settings)에 들어간 후 format on save 검색. 아래와 같이 체크가 안되어 있는지 확인.

6.2 프로젝트 라이브러리 설치

npm i -D typescript @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier

typescript는 브라우저에 올라가서 실행되는 라이브러리가 아니기 때문에 dependencies에 들어갈 필요가 없다.
즉, devDependencies에 들어가면되기 때문에 위와 같이 -D 플래그로 설치한다.
앞시간엔 빠르게 진행하기위해서 npm i typescript로 dependencies에 들어가도록 설치를 했는데, 현재시점부터는 실제 프로젝트환경, 실제서비스 환경에서의 라이브러리의 위치까지 정의해나가면서 진행해나가도록 하겠다.

• dependencies: 실제 배포시에도 함께 나가야하는 라이브러리(jQuery, react, vue…)
• devDependencies: 개발할 때만 필요한 라이브러리(eslint, typescript, prettier, babel…)

6.3 ESLint 설정 후 ESLint 플러그인 에러 해결

• 프로젝트 폴더 바로 아래에 ESLint 설정 파일 추가

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        useTabs: false,
        tabWidth: 2,
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
};

.eslintrc.js 파일 설정 후 위와 같이 에러잡히는 것들 해결 방법.
아래는 웹스톰 기준 해결 방법이다.

위와 같이 원래는 보이지 않았던 에러들이 하나, 둘씩 보이기 시작할 것이다.

6.4 웹스톰 ESLint 자동 fix 설정

6.5 바벨 소개

{
  "name": "project",
  "version": "1.0.0",
  "description": "최종 프로젝트 폴더입니다",
  "main": "src/app.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-typescript": "^7.15.0",
    "@typescript-eslint/eslint-plugin": "^4.29.1",
    "@typescript-eslint/parser": "^4.29.1",
    "eslint": "^7.32.0",
    "eslint-plugin-prettier": "^3.4.0",
    "prettier": "^2.3.2",
    "typescript": "^4.3.5"
  }
}

1. babel: babel is javascript compiler.
   최신 자바스크립트 문법을 보다 더 많은 브라우저에서 돌아갈 수 있게 컴파일해주는 도구이다.

   

   즉, targets 옵션에 defaults, not ie 11, not ie_mob 11를 입력하면 IE11은 제외하고 컴파일하고,
   이를 지우고 돌리면 IE11에서도 돌아가도록 컴파일한다.

   • https://babeljs.io/docs/en/babel-preset-env.html#targets

     

6.6 바벨 추가 설명

• 바벨Docs
• 바벨Docs - 타입스크립트

preset이라는 것은 보통 플러그인의 집합을 뜻한다.
바벨 같은 경우에는 플러그인의 집합에 더해 옵션들까지 집합해놓은 것으로써 특정 값들의 집합이라고 보시면 될 것 같다.

• 바벨Docs - configuration

tsc 명령어와 같이 babel 명령어로도 위와 같이 컴파일 명령을 할 수 있다.

{
  "name": "project",
  "version": "1.0.0",
  "description": "최종 프로젝트 폴더입니다",
  "main": "src/app.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-typescript": "^7.15.0",
    "@typescript-eslint/eslint-plugin": "^4.29.1",
    "@typescript-eslint/parser": "^4.29.1",
    "eslint": "^7.32.0",
    "eslint-plugin-prettier": "^3.4.0",
    "prettier": "^2.3.2",
    "typescript": "^4.3.5"
  }
}

1. @babel/core: 바벨 기본 코어
2. @babel/preset-env, @babel/preset-typescript: 타입스크립트 컴파일을 위한 preset

6.7 ESLint 소개

• ESLint

Find and fix problems in your JavaScript Code.

쉽게 말해서 나중에 실제 배포로 서비스를 올렸을 때, 날만한 에러, 버그들을 코드수준에서 미리 잡아준다고 보면된다.
잠재적인 에러를 줄여주는 코드 문법 보조도구라고 보면된다.
ESLint를 쓰는 이유로 코드의 자동완성이라던가 자동으로 코드의 formatting을 정리해주는 부분도 있다.

이따 보게될 prettier와 같이 쓰게되면 개인이 좀 더 좋아하는 코딩 컨벤션을 ESLint와 함께 녹여낼 수 있기 때문에 보통 ESLint와 Prettier를 함께 많이 사용한다.

6.8 ESLint 추가 설명

• ESLint - Getting Started
• ESLint - Configuration

위와 같이 세미콜론을 안붙이면 error로 잡거나, warning으로 잡거나, 아니면 아예 안 잡거나 등등을 설정할 수 있다.
quotes 문자열을 작성할 때 따옴표로 작성할지 아니면 쌍따옴표로 작성할지도 다 정의할 수 있다.

위와 같은 설정들은 Prettier에서도 할 수 있기 때문에, 위와 같은 것들은 Prettier의 설정을 들고와서 ESLint의 벨리데이션 효과까지 같이 넣는걸로 해보겠다.

바로 다음 시간에 ESLint 설정 파일에 대해 살펴보도록 하겠다.
설정 파일을 js, yml, json 형태로 만들 수 있는데, 저는 개인적으로 js 파일 형태를 선호한다.
그 이유가 js 파일엔 기본적으로 주석도 들어갈 수 있고, 다른 파일의 내용들을 병합하는 것도 보다 더 쉽게 할 수 있기 때문에 저는 보통 js를 선호한다.

파일명 앞에 .이 들어가있으면 숨김 파일이고 뒤에 rc가 붙어있으면 설정파일인데,
바벨 같은 경우도 .babelrc라고하면 바벨 설정 파일이 되는거고
이따 살펴볼 프리티어 같은 경우에도 .prettierrc하면 프리티어 설정 파일이 된다.

• ESLint - Configuring ESLint

저희가 프로젝트에서 사용하고있는 이런 옵션들은 타입스크립트를 돌리기위해서 ESLint나 바벨에서 가이드해준 플러그인과 설정들로 구성이된거기 때문에, 아 이런 것들로 설정했구나 라고 보시면된다.

6.9 ESLint 규칙 및 설정 파일 소개

• ESLint Rules
• ESLint Rules2

ESLint가 어떤 규칙을 가지고 파일들을 검사해나가는지를 설정한다.
fix라는 옵션을 쓰면 자동으로 고쳐주는 것까지 어느정도 가능하기 때문에 그런 것들에 대해 쭉 살펴보시면 좋을 거 같다.

{
  "name": "project",
  "version": "1.0.0",
  "description": "최종 프로젝트 폴더입니다",
  "main": "src/app.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-typescript": "^7.15.0",
    "@typescript-eslint/eslint-plugin": "^4.29.1",
    "@typescript-eslint/parser": "^4.29.1",
    "eslint": "^7.32.0",
    "eslint-plugin-prettier": "^3.4.0",
    "prettier": "^2.3.2",
    "typescript": "^4.3.5"
  }
}

• @typescript-eslint/eslint-plugin, @typescript-eslint/parser: ESLint로 타입스크립트 validation 할 때 좋은 라이브러리들.
• eslint, eslint-plugin-prettier

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [ // plugins의 집합 - 각 플러그인에 대한 rules도 다 들어있다.
    'eslint:recommended', // eslint에서 권장하는 옵션들로 validation 검사를 하겠다.
    'plugin:@typescript-eslint/eslint-recommended', // tslint라는 것도 있는데, 왜 eslint로도 typescript를 봐야되는지, 그 이유는 이따 보도록 하겠다.
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'], // 아래 rules와 같은 옵션들이 prettier, @typescript-eslint 각각 엄청 많이 들어가있을 것이다.
  rules: { // rules를 직접 정의할 수도 있다.
    'prettier/prettier': [ // 이따 prettier를 보면서 살펴보도록 하겠다.
      'error',
      {
        singleQuote: true,
        semi: true,
        useTabs: false,
        tabWidth: 2,
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
};

6.10 Prettier 소개

• prettier
• An opinionated code formatter: 의견이 반영된 코드 포멧터
  팀단위 코딩 컨벤션을 만들어 작업할 때 프리티어를 주로 이용한다.
  코드를 작성해나가면나갈수록 프리티어를 사용했냐 안했냐의 차이(가독성 차이)가 어마어마해지기 때문에 꼭 설정할 것을 추천드린다.
• 프리티어 Docs
• 프리티어 install

6.11 Prettier 옵션 및 프로젝트 설정 확인

• Configuring Prettier - Options - Print Width

  에디터에 한 줄에 몇자까지 코드를 입력할지 설정.
  특정 글자수 이상이되면 줄바꿈을 하게끔 해줌.

• Configuring Prettier - Options - Tab Width

  에디터 Tab 간격 설정.

• Configuring Prettier - Options - Semicolons

  세미콜론 붙일지말지 설정.

… 위와 같은 옵션들을 활용해 포멧팅 옵션들을 설정할 수 있다.

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [ // 프리티어 설정 관련 내용이다.
      'error', // 프리티어에 정의되어있는 규칙대로 작성이 안되면 에러로 간주하겠다 라는 뜻이다. // warn으로 설정한다면 error까진 아니고 경고로 나타낸다.
      {
        singleQuote: true, // 작은 따옴표를 쓰겠다.
        semi: true, // 세미콜론을 쓸 것이다.
        useTabs: false, // 탭은 사용하지 않겠다.
        tabWidth: 2, // 탭 간격은 2이다.
        printWidth: 80, // 프린트 너비는 80자이다.
        bracketSpacing: true, // 브라켓 공간이 있어야된다. // 이러한 옵션들을 개인 취향에 맞게 넣으면된다.
                              // 최대한 보수적인 코딩을 위해(에러방지) 세미콜론이나 콜론 같은 것은 true로 설정하는 것이 좋다.
        arrowParens: 'avoid',
      },
    ],
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
};

6.12 프로젝트 환경 구성 요약 정리

1. 프로젝트 폴더 생성
2. npm init -y로 package.json 파일 생성

3. 아래 명령어로 타입스크립트 및 문법 검사(ESLint), 코드 정리 도구(Prettier) 라이브러리 추가

    npm i -D typescript @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier
   

   Note

   • -D(= --seve-dev) devDependencies로 정리가 되게하는 플래그이다.
   • 바벨이란? 최신 자바스크립트 문법을 오래된 브라우저에서도 호환 가능한 자바스크립트로 변환해주는 도구이다. (컴파일 or 트랜스파일)
     @babel/core와 바벨에서 권고하고있는 @babel/preset-env, @babel/preset-typescript(타입스크립트용) 라이브러리들도 설치했다.
   • ESLint란? 자바스크립트 코드를 에러가 덜 나는 방향으로 작성하도록 도와주는 문법 보조 도구
     @typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint
   • prettier라는 정리 도구를 eslint 안에다가 써야되는 이유와 그리고 같이 썼을 때의 효과에 대해서도 간단하게 말씀드렸다.
     ESLint 안에도 코드 포멧터와 같은 느낌이 있지만 prettier라는 것이 좀 더 팀 코딩 컨벤션에 맞춰서 개인화를 할 수 있기 때문에 ESLint와 함께 사용하는 것을 추천드린다.

4. 프로젝트 폴더 바로 아래에 ESLint 설정 파일 추가

    // .eslintrc.js
    module.exports = {
      root: true,
      env: {
        browser: true,
        node: true,
      },
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
      ],
      plugins: ['prettier', '@typescript-eslint'],
      rules: {
        'prettier/prettier': [
          'error',
          {
            singleQuote: true,
            semi: true,
            useTabs: false,
            tabWidth: 2,
            printWidth: 80,
            bracketSpacing: true,
            arrowParens: 'avoid',
          },
        ],
      },
      parserOptions: {
        parser: '@typescript-eslint/parser',
      },
    };
   

5. ESLint 이그노어 파일 추가

    // .eslintignore
    node_modules
   

   

6.12.1 VSCode ESLint 플러그인 관련 설정

1. VSCode의 ESLint 플러그인 설치
2. VSCode에서 ctrl + shift + p / cmd + shift + p 키를 이용하여 명령어 실행 창 표시

3. 명령어 실행 창에 open settings (json) 입력 후 선택

   

4. VSCode 사용자 정의 파일인 settings.json 파일의 내용에 아래와 같이 ESLint 플러그인 관련 설정 추가.

    {
      // ... <-- 기존 내용을 꼭 유지한 상태에서 아래 내용을 추가하고 이 주석은 제거할 것
      "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true
      },
      "eslint.alwaysShowStatus": true,
      "eslint.workingDirectories": [
          {"mode": "auto"}
      ],
      "eslint.validate": [
          "javascript",
          "typescript"
      ],
    }
   

5. ctrl + , 또는 cmd + , 눌러서 VSCode 설정 파일(Settings)에 들어간 후 format on save 검색. 아래와 같이 체크가 안되어 있는지 확인.

   

6.12.2 ESLint를 타입스크립트에서 사용하는 이유

TSLint라고해서 타입스크립트 Lint가 있음에도 불구하고 그것을 사용하지않고 ESLint를 사용하는 이유.

• 깃헙이슈 29288

마이크로소프트에서 타입스크립트를 만들었다.
위 타입스크립트 저장소에 2019년 초에 열렸던 이슈이다.
Daniel이란 사람은 타입스크립트 개발팀을 관리하는 사람이라고 보면된다.

결론적으로 요약하자면 성능 이슈가 제일 컸던 것 같다.
마이크로소프트 타입스크립트 팀에서 관리하는 TSLint라는 도구가 있는데, 그 도구보다 기존의 ESLint가 훨씬 더 좋은 퍼포먼스를 냈기 때문에
ESLint 형태로 가는 것이라고 위 내용에 쓰여있다.

그래서 이때 이후부터 지금까지 계속해서 ESLint에 TSLint를 얹어서 사용하는 방향으로 가고 있다.