다이어리 데이터 삭제

상세페이지의 코드가 길어 져서 관리차 삭제 버튼을 따로 분리하기로 함

 

여기서 문제 사항

1. 상세페이지 클라이언트 컴포넌트 

2. 삭제 버튼 클라이언트 컴포넌트인데 수파베이스의 데이터 삭제 API가 비동기를 사용 하는 코드

3. 클라이언트 컴포넌트는 async 사용을 권장 하지않음

4. 어떻게 데이터를 삭제를 해야할까?

 

 

해결

API route 사용

전체적인 순서

1. app/api/폴더 명/route.ts 파일 생성

2. 파일에 코드 작성

3. 버튼 클라이언트 컴포넌트에 연동

 

 

routs.ts 코드 작성

import { NextResponse } from "next/server";
import { supabase } from "@/lib/db";

export async function DELETE(request :Request) {
    const {id} = await request.json();
    try {
        const { error } = await supabase.from("zwritedb").delete().eq("id", id);
        if (error) {
          throw error;
        }
        return NextResponse.json({ message: '일기 삭제' });
    } catch (error) {
        return NextResponse.json({ error: '일기 삭제 못함' }, { status: 500 });
    }
   
}

1. import { NextResponse } from "next/server" 연동

- 서버 측 응답을 생성하기 위한 유틸리티입니다. 이를 통해 JSON 형식의 응답을 쉽게 생성

2. import { supabase } from "@/lib/db"; 연동

3. DELETE 메서드를 정의

4. 요청(request) 본문(body)에서 JSON 데이터를 파싱하여 id 값을 추출

5. try { ... } catch (error) { ... }

- 수파베이스에서 데이터 삭제API

6. if (error) { throw error; }

7. 성공 하면 "일기 삭제"라는 메시지를 포함하는 JSON 응답을 클라이언트에 반환

8.  오류가 발생하면, "일기 삭제 못함"이라는 메시지와 함께 HTTP 상태 코드 500(서버 오류)을 반환

 

 

버튼 컴포넌트

const handleDelete = () => {
    if (window.confirm("삭제 하시겠습니까?")) {
      fetch('/api/delete-diary', {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id: pathId }),
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('Failed to delete record');
        }
        return response.json();
      })
      .then(data => {
        console.log(data.message); // 서버에서 보낸 메시지
        router.push('/main/diary');
      })
      .catch(error => {
        console.error('Error:', error);
      });
    }
  };

1. const handleDelete = () => { ... } 메서드 생성

2. window.confirm은 브라우저에서 확인 창을 띄우는 메서드

3. fetch('/api/delete-diary', { ... }) / url, {}

- url은 route 파일의 경로

- {}

- fetch는 브라우저에서 제공하는 API로, HTTP 요청을 보내는 데 사용

4. method: 'DELETE'

- HTTP 메서드를 DELETE로 설정 내가 만든 route로 연동

5. headers: { 'Content-Type': 'application/json' }

- Content-Type을 application/json으로 설정하여, 요청 본문이 JSON 형식임을 서버에 알립니다.

6. body: JSON.stringify({ id: pathId })

- body는 서버로 전송할 데이터

- id라는 키에 pathId라는 값을 담아 JSON 문자열로 변환하여 전송

7. .then(response => { ... })

- 서버로부터 응답을 받은 후 실행되는 콜백을 정의

- 응답 객체를 받아, 응답이 성공적인지 여부를 확인

8. if (!response.ok) { throw new Error('Failed to delete record'); }

- response.ok는 응답의 상태 코드가 200번대인지 확인

- 상태 코드가 200번대가 아니면 오류로 간주하고, 에러를 던져 catch 블록에서 처리

9. return response.json();

- 응답이 성공적이면, 응답 본문을 JSON으로 파싱하여 다음 .then 블록에 전달

10. .then(data => { ... })

- 파싱된 JSON 데이터(data)를 받아 후속 작업을 수행

- 서버로부터 받은 메시지를 콘솔에 출력하고, router.push를 사용

11. router.push('/main/diary');

12. .catch(error => { ... })

- .then 블록에서 오류가 발생한 경우 실행되는 블록

 

 

 

새로운 걸 알았다

handleDelete 가 실행 되면 handleDelete 의 6번의 값이 DELETE의 4번으로가서

알맞는 데이터를 삭제

https://nextjs.org/docs/app/building-your-application/routing/route-handlers