[Next.js] 게시판 만들기(5) 게시판 게시글 삭제 기능 구현하기 feat.mongoDB

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

---

핵심 로직

1. 서버 컴포넌트와 클라이언트 컴포넌트 분리하기 => 필수는 아님. 수정 기능와 비슷하게 구현 가능 단, 효과 등을 넣으려면 분리해야 함.
2. 삭제 버튼 만들기
3. 서버에 삭제 요청하기
4. 서버에서 확인 후 DB 데이터 삭제하기

 

서버 컴포넌트와 클라이언트 컴포넌트 분리하기

Hint & Idea

• 정적이고 DB와 통신해야 하는 부분은 서버 컴포넌트
• 동적이고 사용자와 상호작용하는 부분은 클라이언트 컴포넌트로 나누기
• 부모 컴포넌트에서 자식 컴포넌트로 props 전달하기

 

⬇정답 보기⬇

// 서버 컴포넌트

import 자식컴포넌트

export default async function List() {
  return (
    <div>
    // DB에서 가져오 글 목록을 props로 자식에게 전달
      <리스트를 출력하는 자식 컴포넌트 result={result}/>
    </div>
  )
}

// 클라이언트 컴포넌트

'use client'

// 클라이언트 컴포넌트에서 즉, 사용자가 직접 DB에서 데이터를 가져오는 것은 위험성이 있기 때문에
// 부모 컴포넌트로부터 props로 전달 받는 것이 안전함.
export default function ListItem({result}) {
  return (
    <div>
      { result.map((item,idx)=>
          <div key={idx}>
            <Link href={'/detail/' + result[idx]._id}>
            	{result[idx].title}
            </Link>
            <Link href={'/edit/' + result[idx]._id}>수정버튼</Link>
          </div>
       ) }
    </div>
  )
}

추가 설명

• 클라이언트 컴포넌트에서 서버와 통신할 때는 보통 useEffect를 사용함.
• useEffect를 사용하면 html이 다 로드된 다음 useEffect 안 코드가 실행된다는 단점 아닌 단점이 있음.
• 검색 엔진에 노출이 힘들어질 수 있음.
• 그래서 서버 컴포넌트에서 데이터를 받아와서 클라이언트 컴포넌트에 전달하는 식으로 하는 것이 단점을 보완하는 방법임.

 

삭제 버튼 만들기

Hint & Idea

• button이나 input 등 원하는 태그를 사용해서 버튼 만들기
• JS 를 실행하기 위한 onClick 속성 미리 작성하기

 

⬇정답 보기⬇

<button onClick={()=>{
  fetch('삭제 기능 서버 URL')
}}>삭제 버튼</button>

 

서버에 삭제 요청하기

Hint & Idea

• fetch()를 활용해 ajax 방식으로 서버와 통신하기
• 요청 방식과 게시글 정보 전송하기
• 에러 상황 대처하기(then-catch 문)

 

⬇정답 보기⬇

<button onClick={()=>{
  fetch('삭제 기능 서버 URL', {method: 'DELETE' body: '삭제할 게시물의 id'})
  // 서버와 통신이 성공하면 실행할 코드
  .then(()=>{
  	console.log('통신 성공')
  })
  // 서버와 통신이 실행하면 실행할 코드
  .catch((error)=>{
  	console.error(error)
  })
}}>삭제 버튼</button>

추가 설명

• fetch에 URL만 적으면 GET 요청
  • fetch('서버 url', { method : 'POST', body : 'Hello World' }) 다음과 같이 method를 명시해주면 다른 요청도 가능
• 서버와 통신할 때는 대부분 숫자와 문자만 전송이 가능한데, 만약 array, object 를 전송하고 싶다면
  • fetch('서버 url', { method : 'POST', body : JSON.stringify( {name : 'kim'} ) })  다음과 같이 전송 가능

 

서버에서 확인 후 DB 데이터 삭제하기

Hint & Idea

• 삭제 요청인지 확인하기
• deleteOne 함수로 게시물 삭제하기
• 에러 처리하기

 

⬇정답 보기⬇

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

export default async function handler(req, res) {
	// 삭제 요청임을 확인
  if (req.method == 'DELETE'){
    try {
      let db = (await connectDB).db('DB 이름') 
      // deleteOne 함수를 통해 하나의 게시물 삭제
      let result = await db.collection('컬렉션 이름').deleteOne({_id : new ObjectId(삭제할 게시물 id)});
    } 
    catch (error) {
      res.status(500)
    }
    
    // 만약에 result 결과가 이상하면 res.status(500)
    result res.status(200)
  }
}

추가 설명

• 서버에 요청을 할 때, form 태그, fetch() 방식도 있지만, query string와 URL parameter를 사용하는 방법도 있음.
  • query string
    • http://localhost:3000/detail?name=kim&age=20
    • 위와 같이 URL를 통해 데이터를 전송하는 방식이다.
    • 서버에서는 req.query를 통해 확인 가능하다. (req는 매개변수이기에 달라질 수 있음)
  • URL parameter
    • dynamic Route 처럼 서버 폴더와 파일을 만들 때 /server/[id].js 처럼 만들어서 URL의 [id] 부분에 데이터를 담아 전송하는 방식이다,
    • 서버에서는 req.query를 통해 확인 가능하다. (req는 매개변수이기에 달라질 수 있음)