개발 환경 설정 (Node.js, VS Code, TSC)

타입스크립트 개발을 위한 효율적인 환경 설정은 생산성 향상에 큰 도움이 됩니다.

이 절에서는 Node.js, Visual Studio Code, 그리고 TypeScript Compiler(TSC)를 중심으로 개발 환경을 구축하는 방법을 상세히 알아보겠습니다.

Node.js 설치 및 버전 관리

1. Node.js 설치

공식 웹사이트(https://nodejs.org)에서 LTS 버전 다운로드 및 설치

2. nvm(Node Version Manager) 사용

설치: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
사용법

nvm install 14.17.0  # 특정 버전 설치
nvm use 14.17.0      # 특정 버전 사용
nvm alias default 14.17.0  # 기본 버전 설정

Visual Studio Code 설정

1. VS Code 설치

https://code.visualstudio.com 에서 다운로드 및 설치

2. 타입스크립트 관련 주요 확장 프로그램

TypeScript Extension Pack
ESLint
Prettier - Code formatter

설치 방법 : VS Code의 확장 탭(Ctrl+Shift+X)에서 검색 후 설치

TypeScript Compiler 설치 및 사용

전역 설치

npm install -g typescript

기본 사용법

tsc file.ts          # 단일 파일 컴파일
tsc file.ts --watch  # 파일 변경 감지 및 자동 컴파일

tsconfig.json 설정

프로젝트 초기화

tsc --init

주요 설정 옵션

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

target : 컴파일된 JavaScript의 ECMAScript 버전
module : 모듈 시스템 (commonjs, es6 등)
strict : 엄격한 타입 체킹 활성화
outDir : 컴파일된 파일의 출력 디렉토리
rootDir : 소스 파일의 루트 디렉토리

프로젝트에 맞는 최적 설정

라이브러리 개발 : declaration: true 추가
브라우저 타겟팅 : lib: ["dom", "es6"] 설정
Node.js 백엔드 : module: "commonjs" 유지

VS Code에서의 타입스크립트 코딩

1. 파일 편집

.ts 확장자 파일 생성
자동 완성 및 타입 추론 활용

2. 디버깅 설정

launch.json 파일 생성 (Debug 탭 → Add Configuration)

.vscode/launch.json

{
  "type": "node",
  "request": "launch",
  "name": "Debug TypeScript",
  "program": "${workspaceFolder}/src/index.ts",
  "preLaunchTask": "tsc: build - tsconfig.json",
  "outFiles": ["${workspaceFolder}/dist/**/*.js"]
}

3. 디버깅 시작 : F5 키 또는 Debug 탭에서 "Start Debugging" 클릭

유용한 VS Code 단축키 및 기능

Ctrl+Space : 자동 완성
F12 : 정의로 이동
Shift+F12 : 참조 찾기
Ctrl+. : 빠른 수정 및 리팩토링
Ctrl+Shift+R : 리팩토링 메뉴
F8 : 다음 오류/경고로 이동

프로젝트 의존성 관리

npm 사용

npm init -y              # package.json 생성
npm install typescript   # 로컬 설치
npm install @types/node  # Node.js 타입 정의

yarn 사용

yarn init -y
yarn add typescript
yarn add @types/node

주요 타입스크립트 관련 패키지

ts-node : TypeScript 실행기
@types/* : 다양한 라이브러리의 타입 정의
tslint 또는 eslint : 린팅 도구

개발 환경에서의 자동 컴파일

ts-node 사용

npm install --save-dev ts-node
npx ts-node src/index.ts

nodemon과 함께 사용

npm install --save-dev nodemon
nodemon --exec ts-node src/index.ts

package.json 스크립트 설정

package.json

"scripts": {
  "start": "ts-node src/index.ts",
  "dev": "nodemon --exec ts-node src/index.ts"
}

효율적인 타입스크립트 개발을 위한 팁

1. 일관된 코드 스타일 유지

Prettier 설정 파일 (.prettierrc) 사용

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100
}

2. 린팅 설정

ESLint 설정 파일 (.eslintrc.js) 사용

.eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
};

3. Git 훅 설정

Husky를 사용하여 커밋 전 린팅 및 포맷팅 적용

npm install --save-dev husky lint-staged

package.json에 추가

package.json

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.ts": ["eslint --fix", "prettier --write"]
}

4. VS Code 작업 영역 설정

.vscode/settings.json 파일 생성

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.updateImportsOnFileMove.enabled": "always"
}

5. 타입 정의 파일 (.d.ts) 활용

서드파티 라이브러리 사용 시 @types 패키지 설치
필요한 경우 직접 타입 정의 파일 작성

타입스크립트 개발 환경을 효과적으로 설정하는 것은 생산성과 코드 품질 향상에 큰 도움이 됩니다. Node.js와 nvm을 사용하여 JavaScript 런타임을 관리하고, Visual Studio Code를 주 IDE로 사용하며, TypeScript Compiler를 통해 코드를 컴파일하는 것이 일반적인 접근 방식입니다.

Node.js 설치 시 nvm을 사용하면 여러 버전의 Node.js를 쉽게 관리할 수 있어, 프로젝트별로 다른 버전을 사용해야 할 때 유용합니다. VS Code는 타입스크립트에 대한 기본적인 지원을 제공하지만, 추가 확장 프로그램을 통해 더욱 강력한 개발 환경을 구축할 수 있습니다.

TypeScript Compiler(TSC)는 타입스크립트 코드를 자바스크립트로 변환하는 핵심 도구입니다. tsconfig.json 파일을 통해 컴파일러 옵션을 세밀하게 조정할 수 있으며, 이는 프로젝트의 요구사항에 맞게 설정해야 합니다.

VS Code에서 타입스크립트 파일을 편집할 때, 자동 완성, 타입 추론, 빠른 수정 등의 기능을 활용하면 생산성을 크게 높일 수 있습니다. 또한 내장된 디버거를 사용하면 타입스크립트 코드를 직접 디버깅할 수 있어 개발 과정이 더욱 수월해집니다.

프로젝트 의존성 관리를 위해 npm이나 yarn을 사용하며, 타입스크립트 관련 패키지들을 효과적으로 관리할 수 있습니다. 특히 @types 패키지들은 자바스크립트 라이브러리를 타입스크립트에서 사용할 때 매우 유용합니다.

개발 과정에서 코드 변경을 감지하고 자동으로 컴파일하는 것은 생산성 향상에 큰 도움이 됩니다. ts-node와 nodemon을 조합하여 사용하면 이러한 자동화를 쉽게 구현할 수 있습니다.

마지막으로 일관된 코드 스타일 유지, 린팅 설정, Git 훅 활용, VS Code 작업 영역 설정 등을 통해 더욱 효율적이고 체계적인 개발 환경을 구축할 수 있습니다. 이러한 도구와 설정들을 적절히 활용하면 코드 품질을 높이고 팀 협업을 원활하게 할 수 있습니다.

타입스크립트 개발 환경 설정은 초기에 시간이 소요될 수 있지만 장기적으로 봤을 때 개발 생산성과 코드 품질 향상에 큰 도움이 됩니다.

지속적인 학습과 도구의 업데이트를 통해 최적의 개발 환경을 유지하는 것이 중요합니다.

이전으로 다음으로