프로그래밍 언어/Node.js

[RESTful 라우트] RESTful 주석 - 새로운 댓글 생성하기 (CRUD: Create)

jjinny_0609 2023. 11. 14. 14:13
728x90

이번 글에서는 RESTful 주석 시스템에서 새로운 댓글을 생성하는 방법에 대해 알아보겠습니다. CRUD에서의 'C'는 'Create'로, 사용자가 새로운 댓글을 생성하는 과정입니다. 현재는 실제 데이터베이스를 사용하지 않고 배열에 데이터를 저장하는 방식을 적용하겠습니다.

 

새로운 댓글 폼 만들기

새로운 댓글을 생성하기 위해서는 사용자에게 제출할 수 있는 폼이 필요합니다. 이를 위해 'New' 라우트를 만들어 폼을 렌더링하고, 사용자가 폼을 통해 댓글을 제출하면 데이터가 해당 라우트로 전송됩니다.

// app.js
app.get('/comments/new', (req, res) => {
    res.render('comments/new');
});

위 코드에서는 /comments/new로 오는 Get 요청을 처리하여, 새로운 댓글을 작성할 수 있는 폼을 렌더링합니다.

 

새로운 댓글 폼 구현

댓글을 입력할 수 있는 폼을 만들기 위해 EJS 템플릿을 활용합니다. 해당 템플릿은 comments/new.ejs에 위치하며, 사용자에게 입력 폼을 제공합니다.

<!-- comments/new.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Comment</title>
</head>
<body>
    <h1>New Comment</h1>
    <form action="/comments" method="POST">
        <label for="username">Enter username:</label>
        <input type="text" id="username" name="username" placeholder="Username" required>
        
        <label for="comment">Comment Text:</label>
        <textarea id="comment" name="comment" rows="5" placeholder="Write your comment here" required></textarea>
        
        <br>
        
        <button type="submit">Submit</button>
    </form>
</body>
</html>

위의 코드에서는 사용자에게 이름과 댓글을 입력할 수 있는 폼을 제공합니다. 폼의 action 속성은 /comments로, method 속성은 POST로 설정되어 있습니다. 사용자가 제출하면 해당 데이터는 /comments로 POST 요청되어야 합니다.

 

새로운 댓긋 생성 라우트 설정

새로운 댓글을 생성하기 위한 Post 라우트를 설정합니다. 이 라우트에서는 폼에서 제출된 데이터를 가져와 배열에 새로운 댓글로 추가합니다.

// app.js
app.post('/comments', (req, res) => {
    const { username, comment } = req.body;
    comments.push({ username, comment });
    res.send("IT WORKED!");
});

위의 코드에서는 req.body에서 사용자의 이름과 댓글을 추출하여, 해당 데이터를 배열인 comments에 추가합니다.

 

폼에 입력 후 제출
http://localhost:3000/comments

 

이번 글에서는 새로운 댓글을 생성하는 과정을 구현했습니다. 사용자에게 폼을 제공하고, 그 폼에서 제출된 데이터를 받아와 배열에 추가함으로써 댓글이 생성됩니다. 현재는 데이터베이스를 사용하지 않았지만, 이후에는 실제 데이터베이스에 데이터를 저장하는 방식으로 발전시켜 나갈 것입니다. 다음 글에서는 업데이트와 삭제 기능을 추가하여 전체적인 CRUD를 완성해보도록 하겠습니다. 계속 진행해주세요 ! 🚀

728x90