Express 및 TypeScript: 프로젝트 설정 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- Node.js와 Express를 사용하는 웹 개발자
- TypeScript를 도입하고자 하는 중급 이상 개발자
- 타입 안전성과 생산성을 높이려는 팀
핵심 요약
- TypeScript 설치 및
tsconfig.json
구성 npm install -D typescript
및npx tsc --init
명령어 사용outDir
설정을"dist"
로 지정하여 컴파일된 파일 저장- Express 설치 및 타입 정의 파일 사용
npm install express
및npm install -D @types/express
명령어 사용- TypeScript에서 Express 사용 시 타입 정의 필요
- 개발 효율성 향상 도구 활용
nodemon
과concurrently
를 사용하여 자동 리로드 및 병렬 실행 지원
섹션별 세부 요약
1. IDE 선택
- Visual Studio Code (VS Code) 추천
- 개인 선호에 따라 다른 IDE 사용 가능
2. TypeScript 설치
npm install -D typescript
명령어로 TypeScript 설치npx tsc --init
명령어로tsconfig.json
파일 생성tsconfig.json
파일에서outDir
옵션 설정 (예:"dist"
)
3. `tsconfig.json` 구성
compilerOptions
섹션에서outDir
을"dist"
로 설정tsc
명령어로 TypeScript 코드 컴파일- 컴파일 결과물은
dist
폴더에 저장됨
4. 엄격한 타입 검사 활성화
tsconfig.json
에서 다음 옵션 활성화:"noImplicitAny": true
"strictNullChecks": true
"strictFunctionTypes": true
"noUnusedLocals": true
"noUnusedParameters": true
include
및exclude
속성을 사용하여 컴파일 범위 설정 (예:node_modules
제외)
5. Express 설치 및 설정
npm install express
명령어로 Express 설치src
폴더에index.ts
파일 생성 후 Express 모듈 import@types/express
설치로 TypeScript 타입 정의 지원- 기본 Express 서버 구현 예시:
```typescript
import express from 'express';
const app = express();
app.listen(5000, () => console.log('Server started at port: 5000'));
```
6. 개발 도구 설치 및 스크립트 설정
nodemon
설치:npm install nodemon
package.json
에build
,prestart
,start
스크립트 추가concurrently
설치:npm install concurrently
dev
스크립트 추가:
```json
"dev": "npx concurrently --kill-others \"npm run watch\" \"npm start\""
```
npm run watch
로 TypeScript 파일 감시 및 자동 컴파일
결론
- TypeScript와 Express를 결합하면 타입 안전성과 생산성을 극대화할 수 있음
nodemon
,tsc --watch
,concurrently
도구를 사용하여 개발 효율성 향상package.json
스크립트를 통해 컴파일 및 서버 실행 프로세스 자동화