Node+Express+Typescript 개발환경 세팅

onady·2022년 11월 8일
0

시작

먼저 Nodejs는 기본적으로 설치하고 다음 명령어를 실행한다.

npm init


프로젝트 정보를 입력하고 마지막으로 yes를 입력하면 시작된다.

모듈 설치

yarn add express typescript @types/express
yarn add -D ts-node nodemon

서버 구동시 필요한 모듈

  • express : Nodejs를 위한 프레임워크로 서버를 쉽게 구성하게 한다.
  • @types/express : express 모듈에 대한 type을 지원해준다.

개발시 필요한 모듈 (-D 옵션을 붙여서 설치)

  • ts-node : Nodejs용 TypeScript 실행 엔진
  • nodemon : 서버 코드 변경 시 자동 재시작을 도와주는 모듈

Typescript 시작

tsc --init

*macOS의 경우 tsc명령어를 찾지 못하는 경우가 있는데 그럴땐 아래 명령어를 실행

brew install typescript

Typescript가 정상적으로 설치되어 있다면 tsconfig.json 파일이 생성된다.
tsconfig.json 파일을 열어보면 여러가지 옵션들이 주석처리 돼있는데 다음 필수적인 옵션들만 설정해준다.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "esModuleInterop": true 
  }
}
  • outDir : Typescript가 Javascript로 빌드된 파일들을 모아두는 폴더명

서버 코드 작성

프로젝트 경로에 app.ts 파일을 만들고 아래와 같이 작성

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

const app = express();

app.get("/", (req: Request, res: Response) => {
  res.send("hello");
});

app.listen(3000);

서버 실행

  "scripts": {
    "start": "nodemon dist/app",
    "build": "tsc && node dist",
    "dev": "nodemon --watch \"*.ts\" --exec \"ts-node\" app.ts"
  },

서버를 실행하기 위해 package.json의 script 부분을 위와 같이 수정한다.

yarn run dev

위 명령어를 실행하고 브라우저에서 localhost:3000를 입력하면 hello가 응답된다.

0개의 댓글