Next.js 프로젝트(4)

 

 

 게시글 수정기능

 

 이번엔 CRUD의 Update

 

 Create 랑 별로 다르진 않지만 한가지 더 추가 된 느낌이다.

 

 버튼을 눌렀을 때,

 그 해당 버튼 게시글을 DB에서 꺼내와 수정한 걸 다시 서버로 보내고 그걸 다시 DB에 저장시킨다는 개념

 

  먼저 dynamic route를 사용해서 수정할 URL을 만들어주고 -> 수정페이지를 일일히 만들필요없게

 

 /edit/[id]/page.js

import { connectDB } from "@/util/database.js"  // DB에서 자료 꺼내오기

import { ObjectId } from "mongodb";                   // objectid를 사용

export default async function Edit (props){

    let db = (await connectDB).db('forum');

    let result = await db.collection('post').findOne({ _id: new ObjectId(props.params.id)}) // 맞는 Id의 값을 가져오기

 

    return (

        <div className="p-20">

            <h4>글 수정</h4>

            <form action="/api/post/edit" method="POST">          // 해당 api에 맞게 작성

                <input name="title" placeholder="제목" defaultValue={result.title}></input>  // value만 쓰니 수정이 안됨

                <input name="content" placeholder="내용" defaultValue={result.content}></input>

                <input style={{display:'none'}} name="content" placeholder="내용" defaultValue={result._id.toString()}></input>

                   // ID값을 클라이언트에서 요청하기 위해서 작성

                <button type="submit">수정</button>

            </form>

        </div>

    )

}

 

  update도 create와 마찬가지로 DB의 자료를 바로 수정할 수 없게 서버를 거치도록 해야 한다

 그게 뭐라고? 3tier architecture 란다.

 

 그래서 맞는 /pages/api/post/edit.js를 작성 

 

import { connectDB } from "@/util/database"

export default async function handler(res, req){

    if (res.method == 'POST'){        // 메소드가 POST일 때 -> 요즘은 PATCH를 잘 안쓴다고.. GET과 POST면 충분

        let data = {title : res.body.title, content : res.body.content}

         // id값을 클라이언트에서 받아오기 때문에 새로운 data로 변환

        if (res.body.title == '') {           // 안 쓰여져있을 때

          return req.status(500).json('제목써라')

        }

        let db = (await connectDB).db('forum')

          let result = await db.collection('post').updateOne(         // 여기 중요! 사용법 숙지

            {_id : new Object(res.body._id) }, { $set : data }

          )

          req.redirect(302, '/list')

          console.log(result)

      }

}

 

공식 문서

https://www.mongodb.com/docs/manual/reference/method/db.collection.updateOne/

 

 server에서 DB로 update된 자료를 보내기 위해서 사용해야하는 메소드이다.