글 작성 기능 구현 - 2. Create, Read

앞에 글에서 에디터를 만들었으므로 이제 본격적으로 글 작성 수정 삭제 기능을 구현할 겁니다.

우선 SQL서버에 post 테이블을 만들어줍니다.

post는 id, category, title, written time, body, views 열을 만들어줬습니다.

우선 write.pug 파일 맨 아래에 submit타입의 인풋을 만들어 작성 버튼을 만들어줍니다.

그리고 routes폴더 아래의 post.js 파일에서 write라우트를 하나 아래와 같이 만들어줍니다.

router.post('/write', (req, res) => {
    if (CheckAuth(req, res)) {
        let category = req.database.escape(req.body.category);
        let title = req.database.escape(req.body.title);
        let body = req.database.escape(req.body.body);

        req.database.query(
            'INSERT INTO post (category, title, writtentime, body, views)' +
                `VALUES (${category}, ${title}, '${moment().format()}', ${body}, 0);`,
            (err, result) => {
                if (err) throw err;

                console.log(req.body);

                res.status(200).redirect(`/post/${result.insertId}`);
            }
        );
    }
});

이러면 req오브젝트에 quill에디터의 본문이 저장되지 않으므로 quill-write,js 파일에서 아래 코드를 추가해줍니다.

let form = document.querySelector('form');

form.onsubmit = function () {
    // Populate hidden form on submit

    let about = document.querySelector('input[name=body]');

    about.value = JSON.stringify(quill.getContents());

    console.log(about.value);
};

그러면 이제 글 작성 기능은 끝났습니다.

이제 작성한 글을 볼 수 있어야 되니까 post.js에서 export 바로 위에 아래 라우트를 추가해 줍니다.

router.get('/:id', (req, res) => {
    if (Number.isInteger(Number(req.params.id))) {
        Render(res, req, req.params.id);
    } else {
        res.send('비정상적인 접근입니다.');
    }
});

function Render(res, req, postId) {
    req.database.query(`SELECT * FROM POST WHERE id = ${postId};`, (err, post) => {
        if (err) {
            throw err;
        }

        if (post.length === 0) {
            res.send('존재하지 않는 글입니다.');
        }

        if (!req.session.nickname) {
            req.database.query(`UPDATE post SET views = views + 1 WHERE id = ${postId};`);
        }

        post[0].writtentime = moment(post[0].writtentime).format('YYYY.MM.DD. HH:mm');

        post[0].views++;

        res.status(200).render('post', {
            session: req.session,

            post: post[0],

            categories: req.categories
        });
    });
}

이 라우트는 반드시 맨 아래에 있어야 되는데 만약 위에 있게되면 post/write같은 요청이 들어왔을 때 write를 id로 인식하게 됩니다.

이제 post.pug 파일을 아래처럼 만들어 줍니다.

extends layout

block post
  script(src="https://cdn.quilljs.com/1.3.6/quill.js")
  link(href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet")
  link(href="/stylesheets/quill-snow-readonly.css" rel="stylesheet")
  link(rel='stylesheet', href='/stylesheets/post.css')

  article
    a(href = '/category/' + categories.find(e=> e.name === post.category).url)
      h4.category= post.category
    h1.BodyTitle= post.title
    small.BodyDateTime= post.writtentime + ` | 조회 ${post.views}`
    #editor-container= post.body

    if(session.nickname)
      .deletenedit
        form.delete-container(action = `update` method='post')
          input.delete-text(type='hidden' name='id' value=post.id)
          input(type='submit' value='수정')
        form.delete-container(action = `delete` method='post')
          input.delete-text(type='hidden' name='id' value=post.id)
          input(type='submit' value='삭제')

  script(src = '/scripts/quill-post.js')

그리고 scripts폴더 아래에 quill-post를 아래와 같이 만들어줍니다.

let quill = new Quill('#editor-container', {
    modules: {
        toolbar: []
    },
    placeholder: '본문',
    readOnly: true,
    theme: 'snow' // or 'bubble'
});

let v = quill.getContents().ops[0].insert;

quill.setContents(JSON.parse(v));

이제 글을 작성 하면 작성된 글로 리다이렉션 됩니다.

다음 글에서는 수정, 삭제를 다루겠습니다.