[express]게시판 만들기 #1

backend 설치

터미널에 다음과 같이 입력한다.

npm init
yarn add typescript
tsc --init

tsc --init이 tsconfig.json으로 생성하면 import 인식이 안되더라
에러나는 경우 아래 코드 참고할것

 

/backend/tsconfig.json

tsc --init을 통해 생성된 파일

{
  "compilerOptions": {
    "lib": ["es5", "es6"],
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./build",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true
  }
}

 

/backend/package.json

{
  "name": "01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon --exec ts-node app.ts",
    "prod": "cross-env NODE_ENV=production node ts-node app.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "cross-env": "^6.0.3",
    "express": "^4.17.1",
    "mysql2": "^2.1.0",
    "nodemon": "^2.0.2",
    "sequelize": "^5.21.3",
    "typescript": "^3.7.4"
  },
  "devDependencies": {
    "ts-node": "^8.6.1"
  }
}

 

모듈 설치

yarn add 모듈명

cors
body-parser
cross-env //윈도우의 경우
express
mysql2
sequelize
nodemon

 

/backend/app.ts

일단 app.ts 를 생성해 잘 돌아가는지 확인하자

import * as express from 'express';
import * as cors from 'cors';
import * as bodyParser from 'body-parser';

const app = express();

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.listen(4000, () => {
  console.log('backend: 4000');
});

/backend/package.json

script 부분에 이 내용을 추가한다.

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon --exec ts-node app.ts",
    "prod": "cross-env NODE_ENV=production node ts-node app.ts",
   },

이렇게만 입력하고 터미널에 이렇게 입력한다.

yarn dev

결과에 backend: 4000 이라고 뜬다면 성공

 

 

Route 추가

이번엔 Route를 추가해 여러페이지를 효율적으로 관리해보자

 

/backend/routes/index.ts

import { Router } from 'express';

//route 연결
const route = Router();

//내보내서 사용가능하게
export = route;

 

/backend/app.ts

import * as express from 'express';
import * as cors from 'cors';
import * as bodyParser from 'body-parser';

const app = express();
const route = require('./routes'); //routes 폴더 불러오기 

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use('/', route); //route와 연결

app.listen(4000, () => {
  console.log('backend: 4000');
});

2020/01/18 - [프로그램 강좌] - [express]게시판만들기 #1

2020/01/20 - [프로그램 강좌] - [express]게시판 만들기 #2

2020/01/18 - [프로그램 강좌] - [express]게시판 만들기 #3