[Next.js] 게시판 만들기(4) 게시글 수정기능 만들기 feat.mongoDB

해당 내용은 코딩애플의 Next.js 강의 내용을 기반으로 하고 있다는 것을 알려드립니다.

---

핵심 로직

1. 수정 버튼 만들기
2. 수정할 글 가져오기
3. 전송 버튼 누르면 서버에 수정 요청
4. 서버에서 확인 후 DB 데이터 수정

 

수정 버튼 만들기

Hint & Idea

• dynamic Route를 사용할 것을 염두하기

⬇정답 보기⬇

// 수정 버튼을 누르면 수정에 관한 페이지로 이동하게 URL 작성
<Link href={'/edit/' + result[i]._id}>수정버튼</Link>

 

수정할 글 가져오기

Hint & Idea

• 수정 페이지 파일 만들기
• findOne() 함수를 통해 DB에서 데이터 가져오기

⬇정답 보기⬇

import { ObjectId } from "mongodb";
import { connectDB } from "@/util/database.js"

export default async function Edit(props) {
// 상세페이지를 만들 때와 같이 URL 정보를 이용해서 DB에서 데이터 가져오기
  let db = (await connectDB).db('DB 이름')
  let result = await db.collection('컬렉션 이름').findOne({_id : ObjectId(props.params.id)});
 
 (생략)
}

 

전송 버튼 누르면 서버에 수정 요청

Hint & Idea

• 글 작성 페이지를 같게 만들기
• form 태그 활용하기
• action, method에 올바른 속성 값 넣기
• 기존 글 작성 데이터 출력하기
• 서버에 수정 요청하기

⬇정답 보기⬇

 return (
 	// form 태그를 이용해서 서버에 POST 요청하기
    <div>
    // action에서 서버 주소를,
    // method에는 정보를 보내는 것이기 때문에 POST를 작성
      <form action="수정 서버로 이동할 URL" method="POST">
      
      // 클라이언트 컴포넌트와 다르게 useState를 사용할 수 없고,
      // defaultValue 속성을 통해 기존 값 출력하기
      // name 속성을 통해 서버에 데이터 전달하기
        <input name="title" defaultValue={result.title} />
        <input name="content" defaultValue={result.content} />
        
        // 수정버튼을 클릭하면 위에 작성한 서버 주소로 POST 요청
        <button type="submit">수정하기</button>
      </form>
    </div>
  )

 

서버에서 확인 후 DB 데이터 수정

Hint & Idea

• 위에 작성한 경로에 맞게 수정 서버 파일 만들기
• 어떤 파일을 수정해야 하는 것인지 서버에서 알려주기
• input 태그의 name 속성값을 가져오기
• title, content 내용이 없다면 등의 오류 처리하기
• updateOne 함수를 통해 데이터 수정하기

⬇정답 보기⬇

위 수정 페이지에 input 태그 추가하기

// 서버에 어떤 데이터를 수정해야 하는지 알려주기 위해 ID값도 같이 전송
// ID는 중요한 값이기 때문에 type을 hidden으로 해서 숨기기

<input type="hidden" name="_id"/>

import { connectDB } from "@/util/database";
import { ObjectId } from "mongodb";

export default async function handler(req, res) {
	// 요청받는 method가 POST인지 확인
    if (req.method === "POST") {
    	// name 속성값 변수에 저장하기
        const { id, title, content } = req.body;

        // MongoDB의 ObjectId 형식인지 확인
        // ObjectId 형식이 아닐 경우 수정이 안 될 수 있음
        const idObject = new ObjectId(id);

		// 제목, 내용이 빈칸인지 확인
        if (!title) {
            return res.status(400).json("제목을 입력해주세요");
        }

        if (!content) {
            return res.status(400).json("내용을 입력해주세요");
        }

        const db = (await connectDB).db("DB 이름");

        await db
            .collection("컬렉션 이름")
            // updateOne({수정할 게시물 정보}, {$set: {수정할 내용}})
            .updateOne(
                { _id: idObject },
                { $set: { title, content } }
            );
        // 수정이 완료되면 list 페이지로 이동
        return res.redirect(302, "/list");
    }
}