고려해야 할 version

node : v16..

react-router-dom : 5v

현재 저의 npm 버전은 ‘6.14.15’ 입니다 🙂

42cabi_back

backend 세팅을 할 디렉토리 위치에서 아래와 같은 명령어를 입력하여 필요한 모듈을 설치하여 준다.

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

• package.json

  ⇒ devDependencies 에서 필요한 모듈이 잘 설치되었는지 확인해 볼 수 있다.

  ⇒ scripts 부분을 아래와 같이 수정해준다. (ts 파일을 실행 시켜줄 수 있게 해준다.)

{
  "name": "42cabi_back",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node dist/app.js",
		"prestart": "tsc",
    "dev": "nodemon --watch \\"src/**/*.ts\\" --exec \\"ts-node\\" src/app.ts",
    "build": "tsc -p .",
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^17.0.0",
    "express": "^4.17.2",
    "nodemon": "^2.0.15",
    "ts-node": "^10.4.0",
    "typescript": "^4.5.4"
  }
}

• tsconfig.json

  ⇒ tsc --init 을 입력하여 tsconfig.json 생성

  ⇒ rootDir : ts 파일 컴파일 위치

  ⇒ outDir : js로 변환된 파일의 위치

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "dist",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

src/app.ts 를 생성한 후, ‘npm run dev’ or ‘npm start’ 로 실행시킨다.

http://localhost:8080/ 로 접속하였을 때 welcome이 잘 뜨는지 확인해본다.

// ./src/app.ts

import express, { Request, Response, NextFunction } from 'express';

const app = express();

app.get('/', (req: Request, res: Response, next: NextFunction) => {
    res.send('welcome!');
});

app.listen('8080', () => {
    console.log(`
  ################################################
  🛡️  Server listening on port: 1234🛡️
  ################################################
`);
});

42cabi_front