[노드 2] 7장. MySQL

 

🌟7장 키워드🌟

MySQL

워크벤치

CRUD

시퀄라이즈

 

 

서버를 종료해도 데이터가 저장될 수 있도록 데이터베이스를 활용해 보도록 하겠습니다.

 

7.1 데이터베이스란?

 

📌 데이터베이스

• 관련성을 가지며 중복이 없는 데이터들의 집합
• 서버의 하드 디스크나 SSD등의 저장 매체에 데이터를 저장
• 서버에 데이터베이스를 올리면 여러 사람이 동시에 사용

 

7.2 MySQL 설치하기

https://dev.mysql.com/downloads/installer/

MySQL :: Download MySQL Installer

[Node.js 교과서] 참고

 

7.3 워크벤치 설치하기

https://dev.mysql.com/downloads/workbench/

MySQL :: Download MySQL Workbench

[Node.js 교과서] 참고

 

7.4 데이터베이스 및 테이블 생성하기

 

📌 MySQL 자료형

자료형	의미	비고
INT	정수	소수까지 저장 : FLOAT, DOUBLE
VARCHAR	자릿수	가변길이
CHAR	자릿수	고정길이, 부족한 자릿수는 스페이스로 채운다.
TEXT	긴 글	수백 자 이상
TINYINT	-128~127까지의 정수	Boolean 대신 사용
DATETIME, DATE, TIME	날짜와 시간

 

📌 컬럼 옵션

옵션	비고
PRIMARY KEY (PR)	기본키
NULL, NOT NULL (NN)	NULL 허용 여부
UNIQUE INDEX (UQ)	고유값
BINARY (B)	데이터를 이진 문자열로 저장
UNSIGNED (UN)	음수를 무시하고 숫자 저장, FLOAT와 DOUBLE에는 적용 불가능
ZEROFILL (ZF)	숫자의 자릿수를 고정 INT(4)에 1 저장 → 0001
AUTO_INCREMENT (AI)	숫자를 자동으로 증가
GENERATED COLUMN (G)	다른 열을 기반으로 한 수식으로 생성된 값

 

 

📌 테이블 생성

users 테이블

comments 테이블

comments 테이블 외래키 설정

 

7.6 시퀄라이즈 사용하기

 

📌 시퀄라이즈

• 노드에서 MySQL 작업을 쉽게 할 수 있도록 도와주는 라이브러리
• ORM으로 분류

📌 ORM

• 자바스크립트 객체와 데이터베이스의 릴레이션을 매핑해 주는 도구
• 자바스크립트 구문을 알아서 SQL로 바꿈
• SQL 언어를 직접 사용하지 않고 자바스크립트만으로 MySQL 조작

📌 패키지 설치 및 호출

npm i express morgan nunjucks sequelize sequelize-cli mysql2
npm i -D nodemon
npx sequelize init

 

7.6.1 MySQL 연결하기

✔  app.js를 통해 익스프레스와 시퀄라이즈 연결 코드를 작성

 

1️⃣ models/index.js 확인

const Sequelize = require('sequelize');

const env = process.env.NODE_ENV || 'development';
const config = require('../config/config')[env];
const db = {};

const sequelize = new Sequelize(config.database, config.username, config.password, config);
db.sequelize = sequelize;

module.exports = db;

 

• Sequelize 모듈을 불러와 new Sequelize를 통해 MySQL 연결 객체 생성
• 나중에 재사용하기 위해 변수 db.sequelize에 저장

 

2️⃣ config/config.json 확인

{
  "development": {
    "username": "사용자 이름",
    "password": "비밀번호",
    "database": "데이터베이스명",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  ...
}

• MySQL과 연동할 때 사용되는 정보
• test, production은 각각 테스트와 배포 용도로 접속하기 위해 사용

 

3️⃣ app.js 작성

const express = require('express');
const morgan = require('morgan');
const path = require('path');
const nunjucks = require('nunjucks');

const { sequelize } = require('./models');

const app = express();
app.set('port', process.env.PORT || 3001);
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((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'), '번 포트에서 대기 중');
});

데이터베이스 연동 완료

 

7.6.2 모델 정의하기

✔  MySQL에서 정의한 테이블을 시퀄라이즈에서도 정의해야 합니다.

✔  MySQL의 테이블은 시퀄라이즈의 모델과 대응됩니다.

 

📍user.js, comment.js 작성

• User 모델을 만들어 모듈로 exports
• Sequelize.Model을 확장한 클래스로 선언

📍모델 작성법

• static initiate : 테이블에 대한 설정
• static associate : 다른 모델과의 관계 작성

📍테이블 옵션

MySQL	시퀄라이즈
VARCHAR(100)	STRING(100)
INT	INTEGER
TINYINT	BOOLEAN
DATETIME	DATE
NOT NULL	allowNull: false
UNIQUE	unique: true
DEFAULT now()	defaultValue: Sequelize.NOW

 

📍index.js 수정

const Sequelize = require('sequelize');
const User = require('./user');
const Comment = require('./comment');

const env = process.env.NODE_ENV || 'development';
const config = require('../config/config')[env];
const db = {};

const sequelize = new Sequelize(config.database, config.username, config.password, config);

db.sequelize = sequelize;

db.User = User;
db.Comment = Comment;

User.initiate(sequelize);   // 각각의 모델의 static initaiate 메서드 호출
Comment.initiate(sequelize);

User.associate(db);
Comment.associate(db);

module.exports = db;

▶️ db 객체를 이용해서 User와 Comment 모델에 접근

 

7.6.3 관계 정의하기

✔  user와 comments 테이블 간의 관계 정의

1 : N

• 사용자가 1, 댓글이 N
• 시퀄라이즈에서는 hasMany로 표현

✔ 모델 각각의 static associate에 추가

✔ 순환참조를 피하기 위해서 db 매개변수 사용

 

📍hasMany와 belongsTo

• 다른 모델의 정보가 들어가는 테이블에는 belongsTo를 사용
• hasMany 메서드 : sourceKey ⇒ id
• belongsTo 메서드 : targetKey ⇒ id

1 : 1

📍hasOne과 belongsTo

N : M

📍belongsToMany와 belongsToMany

• though 속성 사용

 

7.6.5 쿼리 수행하기

✔ 간단하게 사용자 정보를 등록하고 사용자가 등록한 댓글을 가져오는 서버를 제작해 보겠습니다.

 

1️⃣ sequelize.js 파일 생성

// 사용자 이름 눌렀을 때 댓글 로딩
document.querySelectorAll('#user-list tr').forEach((el) => {
    el.addEventListener('click', function () {
      const id = el.querySelector('td').textContent;
      getComment(id);
    });
  });
  // 사용자 로딩
  async function getUser() {
    try {
      const res = await axios.get('/users');
      const users = res.data;
      console.log(users);
      const tbody = document.querySelector('#user-list tbody');
      tbody.innerHTML = '';
      users.map(function (user) {
        const row = document.createElement('tr');
        row.addEventListener('click', () => {
          getComment(user.id);
        });
        // 로우 셀 추가
        let td = document.createElement('td');
        td.textContent = user.id;
        row.appendChild(td);
        td = document.createElement('td');
        td.textContent = user.name;
        row.appendChild(td);
        td = document.createElement('td');
        td.textContent = user.age;
        row.appendChild(td);
        td = document.createElement('td');
        td.textContent = user.married ? '기혼' : '미혼';
        row.appendChild(td);
        tbody.appendChild(row);
      });
    } catch (err) {
      console.error(err);
    }
  }
  // 댓글 로딩
  async function getComment(id) {
    try {
      const res = await axios.get(`/users/${id}/comments`);
      const comments = res.data;
      const tbody = document.querySelector('#comment-list tbody');
      tbody.innerHTML = '';
      comments.map(function (comment) {
        // 로우 셀 추가
        const row = document.createElement('tr');
        let td = document.createElement('td');
        td.textContent = comment.id;
        row.appendChild(td);
        td = document.createElement('td');
        td.textContent = comment.User.name;
        row.appendChild(td);
        td = document.createElement('td');
        td.textContent = comment.comment;
        row.appendChild(td);
        const edit = document.createElement('button');
        edit.textContent = '수정';
        edit.addEventListener('click', async () => { // 수정 클릭 시
          const newComment = prompt('바꿀 내용을 입력하세요');
          if (!newComment) {
            return alert('내용을 반드시 입력하셔야 합니다');
          }
          try {
            await axios.patch(`/comments/${comment.id}`, { comment: newComment });
            getComment(id);
          } catch (err) {
            console.error(err);
          }
        });
        const remove = document.createElement('button');
        remove.textContent = '삭제';
        remove.addEventListener('click', async () => { // 삭제 클릭 시
          try {
            await axios.delete(`/comments/${comment.id}`);
            getComment(id);
          } catch (err) {
            console.error(err);
          }
        });
        // 버튼 추가
        td = document.createElement('td');
        td.appendChild(edit);
        row.appendChild(td);
        td = document.createElement('td');
        td.appendChild(remove);
        row.appendChild(td);
        tbody.appendChild(row);
      });
    } catch (err) {
      console.error(err);
    }
  }
  // 사용자 등록 시
  document.getElementById('user-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const name = e.target.username.value;
    const age = e.target.age.value;
    const married = e.target.married.checked;
    if (!name) {
      return alert('이름을 입력하세요');
    }
    if (!age) {
      return alert('나이를 입력하세요');
    }
    try {
      await axios.post('/users', { name, age, married });
      getUser();
    } catch (err) {
      console.error(err);
    }
    e.target.username.value = '';
    e.target.age.value = '';
    e.target.married.checked = false;
  });
  // 댓글 등록 시
  document.getElementById('comment-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const id = e.target.userid.value;
    const comment = e.target.comment.value;
    if (!id) {
      return alert('아이디를 입력하세요');
    }
    if (!comment) {
      return alert('댓글을 입력하세요');
    }
    try {
      await axios.post('/comments', { id, comment });
      getComment(id);
    } catch (err) {
      console.error(err);
    }
    e.target.userid.value = '';
    e.target.comment.value = '';
  });

📌 script 태그에는 버튼들을 눌렀을 때 서버의 라우터로 AJAX 요청을 보내는 코드가 들어있습니다.

2️⃣ 라우터 생성

✔ sequelize.js에 나오는 GET, POST, PUT, DELETE 요청에 해당하는 라우터를 만듭니다.

✔ routes 폴더를 만들고 그 안에 index.js, users.js, comments.js를 작성합니다.

 

📍 index.js

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

const router = express.Router();

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;

 

📍 users.js

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

const router = express.Router();

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);
    }
  });

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;

 

📍 comments.js

const express = require('express');
const { Comment } = require('../models');

const router = express.Router();

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);
  }
});

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;

 

3️⃣ app.js에 라우터를 연결합니다.

...
const { sequelize } = require('./models');
const indexRouter = require('./routes');
const usersRouter = require('./routes/users');
const commentsRouter = require('./routes/comments');

const app = express();
...
app.use(express.urlencoded({ extended: false }));

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

 

 

---

빈칸 채우기 문제 (빈칸을 드래그해서 정답을 맞혀 보세요!)

1. 관련성을 가지며 중복이 없는 데이터들의 집합을 (데이터베이스)라고 한다.

2. MySQL의 자료형을 채우시오.

자료형	의미	비고
INT	정수	소수까지 저장 : FLOAT, DOUBLE
VARCHAR	자릿수	가변길이
CHAR	자릿수	고정길이, 부족한 자릿수는 스페이스로 채운다.
TEXT	긴 글	수백 자 이상
TINYINT	-128~127까지의 정수	Boolean 대신 사용
DATETIME, DATE, TIME	날짜와 시간

 

3. MySQL의 컬럼 옵션을 채우시오.

옵션	비고
PRIMARY KEY (PR)	기본키
NULL, NOT NULL (NN)	NULL 허용 여부
UNIQUE INDEX (UQ)	고유값
BINARY (B)	데이터를 이진 문자열로 저장
UNSIGNED (UN)	음수를 무시하고 숫자 저장, FLOAT와 DOUBLE에는 적용 불가능
ZEROFILL (ZF)	숫자의 자릿수를 고정 INT(4)에 1 저장 → 0001
AUTO_INCREMENT (AI)	숫자를 자동으로 증가
GENERATED COLUMN (G)	다른 열을 기반으로 한 수식으로 생성된 값

 

4. 테이블의 관계가 1:N일 때, 1인 모델은 (hasMany) 메서드로, N인 모델은 (belongsTo) 메서드로 관계를 표현한다.

5. 노드에서 MySQL 작업을 쉽게 할 수 있도록 도와주는 라이브러리를 (시퀄라이저)라고 한다.

6. 모델을 정의할 때, 테이블에 대한 설정은 (static initiate) 메서드를, 다른 모델과의 관계 작성은 (static associate) 메서드를 사용한다.

 

코드 문제

1. 빈칸에 들어갈 코드를 작성해 보세요.

const Sequelize = require('sequelize');

const env = process.env.NODE_ENV || 'development';
const config = require('../config/config')[env];
const db = {};

const sequelize = new Sequelize(config.{1번 빈칸}, config.{2번 빈칸}, config.{3번 빈칸}, config);
db.sequelize = sequelize;

module.exports = db;

정답: database, username, password

 

2. 빈칸에 들어갈 코드를 작성해 보세요.

const Sequelize = require('sequelize');

class Comment extends Sequelize.Model {
  static {1번 빈칸}(sequelize) {
    Comment.init({
      comment: {
        type: Sequelize.STRING(100),
        allowNull: false,
      },
      created_at: {
        type: Sequelize.DATE,
        allowNull: true,
        defaultValue: Sequelize.NOW,
      },
    }, {
      ...
  }

  static {2번 빈칸} (db) {
    db.Comment.{3번 빈칸}(db.User, { foreignKey: 'commenter', targetKey: 'id' });
  }
};

module.exports = Comment;

정답: initiate, associate, belongsTo

 

---

Node.js #2 

Editor : 파오리