[백엔드] Node.js에서 sequelize를 활용하여 CRUD 구현하기(RESTful API)[2]

지난 시간엔 sequelize를 활용하여 CRUD를 구현하고 이걸 웹으로 확인해 보았다.

이제 이걸 프론트가 사용할 수 있도록 API로 만들어보자~

 

아 맞아 그리고 지금까진 실행할 때 npm start로 했는데 앞으론 nodemon install 해서 nodemon app.js로 실행하자.

 

일단 postman을 설치하자

이렇게 생겼다. 이건 앱을 설치한 버전이고 그냥 구글 크롬 앱 추가하기로 설치해도 괜찮다.

크롬으로 하는게 더 편한 것 같은데 난 하도 앱설치하라고 귀찮게 하여 설치한 것이다.

 

먼저 app.js를 수정해야한다.

// var createError = require('http-errors');
// var express = require('express');
// var path = require('path');
// var cookieParser = require('cookie-parser');
// var logger = require('morgan');
// var methodOverride = require('method-override');
// var bodyParser = require('body-parser');

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();

var corsOptions = {
  origin: "http://localhost:3000"
};

app.use(cors(corsOptions));

// parse requests of content-type - application/json
app.use(bodyParser.json());

// parse requests of content-type - application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// simple route
app.get("/", (req, res) => {
  res.json({ message: "Welcome to bezkoder application." });
});

var register = require("./routes/user.register");
app.use('/api/user/register', register);

// set port, listen for requests
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}.`);
});

어떤 외국 블로그에서 베껴왔다. json으로 뭘 바꾼듯하다.

위를 보면 알겠지만 body-parser와 cors를 install 해야한다. 위에 주석처리한 것들은 혹시 나중에 필요할까봐...

접속할 때 3001 포트를 사용하면 된다.

 

var register = require("./routes/user.register");
app.use('/api/user/register', register);

이 두줄에 대해 설명하자면 일단 지난번에 routes 폴더에 있던 index.js 파일의 이름을 user.register로 바꿨다.

그리고 걔를 localhost:3001/api/user/register에서 사용할 것이라는 의미로 app.use를 저렇게 쓴 것이다.

---

Create

일단 원래의 코드를 보자

var express = require('express');
var models = require('../models');
var router = express.Router();

router.get('/board', function(req, res, next) {
  res.render('show');
});

router.post('/board', function(req, res, next){
  let body = req.body;

  models.student.create({
    stu_id: body.inputId,
    stu_pw: body.inputPw,
    stu_nick: body.inputNick,
    stu_grade: body.inputGrade,
    stu_photo: body.inputPic
  })
  .then(result => {
    console.log("success");
    res.redirect('/board');
  })
  .catch(err => {
    console.log(err);
  })
});

module.exports = router;

원래 router.get으로 show.ejs와 연결하고 router.post로 create를 하고 결과를 넘겼다.

근데 우린 이제 show.ejs가 필요 없다. 거기에 결과를 넘길 이유도 없다.

 

var models = require('../models');
const express = require('express');
const router = express.Router();

//Register
router.post('/', function (req, res, next) {
  let body = req.body;

  if (!body.stu_id) {
    res.status(400).send({
      message: "Content can not be empty!"
    });
    return;
  }

  const userInfo = {
    stu_id: body.stu_id,
    stu_pw: body.stu_pw,
    stu_nick: body.stu_nick,
    stu_grade: body.stu_grade,
    stu_photo: body.stu_photo,
  }

  models.student.create(userInfo)
    .then(result => {
      res.send(result);
    })
    .catch(err => {
      res.status(500).send({
        message:
          err.message || "Some error occurred while creating the Tutorial."
      });
    });
});

이렇게 바꿨다. router.get은 그냥 없애버렸다. 입력을 받을 때 id가 없으면 에러 메세지 대충 던져주고...사실 우리 테이블에 not null이 더 있어서 더 해야하지만 귀찮다.

원래는 결과를 res.redirect로 넘겼지만 이제 res.send로 결과를 넘긴다. 에러 발생하면 에러 메세지 던진다.

 

이제 postman 주소에 localhost:3001/api/user/register에 POST로 들어가서 값을 넘겨보자

위에 Body에 raw 체크하고 JSON 체크하고 저렇게 넣을 데이터 작성한 뒤 Send 누르면 된다.

성공했다면 아래에 들어간 데이터가 표시될 것이다. 지금 비밀번호가 이상하게 보이는데 저거 암호화 해서 그렇다.

저 과정은 지금 소스 코드에 넣지 않았으니 아마 입력한 비밀번호가 그대로 입력됐을 것이다.

비밀번호 암호화 방법은 회원가입-로그인 구현하는 글에서 쓸 것이다.

---

Read

//Read
router.get('/', function (req, res, next) {
  const id = req.query.id;
  //var condition = id ? { id: { [Op.like]: `%${id}%` } } : null;

  models.student.findAll()
    .then(data => {
      res.send(data);
    })
    .catch(err => {
      res.status(500).send({
        message:
          err.message || "Some error occurred while retrieving tutorials."
      });
    });
});

바뀐 read 방법이다.

아까와 같이 show.ejs와 연결하던 router.get을 지웠고...(그 뒤로도 다 지우니 이후로는 언급하지 않겠다.)

res.render를 res.send로 수정했고...localhost:3001/api/user/register에서 GET으로 한 뒤 send를 누르면

아까 추가한 데이터를 포함해서 다른 데이터도 잘 있는 것을 볼 수 있다.

---

Update

// Update a Tutorial by the id in the request
router.put('/:id', function (req, res, next) {
  const id = req.params.id;
  let body = req.body;

  models.student.update({
    stu_nick: body.stu_nick,
    stu_grade: body.stu_grade,
    stu_photo: body.stu_photo
  }, {
    where: { stu_sn: id }
  })
    .then(num => {
      if (num == 1) {
        res.send({
          message: "UserInfo was updated successfully."
        });
      } else {
        res.send({
          message: `Cannot update UserInfo with id=${id}. Maybe Tutorial was not found or req.body is empty!`
        });
      }
    })
    .catch(err => {
      res.status(500).send({
        message: "Error updating UserInfo with id=" + id
      });
      console.log(err);
    });
});

우리 기획에서 수정할 수 있는 회원정보는 닉네임, 학년, 프로필 사진이라서 쟤네만 수정되도록 설정했다.

수정할 데이터의 stu_sn을 id로 입력해서 수정하면 된다. 그니까 아까 만든 test를 수정하고 싶다면

localhost:3001/api/user/register/25로 들어가면 된다.

PUT으로 놓고 Send 했다. 잘 수정됐는지 확인해보자

 

잘 됐당

---

Delete

// Delete
router.delete('/:id', function (req, res, next) {
  const id = req.params.id;

  models.student.destroy({
    where: { stu_sn: id }
  })
    .then(num => {
      if (num == 1) {
        res.send({
          message: "Tutorial was deleted successfully!"
        });
      } else {
        res.send({
          message: `Cannot delete Tutorial with id=${id}. Maybe Tutorial was not found!`
        });
      }
    })
    .catch(err => {
      res.status(500).send({
        message: "Could not delete Tutorial with id=" + id
      });
    });
});

여기까지 보면 알겠지만 그냥 이전 코드들에서 페이지를 로드하는 router.get을 없애고 res.render를 res.send로 바꾼게 전부이다.

 

login_test를 지우기 위해 Postman을 DELETE로 두고 localhost:3001/api/user/register/23으로 send를 하면

삭제가 잘 됐다.

 

이제 CRUD를 다 구현했으니 다음 게시글에선 회원가입-로그인을 구현하는 방법에 대해 작성하도록 하겠다.