웹 개발을 위한 Dynamic Duo

로

타입스크립트는 현재 많은 조직에서 가장 선호하는 프로그래밍 언어 중 하나로 자리매김했습니다.

타입스크립트는 자바스크립트의 상위 집합으로, 컴파일 과정을 거치며 엄격한 타입 체계를 갖춘 언어입니다. 마이크로소프트에서 개발하고 유지 관리하는 이 정적 타입 언어는 자바스크립트와 마찬가지로 객체 지향적 프로그래밍 개념을 지원합니다.

이 오픈 소스 언어는 웹, 대규모 시스템, 모바일 애플리케이션 개발 등 다양한 분야에서 활용됩니다. 타입스크립트는 프론트엔드와 백엔드 개발 모두에 사용될 수 있으며, 개발 과정을 간소화하고 활용 범위를 넓혀주는 다양한 프레임워크와 라이브러리가 존재합니다.

그렇다면 왜 Node.js 환경에서 타입스크립트를 사용해야 할까요? 이 글에서는 타입스크립트가 자바스크립트보다 “더 나은” 선택으로 여겨지는 이유, Node.js 환경에서 타입스크립트를 설치하는 방법, 그리고 타입스크립트와 Node.js를 함께 사용하여 간단한 프로그램을 구성하고 만드는 과정을 상세히 알아보겠습니다.

Node.js와 함께 사용하는 타입스크립트의 장점

  • 선택적인 정적 타이핑: 자바스크립트는 동적 타이핑 언어입니다. 이는 변수의 데이터 타입이 컴파일 시점이 아닌 런타임에 결정된다는 의미입니다. 반면, 타입스크립트는 선택적 정적 타이핑을 제공하여, 변수 선언 시 지정된 타입이 변경되지 않고 해당 타입의 값만 사용할 수 있도록 보장합니다.
  • 예측 가능성 향상: 타입스크립트를 사용하면, 개발자가 정의한 대로 모든 것이 일관성 있게 유지된다는 확신을 가질 수 있습니다. 예를 들어, 특정 변수를 Boolean 타입으로 선언했다면, 코드 실행 중 문자열 타입으로 변경될 위험이 없습니다. 이는 개발자에게 코드의 동작을 예측 가능하게 만들어줍니다.
  • 초기 버그 발견 용이: 타입스크립트는 대부분의 타입 관련 오류를 개발 초기 단계에서 감지할 수 있게 해주어, 프로덕션 환경에서 발생할 수 있는 오류의 가능성을 크게 줄여줍니다. 따라서 엔지니어는 코드 테스트에 소요되는 시간을 줄일 수 있습니다.
  • 대부분의 IDE 지원: 타입스크립트는 대부분의 통합 개발 환경(IDE)에서 완벽하게 지원됩니다. 이러한 IDE들은 코드 자동 완성 및 구문 강조 기능을 제공하여 개발 생산성을 높입니다. 본 문서에서는 마이크로소프트에서 개발한 Visual Studio Code를 사용합니다.
  • 코드 리팩토링의 용이성: 타입스크립트는 프로그램의 동작 변경 없이도 앱을 업데이트하거나 리팩토링할 수 있도록 지원합니다. 특히 내비게이션 도구와 코드 이해를 돕는 IDE의 기능을 활용하면 코드베이스를 효율적으로 리팩토링할 수 있습니다.
  • 기존 패키지 활용 가능: 처음부터 모든 것을 만들 필요가 없습니다. 타입스크립트는 기존의 NPM 패키지들을 그대로 사용할 수 있으며, 타입 정의 파일을 유지하고 생성하는 활발한 커뮤니티 덕분에 다양한 패키지들을 타입 안정성을 확보한 채 사용할 수 있습니다.

Node.js 환경에서 타입스크립트 사용하는 방법

타입스크립트는 여러 장점을 가지고 있지만, 최신 브라우저는 타입스크립트 코드를 직접적으로 실행할 수 없습니다. 따라서 브라우저에서 타입스크립트 코드를 실행하려면, 먼저 자바스크립트 코드로 변환하는 과정이 필요합니다. 이 변환된 코드는 원래 타입스크립트 코드와 동일한 기능은 물론, 자바스크립트에서는 사용할 수 없는 추가적인 기능까지 제공합니다.

필수 조건

  • Node.js: Node.js는 브라우저 환경 외부에서 자바스크립트 코드를 실행할 수 있도록 해주는 크로스 플랫폼 런타임 환경입니다. 컴퓨터에 Node.js가 설치되어 있는지 확인하려면 다음 명령어를 사용합니다.

node -v

만약 Node.js가 설치되어 있지 않다면, 공식 웹사이트에서 다운로드하여 설치할 수 있습니다. 설치 후, 위 명령어를 다시 실행하여 정상적으로 설치되었는지 확인합니다.

  • Node Package Manager: NPM 또는 Yarn과 같은 패키지 관리자를 사용할 수 있습니다. NPM은 Node.js 설치 시 기본적으로 함께 설치됩니다. 본 문서에서는 NPM을 패키지 관리자로 사용합니다. 현재 버전 확인을 위해 다음 명령어를 사용합니다.

npm -v

Node.js를 사용한 타입스크립트 설치

1단계: 프로젝트 폴더 설정

먼저 타입스크립트 프로젝트를 위한 폴더를 생성합니다. 이 폴더의 이름은 자유롭게 지정할 수 있습니다. 다음 명령어를 사용하여 폴더를 생성하고 해당 폴더로 이동합니다.

mkdir typescript-node

cd typescript-node

2단계: 프로젝트 초기화

npm을 사용하여 프로젝트를 초기화합니다. 다음 명령어를 실행합니다.

npm init -y

위 명령어는 `package.json` 파일을 생성합니다. `-y` 플래그는 npm에게 기본값을 사용하도록 지시합니다. 생성된 `package.json` 파일은 다음과 유사한 형태를 갖습니다.

{
    "name": "typescript-node",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
  }

Node.js 환경에서 타입스크립트 설정

1단계: 타입스크립트 컴파일러 설치

이제 프로젝트에 타입스크립트 컴파일러를 설치합니다. 다음 명령어를 실행합니다.

npm install --save-dev typescript

명령줄에 다음과 같은 결과가 출력됩니다.

added 1 package, and audited 2 packages in 26s
found 0 vulnerabilities

참고: 위 방식은 타입스크립트를 현재 작업 중인 프로젝트 폴더에 로컬로 설치하는 방식입니다. 시스템 전체에 타입스크립트를 설치하면, 매번 프로젝트마다 설치할 필요가 없습니다. 시스템 전체에 설치하려면 다음 명령어를 사용합니다.

npm install -g typescript

타입스크립트 설치를 확인하기 위해 다음 명령어를 사용할 수 있습니다.

tsc -v

2단계: 타입스크립트용 Ambient Node.js 타입 추가

타입스크립트에는 Implicit, Explicit, Ambient 등 다양한 타입이 있습니다. Ambient 타입은 전역 실행 범위에 항상 추가됩니다. Ambient 타입을 추가하려면 다음 명령어를 실행합니다.

npm install @types/node --save-dev

3단계: `tsconfig.json` 파일 생성

`tsconfig.json` 파일은 타입스크립트 컴파일 옵션을 지정하는 설정 파일입니다. 다양한 컴파일 옵션이 정의된 다음 명령어를 실행하여 파일을 생성합니다.

npx tsc --init --rootDir src --outDir build
--esModuleInterop --resolveJsonModule --lib es6
--module commonjs --allowJs true --noImplicitAny true

터미널에 다음과 같은 메시지가 출력됩니다.

`tsconfig.json` 파일이 생성되었으며, 일부 기본값과 설명이 포함되어 있습니다.

위에서 설정한 옵션은 다음과 같습니다.

  • `rootDir`은 타입스크립트 코드를 찾을 위치를 지정합니다. 여기서는 `/src` 폴더로 설정하여 해당 폴더에 코드를 작성하도록 했습니다.
  • `outDir` 폴더는 컴파일된 코드가 저장될 위치를 정의합니다. 코드는 `build/` 폴더에 저장되도록 구성되어 있습니다.

Node.js 환경에서 타입스크립트 사용

1단계: `src` 폴더 및 `index.ts` 파일 생성

이제 기본적인 구성이 완료되었습니다. 간단한 타입스크립트 앱을 만들고 컴파일할 준비가 되었습니다. 타입스크립트 파일의 확장자는 `.ts`입니다. 이전 단계에서 생성한 폴더 내에서 다음 명령어를 실행합니다.

mkdir src

touch src/index.ts

2단계: 타입스크립트 파일(`index.ts`)에 코드 추가

다음과 같이 간단한 코드로 시작할 수 있습니다.

console.log('Hello world!')

3단계: 타입스크립트 코드를 자바스크립트 코드로 컴파일

다음 명령어를 실행합니다.

npx tsc

빌드 폴더(`build/index.js`)를 확인해보면, `index.js` 파일이 생성된 것을 확인할 수 있습니다.

타입스크립트 코드가 자바스크립트 코드로 성공적으로 컴파일되었습니다.

4단계: 컴파일된 자바스크립트 코드 실행

타입스크립트 코드는 브라우저에서 직접 실행할 수 없습니다. 따라서 `build` 폴더의 `index.js` 파일을 실행해야 합니다. 다음 명령어를 실행합니다.

node build/index.js

다음과 같은 결과가 출력됩니다.

5단계: 자바스크립트 코드로 자동 컴파일되도록 타입스크립트 설정

타입스크립트 파일을 변경할 때마다 매번 수동으로 코드를 컴파일하는 것은 매우 비효율적입니다. `ts-node`(컴파일을 기다리지 않고 타입스크립트 코드를 직접 실행) 및 `nodemon`(코드 변경 사항을 감지하고 서버를 자동으로 재시작)을 설치하여 이 과정을 자동화할 수 있습니다.

다음 명령어를 실행합니다.

npm install --save-dev ts-node nodemon

이제 `package.json` 파일을 열어 다음과 같이 `scripts` 항목을 수정합니다.

  "scripts": {
    "start": "ts-node ./src/index.ts"
  }

간단한 예제를 위해 새로운 코드 블록을 사용할 수 있습니다.

function sum (num1:number, num2:number, num3:number){
    return num1 + num2 +num3;
}

console.log(sum(10,15,30))

`index.js` 파일(`build/index.js`)을 삭제하고 `npm start`를 실행합니다.

다음과 유사한 결과를 얻을 수 있습니다.

3개의 숫자의 합

eslint를 사용한 타입스크립트 Linting 설정

1단계: eslint 설치

Linting은 코드의 일관성을 유지하고 런타임 전에 잠재적인 오류를 발견하는 데 유용합니다. eslint를 설치하려면 다음 명령어를 사용합니다.

npm install --save-dev eslint

2단계: eslint 초기화

다음 명령어를 사용하여 eslint를 초기화할 수 있습니다.

npx eslint --init

초기화 과정은 몇 단계를 거치게 됩니다. 다음 스크린샷을 참고하여 안내를 받으세요.

초기화 과정이 끝나면 `.eslintrc.js` 파일이 생성됩니다. 파일 내용은 다음과 유사할 것입니다.

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: 'standard-with-typescript',
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
  }
}

3단계: eslint 실행

확장자가 `.ts`인 모든 파일을 대상으로 eslint를 실행하여 코드를 검사하려면 다음 명령어를 실행합니다.

npx eslint . --ext .ts

4단계: `package.json` 파일 업데이트

자동 Linting을 위해 `package.json` 파일에 Lint 스크립트를 추가합니다.

  "scripts": {
    "lint": "eslint . --ext .ts",
  },

Node.js 환경에서 타입스크립트 사용 모범 사례

  • 타입스크립트 최신 버전 유지: 타입스크립트 개발팀은 지속적으로 새로운 버전을 출시합니다. 컴퓨터 또는 프로젝트 폴더에 항상 최신 버전이 설치되어 있는지 확인하고, 새로운 기능과 버그 수정의 이점을 누리세요.
  • 엄격 모드 활성화: `tsconfig.json` 파일에서 엄격 모드를 활성화하면 컴파일 시점에 일반적인 프로그래밍 오류를 미리 감지할 수 있습니다. 이는 디버깅 시간을 줄여 생산성을 향상시키는 데 도움이 됩니다.
  • 엄격한 null 검사 활성화: `tsconfig.json` 파일에서 엄격한 null 검사를 활성화하면 컴파일 시점에 발생할 수 있는 모든 null 또는 undefined 오류를 사전에 포착할 수 있습니다.
  • 타입스크립트 지원 코드 편집기 사용: 다양한 코드 편집기가 존재합니다. 플러그인을 통해 타입스크립트를 지원하는 VS Code, Sublime Text, 또는 Atom과 같은 코드 편집기를 선택하는 것이 좋습니다.
  • 타입과 인터페이스 활용: 타입과 인터페이스를 사용하면 프로젝트 전체에서 재사용 가능한 사용자 정의 타입을 정의할 수 있습니다. 이러한 접근 방식은 코드를 더욱 모듈화하고 유지보수하기 쉽게 만들어줍니다.

마무리

이제 Node.js에서 타입스크립트를 사용하여 만든 앱의 기본 구조가 완성되었습니다. 이제 일반적인 Node.js 패키지를 타입스크립트 코드에서 활용할 수 있으며, 타입스크립트가 제공하는 다양한 추가 기능을 통해 개발 생산성을 높일 수 있습니다.

만약 타입스크립트를 처음 접한다면, 자바스크립트와 타입스크립트의 차이점을 명확히 이해하는 것이 중요합니다.