[Next.js] 삭제 기능 만드는 방법 (2)

 listItem.js 에서 삭제기능 구현하기

7) 삭제 버튼 누르면 서버로 삭제 요청 보내기

ajax 의 fetch() 라는 함수 이용.

삭제버튼을 누르면

저 URL (/api/post/delete = 서버경로) 로

DELETE 메소드로 요청을 보내기.

8) 서버경로에 맞는 파일 생성
/api/post/delete

서버 파일 생성.

컴포넌트도 채워주기.

9) 서버에 글 삭제 코드 짜기
서버에 DB 글 삭제하라고 지시(요청)해야하니
서버 파일 안에는 DB글 삭제할 수 있도록 코드 짜야함.
= deletOne() = document 하나 삭제.

누가 이 서버로 요청을 하면

DB에 있는 글을 삭제할 수 있게끔 하는게 서버의 역할

if 조건문 사용해서 

Delete 요청을 받았을 경우를 써주기. 

DB 갖고오는 코드 작성해주고

deletOne함수 사용. 

 

deleteOne 안에는 삭제할 게시물의 정보를 넣어주기

= 글의 아이디 넣기.

 

응답도 꼭 써줘야 함. 

10) deleteOne 함수 쓸 때 글의 아이디 찾기. 

서버에 적은 deleteOne 함수안에 글의 아이디를 찾기. 

= 유저가 글의 id 를 보내도록 하기.

ListItem 파일로 가서

method 옆에 body 속성 써줄 경우 서버로 보낼 수 있음.

body 안에다가 

이제 게시글의 아이디를 보내주기

POST 라고 수정 

= DELETE 요청을 사용하는 경우엔, 

서버에서 저 데이터가 

수신이 잘 안되는 경우가 있기 때문.

유저가 body 안에 보낸 거 확인하고 싶으면

요청.body 로 테스트 가능.

deleteOne 에다가 요청.body 옮겨줌. 

DB의 document 는 저런 식으로 돼있음. 

이 형식에 맞게 new 도 써주고 바꿔주기.

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

export default async function handler(요청, 응답) {
  if (요청.method == 'DELETE'){
    let db = (await connectDB).db('forum')
    let result = await db.collection('post').deleteOne({_id : new ObjectId(요청.body)});
    console.log(result)
    응답.status(200).json('삭제완료')
  }
}

삭제 결과 확인하기 위해 result 출력해주기.

= 터미널에 삭제 결과 알려줌. 

deletedCount = 1개의 게시물을 삭제했다는 의미 .

 

** DB 가 죽거나 없을 때의 에러 처리 하고 싶은 경우 
= try/catch 사용. 

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

export default async function handler(요청, 응답) {
  if (요청.method == 'DELETE'){
    try {
      let db = (await connectDB).db('forum') 
      let result = await db.collection('post').deleteOne({_id : new ObjectId(요청.body._id)});
    } 
    catch (error) {
      응답.status(500)
    }
    
    만약에 result 결과가 이상하면 응답.status(500)
    result 결과가 정상이면 응답.status(200)
  }
}

수정, 삭제, 삽입 결과는 result 출력해보면 알 수 있다.

 

11) Ajax 요청으로 유저한테 삭제했다고 알림주기. 
ajax 에서도 fetch (요청) 을 하면 then 으로 응답가능

ListItem 에 있는 Ajax 요청에다가

then 붙이고 

삭제 완료되면 코드 실행시켜줌.