티스토리 뷰

흥미/Node.js+MongoDB

#22 글 수정 기능1 - method-override

RadderNepa 2023. 5. 13. 04:50

● edit.ejs 페이지 만들기

- 수정 기능은 여러가지 방법으로 구현할 수 있는데 가장 쉬운 방법은 edit 페이지를 따로 만드는 것이다. 
- 다른 방법으로는 /write 경로의 페이지를 그대로 사용하되 전송시 POST 요청이 아니라 '수정(PUT)' 요청으로 바꾸는 방법도 있다.
- 이번 글에서는 edit.ejs 페이지를 만들어 수정 기능을 만들어보고자 한다.

(views/edit.ejs)
- write.ejs 내용 전체를 동일하게 복붙했다.
- 차이점은 아래와 같이 <input> 태그에 "value 속성을 넣어야한다는 것"이다.
- value 속성을 넣으면 <input> 태그에 미리 채워진 값을 설정할 수 있다.

<input type="text" value="111111">
--> "111111"이라는 값을 <input>에 미리 채워준다. 
--> "111111"은 예시이고 <input>에 각 게시물의 제목과 날짜를 넣어주면 수정하기 더 편할 것이다.
(views/edit.ejs)

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
    <div class="pos-f-t">
        <div class="collapse" id="navbarToggleExternalContent">
        <div class="bg-dark p-4">
            <h5 class="text-white h4">Collapsed content</h5>
            <span class="text-muted">Toggleable via the navbar brand.</span>
        </div>
        </div>
        <!-- nav -->
        <%- include('nav.html') %>
    </div>

    <h4 class="container mt-4"><strong>글 수정페이지</strong></h4>

    <div class="container mt-3">
        <form action="/add" method="POST">
            <div class="form-group">
                <label>오늘의 할일</label>
                <input type="text" class="form-control" name="title" value="<%= post.title %>">
            </div>
            <div class="form-group">
                <label>날짜</label>
                <input type="text" class="form-control" name="date" value="<%= post.date %>">
            </div>
            <button type="submit" class="btn btn-outline-secondary">Submit</button>
        </form>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>

● edit.ejs 페이지 렌더링, <input value="?">에 게시글 내용, 날짜 넣어주기

- 사용자가 '/edit'로 접속하면 edit.ejs를 렌더링 해주는 코드를 작성하자

(server.js)
app.get('/edit', (req, res) => {
    res.render('edit.ejs');
});

- 더 디테일하게 해보자

- 게시물마다 각각 다른 edit 페이지가 구성되어야 한다. 
- 쉽게 말해 2번 게시물과 4번 게시물의 edit.ejs는 게시물 번호(_id)에 따라 <inpuit>의 내용이 달라야한다는 것이다.

ex) /edit/2로 접속하면 2번 게시물 수정 화면이 보인다.

- 아래와 같이 server.js 코드를 수정해보자

(server.js)
app.get('/edit/:id', (req, res) => {
    db.collection("post").findOne({_id : parseInt(req.params.id)}, (error, result) => {
        if(result) res.render('edit.ejs', {post : result});       
        else res.render('edit.ejs', {post : { // 글이 없는 경우에 대한 처리
            title : `${req.params.id}번까지 글 작성 안함`,
            date : "0000/00/00"
        }});
    });
});

1. findOne function을 이용해 (_id = :id)인 게시물을 DB에서 찾는다. * parseInt는 필수
2. 찾은 결과를 post라는 이름으로 edit.ejs에 보내준다.  →  {post : result}

3. DB에서 찾은 데이터를 edit.ejs의 <input>에 꽂아 넣어주자

(views/edit.ejs)

<div class="container mt-3">
    <form action="/add" method="POST">
        <div class="form-group">
            <label>오늘의 할일</label>
            <input type="text" class="form-control" name="title" value="<%= post.title %>">
        </div>
        <div class="form-group">
            <label>날짜</label>
            <input type="text" class="form-control" name="date" value="<%= post.date %>">
        </div>
        <button type="submit" class="btn btn-outline-secondary">Submit</button>
    </form>
</div>

http://localhost:8080/edit/2
http://localhost:8080/edit/6
http://localhost:8080/edit/21

● method-override 라이브러리 : 서버에 PUT 수정 요청 날리는 방법

- edit.ejs에서 submit 버튼을 누르면 서버에 수정 요청을 하도록 해보자 
- Restful API에서 서버에 요청할 수 있는 방법은 4가지이며(GET, POST, PUT, DELETE) 이 중 수정은 PUT 요청을 이용
- 그러면 edit.ejs의 <form> 태그의 method 속성을 아래와 같이 바꾸면 될까?

(views/edit.ejs)
<form action="/edit" method="PUT">
  <input...>
</form>

- 그러나 <form> 태그의 method 속성은 POST와 GET 방식만 지원한다. 따라서 PUT 요청 방법은 2가지가 있다.

1. AJAX
2. PUT을 반드시 <form> 태그에서 써야한다면 → method-override 라이브러리 설치

- 아래의 과정을 따라 method-override를 설치해보자

1. 터미널에 아래의 명령어를 입력해 method-override 설치
npm install method-override

2. server.js 상단에 아래의 코드를 추가
const methodOverride = require('method-override');
app.use(methodOverride('_method'));

3. 이제부터 <form> 태그에 PUT요청 사용 가능
(edit.ejs)
<form action="/add?_method=PUT" method="POST">
   <input...>
</form>

 

- <form> 태그에서 위와 같이 URL(/add)과 method(?_method=PUT)를 작성하면 <form> 전송시 /add 경로로 PUT 요청을 할 수 있다.
- PUT 요청이 가능해졌으므로 다음 글에서는 PUT 요청을 받아 DB 게시물 데이터를 수정해주는 서버 코드를 작성해보자

method-override 라이브러리 설치

'흥미 > Node.js+MongoDB' 카테고리의 다른 글

#24 회원인증 방법 - Session, JWT, OAuth 알아보기  (0) 2023.05.19
#23 글 수정 기능2 - DB 데이터 수정 / redirect  (0) 2023.05.18
#21 HTML 디자인 & HTML 조립식 개발  (0) 2023.05.03
#20 URL parameter로 상세페이지 만들기  (0) 2023.04.30
#19 AJAX로 삭제하기3(jQuery를 이용한 UI 기능) & HTTP 응답  (0) 2023.04.29
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함