사용자와 댓글 관리 서버 - 2

라우터를 만들고 app.js에 연결할 것이다.

 

라우터에는 GET, POST, PUT, DELETE 요청에 해당하는 라우터를 만들것이다

 

routes/index.js

var express = require('express');
var User = require('../models').User;

var router = express.Router();

/* GET home page. */
/*router.get('/', function(req, res, next) {
  User.findAll().then((users) => {
    res.render('seqeulize', {users});
  }).catch((err) => {
    console.error(err);
    next(err);
  });
});*/

router.get('/', async(req, res, next) => {
  try{
    const users = await User.findAll();
    res.render('sequelize', {users});
  }catch(error){
    console.error(error);
    next(error);
  }
});

module.exports = router;

 

routes/index는 처음 홈페이지에 들어갔을 때 GET 요청을 하는 부분이다.

express를 require로 추가하고 express에 Router 객체를 받아와서 router 변수가 이를 참조한다.

GET요청을 할 때 /models의 User 모델이 필요하기 때문에 우선 User를 받아온다.

 

그리고 루트 페이지(/)에 get요청이 들어오면 User모델의 모든 사용자의 정보를 갖고 와서 seqeulize.pug를 렌더링할 때(client한테 sequelize.pug 파일을 html로 바꿔서 보여주는것) 결과값인 users를 넣어준다.

 

* 렌더링 : 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말한다.

* 렌더링 엔진 : 대부분의 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다. ex) 크롬-Blink

가장 먼저 서버로부터 HTML, CSS를 다운로드 받고 이 파일을 연산과 관리가 편하도록 Object Model로 만든다.

HTML은 DOM Tree로, CSS는 CSSOM으로 Object Model을 만드는 것이다.

두개의 Model을 이용해서 Render Tree를 생성하는데 이 트리는 스타일 정보가 설정되어 있는 실제 화면에 표현되는 노드들로만 구성된다.

 

routes/users.js

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

/* GET users listing. */
router.get('/', async(req, res, next)=>{
  try{
    const users = await User.findAll();
    res.json(users);
  }catch(error){
    console.error(error);
    next(error);
  }
});

router.post('/', async(req, res, next)=>{
  try{
    const result = await User.create({
      name: req.body.name,
      age: req.body.age,
      married: req.body.married,
    });
    console.log(result);
    res.status(201).json(result);
  }catch(error){
    console.error(error);
    next(error);
  }
});

module.exports = router;

/users에 get요청이 있을 때 이번에는 res.render(users)가 아닌 res.json(users)를 수행한다.

즉 get 요청이 들어왔을 때 json형식으로 변환해서 보낸다는 것이다.

 

post요청이 왔을 때는 name, age, married에 요청에 쓰인 이름, 나이, 결혼 여부를 넣어서 USER db를 생성하고 그 결과를 result에 넣는다. 그리고 응답 코드가 201로 post에 대한 정상 요청이라면 이를 응답에 보낸다.

 

routes/comments.js

var express = require('express');
var {User, Comment} = require('../models');

var router = express.Router();
router.get('/:id', async(req, res, next)=>{
    try{
        const comments = await Comment.findAll({
            include: {
                model: User,
                Where: {id: req.params.id},
            },
        });
        console.log(comments);
        res.json(comments);
    }catch(error){
        console.error(error);
        next(error);
    }
});

router.post('/', async(req, res, next)=>{
    try{
        const result = await Comment.create({
            commenter: req.body.id,
            comment: req.body.comment,
        });
        consoel.log(result);
        res.status(201).json(result);
    }catch(error){
        console.error(error);
        next(error);
    }
});

router.patch('/:id', async(req, res, next)=>{
    try{
        const result = await Comment.update({ comment: req.body.comment},{where: {id: req.params.id}});
        res.json(result);
    }catch(error){
        console.error(error);
        next(error);
    }
});

router.delete('/:id', async(req, res, next)=>{
    try{
        const result = await Comment.destroy({where: {id: req.params.id}});
        res.json(result);
    }catch(error){
        console.error(error);
        next(error);
    }
});

module.exports = router;

이 부분은 /comments에 관한 요청이 들어왔을 때 어떻게 응답할지에 대한 부분이다.

/users와 달리 댓글에는 user정보와 comments 정보가 모두 필요하기 때문에 모델에서 user와 comments에 대해 모두 갖고 온다.

 

/user/:id 로 경로를 만들어 놓으면 req.params.id로 접근해서 user의 id값에 접근할 수 있다.

GET요청이 왔을 때 해당 id를 이용해 그 id를 갖는 모델을 찾아서 그 comments를 json으로 보내준다.

POST 요청은 id를 이용해서 정보를 찾아올 필요가 없다. 그리고 요청에 들어있는 id랑 comment를 이용해 Commenter 모델을 만든다. 그리고 그 결과를 result에 저장해서 json을 이용해 응답한다.

PATCH 요청은 각 user 별로 수정시키는 것이기 때문에 id를 이용해서 해당 id를 갖는 모델의 comment 부분에 요청의 comment를 집어 넣음으로써 수정시킨다.

DELTE 역시 id를 이용해서 destroy로 해당 댓글을 없앤다.

 

이렇게 각각의 라우터들을 모두 구성했으면 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 indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var commentsRouter = require('./routes/comments');
var sequlieze = require('./models').sequelize;

var app = express();
sequelize.sync();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/comments', commentsRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

app.use 부분을 보면 앞으로 / 에 대한 것은 indexRouter에서 다루고 /users의 경우 usersRouter, /comments는 commentRouter에서 다루는 것을 확인할 수 있다.