본문 바로가기

개발/express

[express] express.js + typescript로 간단 Backend 시작하기

반응형

시작 하기 전 확인 사항

  1. 터미널을 실행
  2. 노드 버전 체크
  3. node -v
  4. 없는 경우 1)밑의 링크에서 설치 혹은 2)nvm으로 설치
  5. 타입스크립트 설치 체크3-1. 미설치시
    • npm install -g typescript (전체 적용)
    • npm install typescript (현재 위치의 폴더에 설치)
      
      
  6. tsc -v
1. 터미널(cmd,shell) 실행
2. mkdir [폴더명]
3. cd [폴더명]
3. npm init -y
4. npm install express
5. npm i express dotenv
  4-1. dotenv 파일을 사용하려면 package.json 파일과 같은 위치에 .env 확장자 파일을 생성하여 사용
  dot.env
  # Add all of the environmental variables here instead of 
  # embedding them directly in the app and utilize them 
  # with the `DotEnv` package
  PORT=3000
6. npx tsc --init
  6-1. tsconfig 파일에 밑의 내용 추가
  "compilerOptions": {
    ...
    "outDir": "./dist"
    ...
  }
7. mkdir src
8. cd src
9. index.ts 파일 생성 후 밑의 내용 추가
import express, { Express, Request, Response } from "express";
import dotenv from "dotenv";

dotenv.config();

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

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

app.listen(port, () => {
  console.log(`[server]: Server is running at http://localhost:${port}`);
});
7. npm run [명령어로 실행] 혹은 npx 명령어로 실행
  7-1. npm
    - package.json 파일에 밑의 내용 추가.
      "build": "npx tsc",
      "start": "node dist/index.js",
      "dev": "nodemon src/index.ts",
    - npm run dev 터미널에 입력
  7-2. npx
    - npx ts-node src/index.ts
반응형