학교커뮤니티개발(#2) - react+nodejs CRUD 게시판 구현하기

안녕하세요. 이번에는 react와 nodejs로 게시판을 만드는 방법에 대해 알아보도록 하겠습니다.

---------------

운영체제:linux

사용한 DB:mysql

---------------

먼저 생성한 프로젝트에 "npm i mysql2 sequelize --save"를 입력하여 sequelize 를 프로젝트에 설치해줍니다.

Sequelize는 데이터베이스를 조금더 편하게 관리할 수 있는 ORM로 sql문을 몰라도 객체를 통해 CRUD기능을 구현 할수 있습니다.

 

그리고 sequelize init를 입력하여 프로젝트에 sequelize를 초기화 시켜주세요

입력하시면 이렇게 config, migrations,models 라는 폴더들이 생깁니다.

 

config 폴더에 들어가셔서 "touch config.js"라는 파일을 만들어주세요.

눈치 빠르신 분들은 아시겠지만 config파일은 db비밀번호, 서버, 비밀번호를 입력하고 db와 서버를 연결시켜주는 기능을 합니다.

 

config파일은 이렇게 생겼는데 우리는 개발용으로 사용할것이기 때문에 development객체에만 유저네임,패스워드,데이터베이스 이름, 호스트 이름을 적어주세요. 호스트 이름은 db가 있는 서버를 적어주시면 됩니다.(localhost 이런거요)

{
  "development": {
    "username": "",
    "password": "",
    "database": "",
    "host": "",
    "dialect": "mysql"
  },
  "test": {
    "username": "root",
    "password": null,
    "database": "database_test",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "production": {
    "username": "root",
    "password": null,
    "database": "database_production",
    "host": "127.0.0.1",
    "dialect": "mysql"
  }
}

 

config.js파일을 작성해주셨다면 테이블을 만들어야 합니다.

저희는 게시글을 저장할 테이블을 만들기 때문에 테이블 칼럼에는 제목,내용,작성자,작성시간등이 표시되어야 하겠죠?

 

터미널에 아래 명령어를 입력하여 게시글 모델을 생성해주겠습니다.

sequelize model:create --name board --attributes "title:string, description:text, author:string"

위 명령어는 sequelize 모델을 만드는 명령어인데 --name board에서 board가 테이블의 이름, attributes의 key가 테이블의 칼럼이됩니다. 그리고 attributes의 value가 테이블 칼럼의 타입이 되구요...! 

또한 string은 127자 밖에 입력이 안되는데 text는 많이 입력되서 글내용은 text로 데이터타입을 지정했습니다.(정확히 몇자인지는 모르겠네요. 데이터타입에 관해서는 여기를 참고해주세요.)

 

위 명령어를 입력하시면 프로젝트 폴더의 models와 migrations폴더에 다음과 같은 파일이 생성될것입니다.

post.js

오늘날짜-create-post.js

 

models 폴더에 있는 post.js파일을 열어보겠습니다.

'use strict';
module.exports = (sequelize, DataTypes) => {
  var board = sequelize.define('board', {
      author: {
        allowNull: false,  
        type: DataTypes.STRING,
      },
      title: {
        allowNull: false,   
        type: DataTypes.STRING,
      },
      description: {
        allowNull: false,   
        type: DataTypes.TEXT,
      }
  });
  
  
  return board;
};

객체를 통해 모델관리를 쉽게 할수 있네요. 저는 allownull을 통해 다 빈값이 들어가지 못하도록 설정해주었습니다.

 

그리고 마이그레이션 폴더에 있는 파일도 보도록 하겠습니다.

'use strict';
module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.createTable('boards', {
      id: {
        type: Sequelize.INTEGER,
        autoIncrement: true,
        allowNull: false,
        primaryKey: true,
      },   
      author: {
        allowNull: false,
        type: Sequelize.STRING,
      },
      title: {
        allowNull: false,
        type: Sequelize.STRING,
      },
      description: {
        allowNull: false,
        type: Sequelize.TEXT,
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE,
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE,
      }
    });
  },
  down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable('boards');
  }
};

4번째 줄에 await queryInterface.createTable('boards', { 라는 내용이 있는데 이 코드는 boards라는 테이블을 만드는 코드입니다. Create table 에서 boards를 다른이름으로 바꾸어주면 그 이름으로 테이블이 생성됩니다.

또한 자동으로 auto increment와 primary 키가 적용된 아이디와 날짜 칼럼이 생성되기때문에 따로 칼럼을 만들어줄 필요가 없습니다.

 

본인이 타입이나 칼럼명같은거 수정하고 싶으신게 있으면 수정하시고 터미널에 "sequelize db:migration"을 입력해주세요.

== 20210708145224-create-board: migrating =======
== 20210708145224-create-board: migrated (0.072s)

위와같은 명령어가 뜨면 마이그레이션에 성공한 것입니다.

Db콘솔에서 SHOW TABLES;를 입력해보시면 우리가 만든 테이블 모델과 똑같은 테이블이 생성되어있을거에요.

 

이제 본격적으로 게시글을 쓰고 등록하는 기능을 구현해보도록 하겠습니다.

먼저 프론트엔드 폴더에서 "npm i axios --save"를 입력하셔서 axios를 설치해주세요.

axios는 비동기 통신 모듈인데 폼을 서버로 보낼때 사용됩니다.

그리고 프론트엔드에 제목, 글내용이 있는 폼을 하나 만들어주세요.

아래 링크는 제가 만든  폼입니다.

https://github.com/sookmyunghighschool/community/blob/main/src/pages/write.js

폼 양식은 자유롭게 만들어주시고 버튼을 눌렀을 때 폼을 제출하는 핸들러는 다음과 같이 만들어주세요.

const handleSubmit = ()=>{
    var bodyFormData = new FormData();
    bodyFormData.append('title', inputs.title); 
    bodyFormData.append('description', inputs.description); 
    bodyFormData.append('author', 'admin'); 
    
      axios({
  method: "post",
  url: "/api/board/create",
  data: bodyFormData,
  headers: { "Content-Type": "multipart/form-data" },
})
  .then(function (res) {
       if(res.data==="okay"){
           window.location.href="/board/"+category//글을 등록하고 리다이렉팅할 장소
       }
    })
  .catch(function (response) {
      alert("error")
  });
  }

Axios를 통해 서버와 통신을 한후 db에 데이터를 저장하고 okay라는 response가 오면 지정된 주소로 리다이렉팅 되는 구조입니다.

 

이제 서버소스를 작성해주겠습니다.

라우터에 board.js라는 파일을 만들어주시고 먼저 아래와 같이 입력해주세요.

router.post('/create', function(req, res, next) {
      let body = req.body;
      models.board.create({
        author:body.author,
        title: body.title,
        description: body.description
    })
        .then( result => {
            console.log("데이터 추가 완료");
            res.send("okay");
        })
        .catch( err => {
            console.log(err);
            res.send("fail")
        })
});

models.board.create는 board란 테이블에 새로운 row를 만듭니다.

폼데이터가 있는 req.body를 body라는 변수로 설정하고 body에서 타이틀과 description,author을 꺼내어 db에 등록합니다. 잘 되나 한번 볼까요?

위 사진처럼 제목에 "테스트" 내용에 "테스트글"이라고 입력하고 글등록을 눌렀습니다.

 

DB를 조회해보니 아래사진처럼 잘 등록이 되었네요.

글을 만들었다면 읽을 수 있어야합니다.

다음으로 Read기능을 만들어보겠습니다.

Sequelize에는 findOne과 findAll이 있습니다.

findOne은 말 그대로 하나의 값만 가져오는 것이고 findAll은 전부다 가져오는 것입니다.

포스트를 읽는건 하나만 가져와도 되니 findOne을 사용할수 있습니다.

route.('/read',function(req,res,next){
let body=req.body
models.board.findOne({
    where: {id: body.postid}
  })
  .then( result => {
    res.send(result)
  })
  .catch( err => {
    console.log("실패");
  });
  })

위 코드처럼 findOne과 where을 통해 id가 body.postid인 값 하나를 찾아 가져옵니다.

그리고 response로 가져온 값을 클라이언트로 보내는데 적당히 잘 가공하셔서 구현하시면 됩니다.

저는 이렇게 아래 사진처럼 url 뒤쪽값을 글 아이디로 설정하여 서버로 보냈습니다.

이제 삭제 기능을 구현해 봅시다.

삭제는 정말 쉬운데 models.destroy로 구현할 수 있습니다.

route.delete('/delete',function(req,res,next){
let body=req.body
models.board.destroy({
    where: {id: postid}
  })
  .then( result => {
    res.send('ok')
  })
  .catch( err => {
    console.log("데이터 삭제 실패");
  });
  })

그냥 이런식으로 구현하시고 버튼 클릭하면 글 아이디를 서버로 넘겨주면 됩니다.

하지만 저는 실제로 삭제를 하는건 아니고 유저에게만 안보이게 하는 방식을 선호합니다.

 

수정은 제가 따로 프론트엔드를 만들지는 않아서 백엔드만 써보도록 하겠습니다.

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

    models.board.update({
        title: body.title2,
        description: body.description2
    },{
        where: {id: body.postid}
    })
        .then( result => {
            res.send("ok");
        })
        .catch( err => {
            console.log("수정 실패");
        });
});

models.update를 사용하여 where절에있는 postid에 해당하는 title과 description을 title2와 description2로 바꿔줍니다. 

 

이상으로 react와 nodejs로 crud게시판 구현하기였습니다. 다음글은 사진을 올릴수있는 게시판 만들기입니다.