[TS] TypeScript 프로젝트 환경 구성하기

*  VSCode 에디터를 이용해 TypeScript 언어로 세팅된 프로젝트 만들기

 

[그림] TypeScript 언어를 인식하지 못하는 브라우저 콘솔 창

 

아직은 브라우저 콘솔 창에서 TypeScript 언어를 인식하기 어렵기 때문에, TypeScript로 코드를 작성하려면 사용하는 코드 에디터에 이를 세팅해야 한다.

 

TypeScript 프로젝트 환경 구성하기

1. 프로젝트 폴더 생성

먼저 프로젝트 폴더를 생성한다.

mkdir (폴더명)
cd (폴더명)

2. 프로젝트 초기화

프로젝트 폴더를 생성하고 난 뒤 프로젝트 폴더 안으로 이동하여, 터미널에서 npm init -y 명령어를 실행해 새로운 프로젝트를 초기화한다. 프로젝트 내부에서 npm을 사용할 준비가 되었다.

npm init -y

 

npm init -y 는 npm을 사용하여 새로운 프로젝트 또는 패키지를 초기화할 때 사용되는 명령이다.

-y 옵션은 모든 질문에 자동으로 기본값으로 응답하도록 설정하는 옵션이다. 일반적으로 npm init 명령을 실행하면 프로젝트 이름, 버전, 설명, entry point 등 등 프로젝트 또는 패키지에 대한 정보를 입력해야 한다. npm init -y 명령은 간편하게 기본 설정값으로 프로젝트를 초기화하고자 할 때 유용하다. 

3. TypeScript 설치 

TypeScript를 설치한다. 아래와 같이 전역으로 설치해도 되고, (터미널에서 자유롭게 사용하기 위함)

npm install -g typescript

 

해당 프로젝트에 한하여 개발 의존성(devDependency)으로만 설치해도 되겠다.

npm install typescript --save-dev

 

npm install typescript --save-dev 는 npm 패키지 관리자를 사용하여 TypeScript를 프로젝트에 개발(dev) 의존성(dependency)으로 설치하는 것을 의미한다.

개발 의존성은 주로 프로젝트의 개발 및 빌드 과정에서 필요한 도구, 테스트 라이브러리, 린팅 도구 등을 포함하며 이러한 종류의 패키지들은 실제로 프로덕션 환경에서 실행되지는 않고, 개발 및 테스트 작업에 사용된다. --save-dev 옵션을 사용하여 패키지를 설치하면 package.json 파일의 devDependencies 항목에 해당 패키지가 추가된다.

 

4. TypeScript 컴파일러 설정

프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성한 후, 아래의 내용을 넣는다.

• 이 파일은 TypeScript 컴파일러의 동작을 설정하는 데 사용된다.
• 이렇게 설정된 tsconfig.json 파일을 사용하면 TypeScript 컴파일러가 지정된 옵션에 따라 TypeScript 소스 코드를 컴파일하여 JavaScript로 변환하고, 설정된 출력 디렉토리에 결과 파일을 생성한다.

//tsconfig.json
//compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있다.
{
  "compilerOptions": {  // TypeScript 컴파일러의 옵션들
    "target": "es6",    // 컴파일된 JavaScript 코드의 ECMAScript 대상 버전을 지정 (ECMAScript 6 버전 사용)
    "module": "commonjs",  // 컴파일된 모듈 시스템을 지정 (CommonJS 모듈 시스템 사용)
    "sourceMap": true,  // 소스 맵 파일을 생성할지 여부를 지정 - 소스 맵은 컴파일된 JS 코드와 원본 TS 코드 간의 매핑을 제공하여 디버깅과 개발 과정에서 유용
    "outDir": "./dist"  // 컴파일된 JavaScript 파일들의 출력 디렉토리를 지정 (컴파일된 파일들이 "dist" 디렉토리에 저장)
  },
  "include": [
    "src/**/*"  // 컴파일할 TypeScript 소스 파일의 경로를 지정 ("src" 디렉토리와 그 하위 디렉토리에 있는 모든 TypeScript 파일을 포함)
  ]
}

 

 

5. TypeScript 코드 작성

이제 src 폴더 밑에 TypeScript 언어로 된 파일을 작성할 수 있다. src 폴더에 index.ts 파일을 만들어서 TypeScript 코드를 작성해 본다.

 

 

이렇게 하고 'Run Code'를 하면 아래와 같은 에러가 뜬다. 

 

6. ts-node 전역 설치

이유는 ts-node가 시스템에 설치되지 않았기 때문이다.

• ts-node는 TypeScript 파일을 실행하기 위한 실행 환경을 제공하는 도구이다.
• 일반적으로 TypeScript 코드를 실행하려면 TypeScript 컴파일러(tsc)를 사용하여 JavaScript로 변환한 후에 Node.js를 통해 실행해야 한다.
• ts-node를 사용하면 TypeScript 코드를 직접 실행할 수 있으므로 컴파일 단계를 거치지 않고도 빠르게 실행 및 디버깅할 수 있다.

• 'npm ls ts-node' 를 터미널에 입력하여 ts-node 패키지가 설치되어 있는지 확인 후, 설치되어 있지 않다면 아래와 같이 설치한다.
• 'npm install -g ts-node'
  • -g 는 해당 패키지를 전역으로 설치하겠다는 뜻이다.
  •  ts-node 패키지가 시스템 전체에서 사용할 수 있는 글로벌 패키지로 설치된다.
  • 전역으로 ts-node를 설치하는 이유는 여러 프로젝트에서 TypeScript를 사용할 때 편의성과 효율성을 높이기 위함이다.
  • 전역 설치된 ts-node를 사용하면 특정 프로젝트의 디렉토리에 직접 ts-node를 설치하거나 프로젝트의 의존성으로 추가할 필요가 없이 어디서든 TypeScript 코드를 실행할 수 있다.
    
  • 또한, 터미널에서 TypeScript 코드를 실행하거나 VS Code와 같은 통합 개발 환경에서 디버깅할 수 있다.

 

7.  tsc --project ./tsconfig.json

• 2번 과정인 typeScript를 전역으로 설치한 후, 4번 과정 tsconfig.json 파일을 세팅하고 난 후, 해당 명령어를 실행해본다.
• 아래를 보면 tsconfig.json에서 세팅해준 것과 같이 ./dist 폴더가 생기고 그 안에 컴파일된 JS 파일들이 생성된다.

 

 

// tsconfig.json 속 내용 

"outDir": "./dist"  

 

 

• 아래와 같이 index.ts에서 index.js로 컴파일된 모습을 볼 수 있다.

 

index.js.map은 소스 맵(Source Map)으로 원본 TS 소스 코드와 변환된 JS 코드 간의 매핑 정보를 담고 있다.

• TS가 JS로 변환되어 실행될 때 원본 코드와 변환된 코드 간에는 대응되는 위치가 달라질 수 있다.
• 소스 맵은 이러한 매핑 정보를 제공하여 디버깅 도구가 원본 TypeScript 코드의 위치를 정확히 추적할 수 있도록 도와준다.
• 주로 개발 환경에서 사용되며, 브라우저 개발자 도구 및 디버거 등에서 원본 TypeScript 코드를 디버깅할 때 활용된다.
• "version": 소스 맵 버전
• "file": 소스 맵이 연결된 JavaScript 파일의 경로
• "sourceRoot": 원본 TypeScript 소스 파일의 루트 경로 (비어있는 경우는 루트 경로를 가리키지 않음을 의미)
• "sources": 변환되기 전의 원본 TypeScript 소스 파일의 경로 
• "names": 소스 코드에서 사용된 이름의 배열 
• "mappings": 변환된 JavaScript 코드와 원본 TypeScript 코드 간의 매핑 정보 
  • 주어진 소스 맵의 "mappings" 속성은 변환된 JavaScript 코드와 원본 TypeScript 코드 간의 매핑 정보를 나타내는 Base64-VLQ 문자열이다.
  • 이 문자열은 여러 섹션으로 구성되어 있고, 각 섹션은 다른 섹션과의 상대적인 위치 차이를 나타낸다.
  • 상세한 해석은 소스 맵 인코딩 방식에 기반하여 이루어진다.

 

 

TypeScript ESLint 설정하기

TypeScript는 2020년까지만 TSLint를 지원하고, 이후부터는 typescript-eslint를 사용해야 한다. 만일 TypeScript 프로젝트에서 ESLint나 Prettier를 사용하고 싶다면, 아래의 안내를 따른다.

 

1. ESLint 설치

VSCode 에디터를 사용할 것이므로, 확장 프로그램인 ESLint를 설치한다.

2. VC 에디터 설정

VSCode 에디터에서 cmd + shift + p 를 입력한다.

• Open User Settings (JSON) 탭을 누르면 사용자 설정으로 들어간다.
• 아래의 내용을 넣어준다.
• + 기존에 설치한 확장 프로그램들이 있다면 안이 채워져 있을 수 있다. 이 경우에는 그 밑에 바로 내용을 넣어준다.

  // Visual Studio Code의 설정 파일인 settings.json은 에디터의 동작 및 환경을 구성하는 데 사용된다.
  // JS 또는 TS 프로젝트에서 ESLint를 사용하여 코드 스타일 및 오류 검사를 자동으로 수행하고 관리하는 데 사용된다. 
  // ... 
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true // 파일 저장 시 실행할 코드 액션 설정 (ESLint를 실행하여 모든 문제를 자동으로 수정하도록 설정)
  },
  "eslint.alwaysShowStatus": true, // 항상 ESLint의 상태를 표시할지 여부 설정 (상태 바에 ESLint 검사 결과가 표시되도록 함)
  "eslint.workingDirectories": [
      {"mode": "auto"}   // ESLint를 실행할 작업 디렉토리 설정 (자동으로 작업 디렉토리를 감지하도록 함)
  ],
  "eslint.validate": [ // 검사할 파일의 유형을 설정 (여기서는 JavaScript와 TypeScript 파일을 검사하도록 설정)
      "javascript",   
      "typescript"
  ],
}

 

3. format on save 해제

마지막으로 VSCode 에디터 설정 중 format on save가 설정되어 있는지 확인한다. 

• 되어 있다면 설정을 해제한다.
• 설정으로 이동하는 커맨드는 cmd + , 이다.

 

Prettier 설정하기

 

1. Prettier 설치

Prettier 확장 프로그램도 설치한다.
 

2. 패키지 설치

이어 npm을 사용하여 몇 가지 필요한 프리셋과 라이브러리를 개발 의존성(dependency)으로 설치한다.

• @babel/core: Babel의 핵심 엔진으로, JavaScript 코드를 변환하여 출력 
  • @babel/preset-env: 변환할 JavaScript 문법을 설정하고, 목표 환경에 맞는 변환을 자동으로 적용
  • @babel/preset-typescript: TypeScript 코드를 JavaScript로 변환 (TypeScript 프로젝트에서 Babel을 사용할 때 필요)
• eslint: JavaScript 및 TypeScript 코드의 정적 분석을 수행하는 도구로 코드 스타일을 강제하고 일반적인 프로그래밍 오류 검출
  • @typescript-eslint/eslint-plugin 및 @typescript-eslint/parser: TypeScript 프로젝트에서 ESLint를 사용하여 TypeScript 코드를 정적 분석하고 오류를 찾을 때 필요
• prettier: 코드 포맷터 도구로, 일관된 코드 스타일을 적용하고 가독성을 향상 
• eslint-plugin-prettier: ESLint와 Prettier를 통합하여 ESLint에서 Prettier의 코드 포맷팅 규칙을 실행하고 충돌을 방지

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

 

[아까 eslint extension 설치를 했는데 왜 또 npm에서 eslint를 설치할까?]

ESLint는 개발 도구로서 패키지(dependency)와 확장(extension) 두 가지의 주요 구성 요소로 구성된다

패키지(dependency): eslint 패키지는 프로젝트의 개발 의존성(dependency)으로 설치된다. 이 패키지는 실제로 ESLint의 핵심 엔진을 포함하고 있으며, JavaScript 및 TypeScript 코드의 정적 분석을 수행한다. 

확장(extension): ESLint는 Visual Studio Code와 같은 통합 개발 환경(IDE)에서도 사용할 수 있도록 확장(extension)을 제공한다. 즉, IDE 자체에 ESLint를 통합하여 코드 편집기 내에서 실시간으로 ESLint 검사 결과를 표시하고, 자동 수정 옵션 등을 제공한다. 

 

 

3. eslintrc.js 파일 생성

프로젝트 폴더 밑에 .eslintrc.js 파일을 만들고 이하 내용을 붙여 넣는다.

• 해당 파일 내부에는 prettier와 typescript-eslint에 대한 설정이 되어 있으며, 리액트를 위한 설정도 일부 첨가되어 있다.
• rules 내에 작성이 되어 있는 내용들은 옵션으로, 전부 작성할 필요 없이 필요에 따라 작성해도 되고, 작성하지 않아도 상관없다.
• 이러한 설정을 사용하여 ESLint는 프로젝트의 JavaScript 및 TypeScript 코드를 분석하고, 지정된 규칙에 따라 코드의 품질을 검사한다.
• 이를 통해 원하는 규칙, 환경, 플러그인 등을 조합하여 개발자들이 일관된 코드 스타일을 유지하고 문제를 사전에 감지할 수 있도록 도와준다.

// ESLint의 설정 파일인 .eslintrc.js은 ESLint에서 사용할 규칙 및 구성을 정의하는 데 사용된다.

module.exports = {
  root: true,  // ESLint 설정 파일이 프로젝트의 루트 디렉토리에서 시작
  env: {  // 프로젝트에서 사용되는 환경을 설정 (브라우저 환경, Node.js 환경, Jest 환경 사용)
    browser: true,  
    node: true,
    jest: true,
  },
  extends: [ // 다른 ESLint 구성을 확장하여 사용 
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'], // 사용할 ESLint 플러그인을 지정
  rules: { // 사용자 정의 규칙을 지정
    'prettier/prettier': [  // Prettier 스타일 가이드를 따르도록 함
      'error',  // 이 규칙을 위반할 경우, 오류로 간주 됨
      {
        singleQuote: true,
        tabWidth: 2,  // tab의 너비는 2
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
    '@typescript-eslint/no-explicit-any': 'off', // 'any' 타입의 사용을 방지하도록 하는 규칙을 끔
    '@typescript-eslint/explicit-function-return-type': 'off', // 함수의 반환 타입을 명시적으로 선언하도록 하는 규칙을 끔
    'prefer-const': 'off', // 변경되지 않는 변수에 대해서 'const'를 사용하도록 권장하는 규칙을 끔
  },
  parserOptions: {
    parser: '@typescript-eslint/parser', // TypeScript 코드를 파싱하도록 설정
  },
};