TS + Express 셋업 가이드

Hunter Joe·2024년 10월 16일

기존 Express 세팅은 했었는데 TS로 하려니깐 애먹어서 적음

Set up

1. package.json 생성

npm init -y

프로젝트 정보와 의존성(dependencies)를 관리하는 문서

2. 필요 구성 요소 설치

npm i -D express typescript ts-node nodemon @types/node @types/express

nodemon
express
typescript - TS 컴파일러 설치
ts-node - TS 전용 Node.js
@types/node - Node.js의 타입 정의 파일
@types/express - Express의 타입 정의 파일

3. tsconfig.json 생성

npm i tsc --init

TS로 짜여진 코드를 JS로 컴파일하는 옵션을 설정하는 파일

아래와 같이 작성했음.

{
  "compilerOptions": {
    "target": "es6", // 어떤 버전으로 컴파일할지 작성 
    "module": "commonjs", //어떤 모듈 방식으로 컴파일할지 설정
    "outDir": "./dist",	//컴파일 후 js 파일들이 생성되는 곳
    "rootDir": ".",	//루트 폴더
    "strict": true,	//strict 옵션 활성화
    "moduleResolution": "node",	//모듈 해석 방법 설정: 'node' (Node.js)
    "esModuleInterop": true,
     "jsx": "react"
  }
}

자세한 tsconfig.json설명

4. package.json 파일 수정

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

"start": "node dist/app.js" : 컴파일된 js파일로 시작
"build": "tsc -p ." : ts를 js로 빌드

5. app.ts (Express) 코드 작성

import express, { Request, Response, NextFunction } from 'express';
import cors from "cors"; // react랑 연결하기 위해서 작성

const app = express();
app.use(cors());

const port = 3010;

app.get('/message', (req: Request, res: Response) => {
    res.json({message: "Hello from server"});
});

app.listen(port, () => {
    console.log(`Server listening on port: ${port}`);
});

6. 서버 시작

npm run dev

app.get('/message', (req: Request, res: Response) => {
    res.json({message: "Hello from server"});
});

get요청을 /message로 보냈고 + res(응답)을 json으로 받고있어서 위와 같은 화면으로 됨

7. React랑 연결하기

import { useEffect, useState } from "react"

const Chat = () => {
  const [message, setMessage] = useState("");

  useEffect(() => {
    fetch("http://localhost:3010/message")
    .then((res) => res.json())
    .then((data) => setMessage(data.message));
  },[])
  return (
    <>
    <div>Chat</div>
    <div>{message}</div>
    </>
  )
}

export default Chat