icon안동민 개발노트

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

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

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

Node.js 설치 및 버전 관리

 1. Node.js 설치

 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 설치

 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 작업 영역 설정 등을 통해 더욱 효율적이고 체계적인 개발 환경을 구축할 수 있습니다. 이러한 도구와 설정들을 적절히 활용하면 코드 품질을 높이고 팀 협업을 원활하게 할 수 있습니다.

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

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

이전으로다음으로