Back-end/Node.js

[Node.js+MYSQL] 시퀄라이즈 (3) (Sequelize)

poppy 2021. 7. 20. 14:17
반응형

https://soohyun6879.tistory.com/163

 

[Node.js+MYSQL] 시퀄라이즈 (2) (Sequelize)

https://soohyun6879.tistory.com/162 [Node.js +MYSQL] 시퀄라이즈 (1) (Sequelize) 시퀄라이즈란? (Sequelize) 시퀄라이즈는 ORM 입니다. 즉, 자바스크립트 객체와 데이터베이스의 릴레이션을 매핑해주는 도구입..

soohyun6879.tistory.com

이전 포스팅에서 모델과 관계 정의까지 완료했습니다! 이번 포스팅에서 사용자 등록, 댓글 쓰기 등 쿼리 수행을 해보겠습니다

 

1. 시퀄라이즈 쿼리 알아보기

쿼리 수행을 하기 전에 시퀄라이즈에서 쿼리를 어떻게 사용하는지 알아야 합니다! 다음 예시를 보면 간단한 CRUD 쿼리를 알 수 있습니다.

 

// SELECT
// SELECT * FROM nodejs.users;
User.findAll({});

// SELECT name, age FROM nodejs.users WHERE married = 1;
User.findAll({
    attributes: ['name', 'age'],
    where: {
    	married: true
    },
});

// INSERT
// INSERT INTO nodejs.users (name, age, married, comment) VALUES ('zero', 24, 0, '자기소개1');
User.create({
    name: 'zero',
    age: 24,
    married: false,
    comment: '자기소개1',
});

// UPDATE
// UPDATE nodejs.users SET comment = '바꿀내용' WHERE id = 2;
User.update({
	comment: '바꿀내용',
}, {
	where: { id: 2 },
});

// DELETE
// DELETE FROM nodejs.users WHERE id = 2;
User.destroy({
	where: { id: 2 },
});

 

2. 쿼리 수행하기

프론트엔드 코드는 파일로 첨부하겠습니다! 서버 코드가 중요한 것이므로 프론트엔드쪽 코드는 다루지 않겠습니다

views 폴더에 sequelize.html, error.html 을 생성하고, public 폴더에 sequelize.js 를 생성하면 됩니다.

sequelize.html
0.00MB
error.html
0.00MB
sequelize.js
0.00MB

 

서버쪽을 쿼리 수행 부분을 살펴보겠습니다. routes 폴더에 index.js, users.js, comments.js 파일을 만듭니다.

// routes/index.js
const express = require('express');
const User = require('../models/user');

const router = express.Router();

// http://localhost:3000/ 접속
router.get('/', async (req, res, next) => {
  try {
    const users = await User.findAll(); // 모든 사용자 조회
    res.render('sequelize', { users });
  } catch (err) {
    console.error(err);
    next(err);
  }
});

module.exports = router;

이 라우터는 GET / 로 접속했을 때의 라우터입니다. User.findAll 메서드로 모든 사용자를 찾은 후 sequelize.html을 렌더링할 때 users를 넣습니다. 시퀄라이즈는 기본적으로 프로미스를 지원하므로 async/await 와 try/catch로 성공 시와 실패 시의 정보를 얻을 수 있습니다.

 

// routes/users.js
const express = require('express');
const User = require('../models/user');
const Comment = require('../models/comment');

const router = express.Router();

// http://localhost:3000/users/ 접속
router.route('/')
  .get(async (req, res, next) => {
    try {
      const users = await User.findAll(); // 모든 사용자 조회
      res.json(users);
    } catch (err) {
      console.error(err);
      next(err);
    }
  })
  .post(async (req, res, next) => {
    try {
      const user = await User.create({ // 사용자 등록
        name: req.body.name,
        age: req.body.age,
        married: req.body.married,
      });
      console.log(user);
      res.status(201).json(user);
    } catch (err) {
      console.error(err);
      next(err);
    }
  });

// http://localhost:3000/users/id값/comments 접속
router.get('/:id/comments', 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 (err) {
    console.error(err);
    next(err);
  }
});

module.exports = router;

먼저 GET /users 와 POST /users 로 접속했을 때 라우터입니다. GET 방식일 때는 사용자를 조회하는 요청을 수행하고, POST 방식일 때는 사용자를 등록하는 요청을 수행합니다. 

GET /users/:id/comments 로 접속했을 때 라우터입니다. 사용자의 댓글을 조회하는 요청을 수행합니다. include 옵션에서 model 속성에 User 모델을 넣어주고, where 속성에 :id로 받은 아이디 값을 넣어주었습니다. 

 

:id 의 의미가 궁금하다면 다음 링크의 "라우트 매개변수" 부분을 참고해주세요!

https://soohyun6879.tistory.com/159

 

[Node.js] 라우터 분리하기

app.get 같은 메서드를 "라우터" 라고 합니다. app.js 에 라우터를 많이 연결하면 코드가 길어지고 복잡해지므로 라우터를 분리해보겠습니다! routes 폴더를 만들고 그 안에 라우터를 분리하여 저장하

soohyun6879.tistory.com

 

// routes/comments.js
const express = require('express');
const { User, Comment } = require('../models');

const router = express.Router();

// http://localhost:3000/comments/ 접속
router.post('/', async (req, res, next) => {
  try {
    const comment = await Comment.create({ // 댓글 등록
      commenter: req.body.id,
      comment: req.body.comment,
    });
    console.log(comment);
    res.status(201).json(comment);
  } catch (err) {
    console.error(err);
    next(err);
  }
});

// http://localhost:3000/comments/id값/ 접속
router.route('/:id')
  .patch(async (req, res, next) => {
    try {
      const result = await Comment.update({ // 댓글 수정
        comment: req.body.comment,
      }, {
        where: { id: req.params.id },
      });
      res.json(result);
    } catch (err) {
      console.error(err);
      next(err);
    }
  })
  .delete(async (req, res, next) => {
    try {
      const result = await Comment.destroy({ where: { id: req.params.id } }); // 댓글 삭제
      res.json(result);
    } catch (err) {
      console.error(err);
      next(err);
    }
  });

module.exports = router;

이 라우터는 댓글 관련 CRUD 작업을 하는 라우터입니다. POST /comments 라우터는 댓글을 등록하는 라우터입니다. commenter 속성에 사용자 아이디를 넣어 사용자와 댓글을 연결합니다. PATCH /comments/:id 는 댓글을 수정하는 라우터이고, DELETE /comments/:id 는 댓글을 삭제하는 라우터입니다.

 

마지막으로 app.js 에서 라우터를 가져와서 라우터를 연결해주면 됩니다!

// app.js
const express = require('express');
const path = require('path');
const morgan = require('morgan');
const nunjucks = require('nunjucks');

const { sequelize } = require('./models');
// 라우터 가져오기
const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');
const commentsRouter = require('./routes/comments');

const app = express();
app.set('port', process.env.PORT || 3000);
app.set('view engine', 'html');
nunjucks.configure('views', {
  express: app,
  watch: true,
});
sequelize.sync({ force: false })
  .then(() => {
    console.log('데이터베이스 연결 성공');
  })
  .catch((err) => {
    console.error(err);
  });

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

// 라우터 연결하기
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/comments', commentsRouter);

app.use((req, res, next) => {
  const error =  new Error(`${req.method} ${req.url} 라우터가 없습니다.`);
  error.status = 404;
  next(error);
});

app.use((err, req, res, next) => {
  res.locals.message = err.message;
  res.locals.error = process.env.NODE_ENV !== 'production' ? err : {};
  res.status(err.status || 500);
  res.render('error');
});

app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기 중');
});

 

모든 코드가 완성된 후 npm start 를 하고 웹페이지에 접속하면 다음과 같은 화면을 볼 수 있습니다!

 

 

반응형