TypeScript + Express 개발 환경 세팅하기

박박버러지·2025년 3월 12일

프로젝트 첫 백엔드 참여

목록 보기

3/3

위트 프로젝트를 배포하게 됐는데 아무래도 디자인이 다 갈아엎어졌다보니 개발도 새로 하는게 좋을 것 같아서 개발환경을 조금 바꿨다.

근데 사실 나는 아직 스프링이 좀 더 익숙하고 심지어 노드는 또 오랜만이라 아직 부족한 부분이 많다.. 좀 더 공부해보고 싶은데 졸프랑 병행하며 할 수 있을진 모르겠다 ㅋㅋ

일단 초기세팅 하는 방법부터 정리해놓는다 (날 위해)

1 프로젝트 디렉토리 생성 및 초기화

mkdir app-title
cd app-title
npm init -y

npm-init -y는 package.json 을 자동으로 생성해준다.

2 TypeScript 및 필수 패키지 설치

npm install express
npm install --save-dev typescript ts-node @types/node @types/express nodem
on @types/express-serve-static-core

ts-node : TypeScript 파일을 실행하기 위한 도구
@types/node : Node.js 타입 정의
@types/express: Express 타입 정의
nodemon : 코드 변경 시 자동으로 서버 재시작

이라고 생각하면 된다.

3 TypeScript 설정 파일 생성

npx tsc --init

먼저 tsconfig.json 파일을 만들고 설정을 바꾼다.

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

내가 한 대로 곧이곧대로 할 필요는 없다.
target : 최신 JavaScript 버전 지원
module : CommonJS로 설정 (Node.js 환경에서 사용)
outDir : dist 폴더에 컴파일된 JS 파일 저장
rootDir: 소스 코드(src 폴더)를 기준으로 컴파일
strict : 엄격한 타입 체크 활성화
esModuleInterop: ES 모듈 간의 호환성 유지

4 프로젝트 폴더 구조 생성

mkdir src
touch src/server.ts

5 Express 서버 코드 작성

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

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.json());

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

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