๐ŸŒ• The Art of React part1

pluviabc1ยท2021๋…„ 1์›” 1์ผ
0

โ„๏ธ ํ”„๋กœ์ ํŠธ ์ •๋ฆฌ

  • Koa๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐฑ์—”๋“œ ์„œ๋ฒ„๋ฅผ ๋งŒ๋“œ๋Š” ๊ธฐ๋ณธ ๊ฐœ๋…์— ๋Œ€ํ•ด์„œ ๊ณต๋ถ€ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • REST API๋ฅผ ์‚ดํŽด๋ณด๊ณ  ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฐฐ์—ด์„ ํ†ตํ•ด ๋ฐฐ์›Œ๋ณด์•˜์Šต๋‹ˆ๋‹ค.
  • koa-router๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ฒฝ๋กœ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ค๋‹ˆ๋‹ค.
  • MongoDB๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ๊ด€๋ฆฌํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

โ˜ƒ๏ธ ์ฝ”๋“œ

//post/index.js
const Router = require('koa-router');
const postsCtrl = require('./posts.ctrl');

const posts = new Router();

posts.get('/', postsCtrl.list);
posts.post('/', postsCtrl.write);
posts.get('/:id', postsCtrl.read);
posts.delete('/:id', postsCtrl.remove);
posts.put('/:id', postsCtrl.replace);
posts.patch('/:id', postsCtrl.update);

module.exports = posts;

//posts.ctrl.js
let postId = 1; // id์˜ ์ดˆ๊นƒ๊ฐ’์ž…๋‹ˆ๋‹ค.

// posts ๋ฐฐ์—ด ์ดˆ๊ธฐ ๋ฐ์ดํ„ฐ
const posts = [
    {
        id: 1,
        title: '์ œ๋ชฉ',
        body: '๋‚ด์šฉ',
    },
];

/* ํฌ์ŠคํŠธ ์ž‘์„ฑ
POST /api/posts
{ title, body }
*/
exports.write = ctx => {
    // REST API์˜ request body๋Š” ctx.request.body์—์„œ ์กฐํšŒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    const { title, body } = ctx.request.body;
    postId += 1; // ๊ธฐ์กด postId ๊ฐ’์— 1์„ ๋”ํ•ฉ๋‹ˆ๋‹ค.
    const post = { id: postId, title, body };
    console.log(post)
    posts.push(post);
    ctx.body = post;
};

/* ํฌ์ŠคํŠธ ๋ชฉ๋ก ์กฐํšŒ
GET /api/posts
*/
exports.list = ctx => {
    ctx.body = posts;
};

/* ํŠน์ • ํฌ์ŠคํŠธ ์กฐํšŒ
GET /api/posts/:id
*/
exports.read = ctx => {
    const { id } = ctx.params;
    // ์ฃผ์–ด์ง„ id ๊ฐ’์œผ๋กœ ํฌ์ŠคํŠธ๋ฅผ ์ฐพ์Šต๋‹ˆ๋‹ค.
    // ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋ฐ›์•„ ์˜จ ๊ฐ’์€ ๋ฌธ์ž์—ด ํ˜•์‹์ด๋‹ˆ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•˜๊ฑฐ๋‚˜,
    // ๋น„๊ตํ•  p.id ๊ฐ’์„ ๋ฌธ์ž์—ด๋กœ ๋ณ€๊ฒฝํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
    const post = posts.find(p => p.id.toString() === id);
    // ํฌ์ŠคํŠธ๊ฐ€ ์—†์œผ๋ฉด ์˜ค๋ฅ˜๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
    if (!post) {
        ctx.status = 404;
        ctx.body = {
            message: 'ํฌ์ŠคํŠธ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.',
        };
        return;
    }
    ctx.body = post;
};

/* ํŠน์ • ํฌ์ŠคํŠธ ์ œ๊ฑฐ
DELETE /api/posts/:id
*/
exports.remove = ctx => {
    const { id } = ctx.params;
    // ํ•ด๋‹น id๋ฅผ ๊ฐ€์ง„ post๊ฐ€ ๋ช‡ ๋ฒˆ์งธ์ธ์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.
    const index = posts.findIndex(p => p.id.toString() === id);
    // ํฌ์ŠคํŠธ๊ฐ€ ์—†์œผ๋ฉด ์˜ค๋ฅ˜๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
    if (index === -1) {
        ctx.status = 404;
        ctx.body = {
            message: 'ํฌ์ŠคํŠธ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.',
        };
        return;
    }
    // index๋ฒˆ์งธ ์•„์ดํ…œ์„ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.
    posts.splice(index, 1);
    ctx.status = 204; // No Content
};

/* ํฌ์ŠคํŠธ ์ˆ˜์ •(๊ต์ฒด)
PUT /api/posts/:id
{ title, body }
*/
exports.replace = ctx => {
    // PUT ๋ฉ”์„œ๋“œ๋Š” ์ „์ฒด ํฌ์ŠคํŠธ ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ํ†ต์งธ๋กœ ๊ต์ฒดํ•  ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
    const { id } = ctx.params;
    // ํ•ด๋‹น id๋ฅผ ๊ฐ€์ง„ post๊ฐ€ ๋ช‡ ๋ฒˆ์งธ์ธ์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.
    const index = posts.findIndex(p => p.id.toString() === id);
    // ํฌ์ŠคํŠธ๊ฐ€ ์—†์œผ๋ฉด ์˜ค๋ฅ˜๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
    if (index === -1) {
        ctx.status = 404;
        ctx.body = {
            message: 'ํฌ์ŠคํŠธ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.',
        };
        return;
    }
    // ์ „์ฒด ๊ฐ์ฒด๋ฅผ ๋ฎ์–ด์”Œ์›๋‹ˆ๋‹ค.
    // ๋”ฐ๋ผ์„œ id๋ฅผ ์ œ์™ธํ•œ ๊ธฐ์กด ์ •๋ณด๋ฅผ ๋‚ ๋ฆฌ๊ณ , ๊ฐ์ฒด๋ฅผ ์ƒˆ๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
    posts[index] = {
        id,
        ...ctx.request.body,
    };
    ctx.body = posts[index];
};

/* ํฌ์ŠคํŠธ ์ˆ˜์ •(ํŠน์ • ํ•„๋“œ ๋ณ€๊ฒฝ)
PATCH /api/posts/:id
{ title, body }
*/
exports.update = ctx => {
    // PATCH ๋ฉ”์„œ๋“œ๋Š” ์ฃผ์–ด์ง„ ํ•„๋“œ๋งŒ ๊ต์ฒดํ•ฉ๋‹ˆ๋‹ค.
    const { id } = ctx.params;
    // ํ•ด๋‹น id๋ฅผ ๊ฐ€์ง„ post๊ฐ€ ๋ช‡ ๋ฒˆ์งธ์ธ์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.
    const index = posts.findIndex(p => p.id.toString() === id);
    // ํฌ์ŠคํŠธ๊ฐ€ ์—†์œผ๋ฉด ์˜ค๋ฅ˜๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
    if (index === -1) {
        ctx.status = 404;
        ctx.body = {
            message: 'ํฌ์ŠคํŠธ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.',
        };
        return;
    }
    // ๊ธฐ์กด ๊ฐ’์— ์ •๋ณด๋ฅผ ๋ฎ์–ด์”Œ์›๋‹ˆ๋‹ค.
    posts[index] = {
        ...posts[index],
        ...ctx.request.body,
    };
    ctx.body = posts[index];
};

0๊ฐœ์˜ ๋Œ“๊ธ€