Next.js - #삭제, Ajax

<form>을 사용해 서버와 통신을 하면 새로고침이 일어난다
또한, <form>의 method 속성은 GET, POST만 가능하며 PUT, PATCH, DELETE는 사용할 수 없다

<form>을 사용하지 않고 모든 method로 서버와 통신을 하고 싶을 땐 Ajax 기능을 사용하면 된다

Ajax 기능을 사용하기 위해선 JavaScript의 내장 라이브러리인 fetch나 axios를 사용해야 하기 때문에
client component에서 작성해야 한다

---

Ajax

fetch('/api/test', { 			    // URL
  method: 'POST',  					// default : GET
  body: JSON.stringify([1, 2, 3]),  // 데이터 전송
}).then((res) => console.log(res));

JSON.stringify()를 쓰는 이유

서버와 데이터 주고받을 땐 원래 문자나 숫자만 가능하다
array, object 같은 것은 안 된다

하지만 array, object에 따옴표로 감싸면 문자 취급을 해주기 때문에 그렇게 전송할 수는 있다
큰 따옴표로 감싸져있는 array, object 자료들을 JSON이라고 부른다

JSON.stringify()을 사용하면 {name : 'kim'} → '{"name" : "kim"}' 이렇게 JSON 되고
이제 서버로 전송할 수 있게 된다

삭제

게시글을 삭제도 생성이나 수정과 크게 다르지 않으므로 자세한 설명은 생략한다

'use client';

import Link from 'next/link';

export default function Buttons({ id }) {
  return (
    <div className="flex justify-end gap-4">
      <button
        className="text-sm text-gray-500"
        onClick={() => {
          console.log('hi');
          fetch('/api/post/delete', {
            method: 'DELETE',
            body: JSON.stringify({ id }),
          })
            .then((res) => {
              if (res.status === 200) {
                return res.json();
              } else {
                // 서버에서 에러코드 전송 시 실행 코드
              }
            })
            .then(() => {
              // 성공 시 실행 코드
            })
            .catch((error) => {
              // 네트워크 문제로 실패 시 실행 코드
              console.error(error);
            });
        }}
      >
        삭제
      </button>
      <Link href={`/edit/${id}`} className="text-sm text-gray-500">
        수정
      </Link>
      <Link href="/list" className="text-sm text-gray-500">
        목록
      </Link>
    </div>
  );
}

// api/post/delete.js
import { connectDB } from '@/util/database';
import { ObjectId } from 'mongodb';

export default async function handler(req, res) {
  if (req.method === 'DELETE') {
    const db = (await connectDB).db('forum');
    const { id } = JSON.parse(req.body);

    try {
      const result = await db
        .collection('post')
        .deleteOne({ _id: new ObjectId(id) });

      if (result.deletedCount === 0) {
        return res.status(404).json({ message: 'post not found' });
      } else {
        return res.status(200).json({ message: 'post deleted' });
      }
    } catch (error) {
      console.error(error);
    }
  }
}

---

fetch 라이브러리는 코드가 길고 귀찮아서 편리하게 바꿔주는 axios 같은 라이브러리 설치해서 쓰는 사람들이 많다
근데 Nextjs 13부터는 server component 함수 안에서 fetch() 쓸 일이 있을 경우,
Nextjs 13에서 제공하는 것을 사용하는 것이 좋다고 한다
client component 에선 라이브러리든 뭐든 편한 것을 사용하면 된다