프로그래밍/Typescript

타입스크립트 설치 및 설정: 컴파일러 옵션 완벽 가이드

shimdh 2025. 3. 31. 09:08
728x90

타입스크립트는 자바스크립트를 기반으로 한 정적 타입 언어로, 개발자가 보다 안전하고 효율적으로 코드를 작성할 수 있도록 돕는 강력한 도구입니다. 이번 포스트에서는 타입스크립트를 설치하고 설정하는 방법, 그리고 컴파일러 옵션에 대해 심도 있게 알아보겠습니다.

1. 타입스크립트 설치하기

타입스크립트를 사용하기 위해서는 먼저 이를 설치해야 합니다. 가장 일반적인 방법은 npm(Node Package Manager)을 이용하는 것입니다. npm은 자바스크립트 생태계에서 널리 사용되는 패키지 관리 도구로, 다양한 라이브러리와 도구를 손쉽게 설치하고 관리할 수 있게 해줍니다.

설치 명령어

아래 명령어를 터미널에 입력하여 글로벌로 설치할 수 있습니다:

npm install -g typescript

설치가 완료된 후, tsc라는 명령어를 통해 컴파일러를 사용할 수 있습니다. 이 명령어는 타입스크립트 파일을 컴파일하여 자바스크립트 파일로 변환하는 데 사용됩니다.

2. 프로젝트 설정

타입스크립트를 사용하는 프로젝트를 시작하려면 다음 단계들을 따릅니다:

2.1 프로젝트 디렉토리 생성

원하는 위치에 새로운 폴더를 만들고 해당 폴더로 이동합니다. 이 폴더는 프로젝트의 모든 파일과 디렉토리를 포함하게 됩니다.

mkdir my-typescript-project
cd my-typescript-project

2.2 패키지 초기화

package.json 파일을 생성합니다. 이 파일은 프로젝트의 메타데이터를 포함하고, 의존성 관리 및 스크립트 실행에 필요한 정보를 제공합니다.

npm init -y

2.3 타입스크립트 초기화

다음 명령어로 기본적인 tsconfig.json 파일을 생성합니다. 이 파일은 타입스크립트 컴파일러의 설정을 정의하는 중요한 역할을 합니다.

tsc --init

이제 기본적인 타입스크립트 프로젝트 구조가 준비되었습니다. 이 구조는 프로젝트의 확장성과 유지보수성을 높이는 데 기여합니다.

3. 컴파일러 옵션 이해하기

tsconfig.json 파일에는 다양한 컴파일러 옵션이 포함되어 있으며, 이는 코드의 동작 방식과 출력 결과에 큰 영향을 미칩니다. 주요 옵션들은 다음과 같습니다:

3.1 target

변환할 JavaScript 버전을 지정합니다. 이 옵션은 코드의 호환성을 결정짓는 중요한 요소입니다.

  • 예시: "target": "es6"는 ES6 문법으로 변환하도록 설정합니다. 이를 통해 최신 자바스크립트 기능을 활용할 수 있습니다.

3.2 module

모듈 시스템을 정의합니다. 이 설정은 코드의 모듈화와 재사용성을 높이는 데 기여합니다.

  • 예시: "module": "commonjs"는 Node.js 환경에서 사용할 수 있는 CommonJS 모듈 형식을 선택합니다. 이는 서버 사이드 애플리케이션에서 널리 사용됩니다.

3.3 strict

엄격한 타입 검사 기능을 활성화하거나 비활성화합니다. 이 옵션은 코드의 안정성을 높이는 데 중요한 역할을 합니다.

  • 예시: "strict": true로 설정하면 모든 엄격한 체크가 활성화되어, 잠재적인 오류를 사전에 방지할 수 있습니다.

3.4 outDir와 rootDir

각각 출력 디렉토리와 소스 코드의 루트 디렉토리를 지정합니다. 이 설정은 프로젝트의 구조를 명확히 하고, 빌드 결과물을 관리하는 데 유용합니다.

  • 예시:
    "outDir": "./dist",
    "rootDir": "./src"

위와 같은 설정은 팀원들이 동일한 환경에서 작업할 수 있도록 도와주며, 협업의 효율성을 높입니다.

4. 실용적인 예제

다음은 간단한 tsconfig.json 파일의 예입니다:

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

이러한 구성으로 인해 여러분의 프로젝트는 ES5 표준으로 변환되며, CommonJS 모듈 형식으로 저장되고, 엄격한 검사가 적용됩니다. 이는 코드의 품질을 높이고, 유지보수를 용이하게 합니다.

결론

올바른 설치 및 적절한 컴파일러 옵션 설정은 성공적인 타입스크립트 개발의 기초입니다. 이를 통해 더 나아가 효과적이고 유지보수가 용이한 코드를 작성하는 데 도움이 될 것입니다. 타입스크립트의 강력한 기능을 활용하여, 여러분의 개발 경험을 한층 더 향상시켜 보세요.

728x90