타입스크립트 설치 및 설정: 프로젝트 설정 가이드

타입스크립트는 현대 웹 개발에서 점점 더 많은 인기를 얻고 있는 프로그래밍 언어입니다. 타입스크립트를 사용하여 개발을 시작하기 위해서는 먼저 환경을 설정해야 합니다. 이 블로그 포스트에서는 타입스크립트를 설치하고, 프로젝트를 설정하며, 컴파일러 옵션을 조정하는 방법에 대해 자세히 설명하겠습니다.

1. 프로젝트 구조 이해하기

타입스크립트 프로젝트는 일반적으로 다음과 같은 기본적인 파일 및 디렉토리 구조를 갖습니다:

my-typescript-project/
│
├── src/                  # 소스 코드 디렉토리
│   └── index.ts         # 진입점 파일
│
├── tsconfig.json        # 타입스크립트 컴파일러 옵션 파일
└── package.json         # npm 패키지 관리 파일 (선택 사항)

• src/: 실제 코드를 작성하는 디렉토리로, 이곳에 모든 소스 파일이 위치하게 됩니다. 프로젝트의 핵심 로직이 담긴 파일들이 이 디렉토리 안에 포함되어 있어, 코드의 구조를 명확하게 유지할 수 있습니다.
• tsconfig.json: 타입스크립트 컴파일러의 동작 방식을 정의하는 구성 파일입니다. 이 파일은 프로젝트의 컴파일 설정을 중앙에서 관리할 수 있게 해주며, 다양한 옵션을 통해 코드의 품질과 호환성을 높이는 데 기여합니다.
• package.json: 필요한 라이브러리를 관리할 수 있는 npm의 구성 파일입니다. 이 파일은 프로젝트의 의존성을 명시하고, 스크립트 실행 및 메타데이터 관리를 용이하게 합니다.

2. tsconfig.json 생성하기

tsconfig.json은 타입스크립트 프로젝트에서 중요한 역할을 합니다. 이 파일에는 다양한 컴파일러 옵션이 포함되어 있어, 어떻게 코드를 처리할지를 결정합니다. 이 파일을 통해 프로젝트의 전반적인 설정을 조정할 수 있으며, 팀원 간의 일관된 개발 환경을 유지하는 데 필수적입니다.

예를 들어, tsconfig.json의 기본 구조는 다음과 같습니다:

{
  "compilerOptions": {
    "target": "es5",              // 변환될 ECMAScript 버전 지정
    "module": "commonjs",         // 모듈 시스템 유형 지정
    "strict": true,               // 모든 엄격한 유형 검사 활성화
    "esModuleInterop": true       // CommonJS와 ES 모듈 간 상호 운용성 활성화 
  },
  "include": ["src/**/*"],        // 포함할 소스 코드 경로 지정 
  "exclude": ["node_modules"]     // 제외할 경로 지정 
}

위 예제에서 각 항목에 대해 간단히 설명하면:

• target: 출력될 JavaScript 코드의 ECMAScript 버전을 결정합니다. 예를 들어 es5는 구형 브라우저와 호환되도록 코드를 변환합니다. 이는 다양한 환경에서의 호환성을 보장하는 데 중요한 요소입니다.
• module: 어떤 모듈 시스템을 사용할지를 정합니다. 이는 코드의 모듈화와 재사용성을 높이는 데 기여합니다.
• strict: 엄격한 유형 검사를 활성화하여 더 안전한 코드 작성을 돕습니다. 이 옵션을 활성화하면 코드의 오류를 사전에 방지할 수 있습니다.

3. 실습 예제

이제 실제로 간단한 타입스크립트 프로젝트를 만들어보겠습니다. 이 과정은 단계별로 진행되며, 각 단계에서 필요한 명령어와 설명을 포함하겠습니다.

1. 새로운 폴더를 만들고 해당 폴더로 이동합니다:

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

2. npm 초기화를 통해 package.json을 생성합니다:

   npm init -y

3. 타입스크립트를 설치합니다:

   npm install typescript --save-dev

4. tsconfig.json 파일을 생성하고 위에서 언급한 내용을 추가합니다. 이 파일은 프로젝트의 컴파일러 설정을 정의하는 중요한 역할을 하므로, 신중하게 작성해야 합니다.

5. 이제 src/index.ts라는 이름으로 새 TypeScript 파일을 만들고 아래와 같이 작성해 봅시다:

    const greeting = (name: string): string => {
        return `Hello, ${name}!`;
    };
   
    console.log(greeting("World"));

6. 마지막으로 터미널에서 다음 명령어를 실행하여 TypeScript 코드를 JavaScript로 컴파일 해봅니다:

   npx tsc 

7. 그 후에 생성된 JavaScript 코드를 실행해 보세요:

   node dist/index.js 

이렇게 하면 콘솔에 "Hello, World!"가 출력됩니다! 이 간단한 예제를 통해 타입스크립트의 기본적인 사용법을 익힐 수 있습니다.

결론

타입스크립트를 설치하고 프로젝트를 설정하는 것은 매우 중요하며 첫 단계입니다. 올바른 환경설정을 통해 이후 개발 과정이 훨씬 원활해질 것입니다. 이 과정을 통해 타입스크립트의 장점을 최대한 활용할 수 있으며, 더 나아가 안정적이고 유지보수가 용이한 코드를 작성할 수 있는 기반을 마련할 수 있습니다.