TypeScript 개발 툴과 서버 환경 구성

2025.02.27 - [개발/자바스크립트] - TypeScript란?

TypeScript란?

 

TypeScript를 개발하기 위해서는 코드 편집기(IDE), 컴파일러(tsc), 그리고 서버 실행 환경이 필요합니다.

---

1. TypeScript 개발 툴 (IDE & 편집기)

✅ Visual Studio Code (VSCode) - 추천

• TypeScript 공식 지원
• 자동 완성 및 IntelliSense 제공
• 디버깅 및 확장 기능 풍부
• 설치: VSCode 다운로드

✅ WebStorm

• JetBrains에서 개발한 IDE
• 강력한 자동 완성 및 코드 분석 기능 제공
• 유료(30일 무료 체험 가능)

✅ Eclipse + TypeScript Plugin

• Eclipse에서 TypeScript 플러그인을 추가하여 사용 가능
• TypeScript 전용 기능은 부족할 수 있음

✅ Vim, Sublime Text, Atom 등

• 확장 기능을 통해 TypeScript 지원 가능

---

2. TypeScript 설치 및 환경 구성

📌 1) Node.js 및 npm 설치
Node.js가 설치되어 있어야 TypeScript를 설치하고 실행할 수 있습니다.

• Node.js 다운로드
• 설치 후 버전 확인: 
• node -v npm -v

📌 2) TypeScript 글로벌 설치

npm install -g typescript

• 설치 확인:

  tsc --version
  

---

728x90

---

3. TypeScript 프로젝트 설정

📌 1) 프로젝트 초기화 (tsconfig.json 설정)

mkdir my-typescript-app
cd my-typescript-app
npm init -y

package.json 파일이 생성됨

TypeScript 설정 파일 생성:

tsc --init

tsconfig.json 파일이 생성됨

tsconfig.json 주요 설정:

{
  "compilerOptions": {
    "target": "ES6",  
    "module": "CommonJS",  
    "outDir": "./dist",  
    "rootDir": "./src",  
    "strict": true  
  }
}

• target: 컴파일될 JavaScript 버전 지정 (예: ES6, ESNext)
• module: 사용할 모듈 시스템 (예: CommonJS, ESNext)
• outDir: 컴파일된 JS 파일이 저장될 디렉토리
• rootDir: TypeScript 소스 코드가 위치할 디렉토리

📌 2) 디렉토리 구조

my-typescript-app/
 ├── src/                # TypeScript 코드 폴더
 │   ├── index.ts        # 메인 TypeScript 파일
 │   └── utils.ts        # 유틸리티 파일
 ├── dist/               # 컴파일된 JavaScript 코드 폴더
 ├── package.json
 ├── tsconfig.json
 ├── node_modules/

---

4. TypeScript 개발 및 실행

📌 1) 기본 TypeScript 코드 작성 (src/index.ts)

function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet("TypeScript"));

📌 2) TypeScript 코드 컴파일

tsc

dist/index.js 파일이 생성됨

📌 3) Node.js로 실행

node dist/index.js

Hello, TypeScript! 출력

---

5. TypeScript 서버 환경 구성

TypeScript는 주로 Node.js + Express, NestJS, 또는 Deno 환경에서 사용됩니다.

📌 1) Express + TypeScript 서버 구성

📌 1-1) 프로젝트 생성 및 패키지 설치

mkdir ts-express-server
cd ts-express-server
npm init -y
npm install express
npm install -D typescript @types/express ts-node nodemon

• express: 웹 서버 프레임워크
• @types/express: Express의 TypeScript 타입 정의
• ts-node: TypeScript 실행을 위한 Node.js 실행기
• nodemon: 파일 변경 감지 후 자동 재시작

📌 1-2) tsconfig.json 설정

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  }
}

📌 1-3) Express 서버 코드 작성 (src/server.ts)

import express, { Request, Response } from "express";

const app = express();
const PORT = 3000;

app.get("/", (req: Request, res: Response) => {
    res.send("Hello, TypeScript with Express!");
});

app.listen(PORT, () => {
    console.log(`Server is running at http://localhost:${PORT}`);
});

📌 1-4) 실행 스크립트 추가 (package.json)

"scripts": {
  "start": "node dist/server.js",
  "dev": "ts-node src/server.ts"
}

📌 1-5) 서버 실행

개발 모드 실행:

npm run dev

컴파일 후 실행:

tsc
node dist/server.js

http://localhost:3000 에서 서버 확인 가능

---

📌 2) NestJS (TypeScript 기반 백엔드 프레임워크)

npm install -g @nestjs/cli
nest new my-nest-app
cd my-nest-app
npm run start

NestJS는 TypeScript 기본 지원

---

📌 3) Deno (Node.js 대체, 기본적으로 TypeScript 지원)

curl -fsSL https://deno.land/install.sh | sh

TypeScript 파일 실행:

deno run --allow-net server.ts

---

반응형

6. TypeScript + React 개발 환경 구성

1. React 프로젝트 생성

   npx create-react-app my-react-app --template typescript
   cd my-react-app
   npm start
   

2. TypeScript 컴포넌트 작성 (App.tsx)

   import React from "react";
   
   interface Props {
       name: string;
   }
   
   const Greeting: React.FC<Props> = ({ name }) => {
       return <h1>Hello, {name}!</h1>;
   };
   
   export default function App() {
       return <Greeting name="TypeScript" />;
   }
   

---

7. TypeScript 개발 툴 & 서버 환경 정리

사용 기술	설명
VSCode	TypeScript 개발에 가장 많이 사용되는 IDE
Node.js	TypeScript 실행을 위한 런타임 환경
Express	TypeScript 기반 서버 개발 가능
NestJS	TypeScript를 기본 지원하는 백엔드 프레임워크
Deno	TypeScript를 기본 실행할 수 있는 JS 런타임
React	TypeScript와 함께 사용 가능한 프론트엔드 라이브러리

---

결론

• 개발 툴: VSCode 추천
• 환경 구성: Node.js + TypeScript + Express or NestJS
• 실행: tsc로 컴파일 후 실행 or ts-node 개발 모드 사용