Next.js 심화 3일 차 @supabase 세팅(트러블 슈팅)

주말 동안 잠깐잠깐씩 프로젝트를 진행하고, 오늘에 이르러 본격적으로 프로젝트를 시작했다. 좀 더 정확하게 말하자면 이전까지는 데이터를 받아와서 뿌려주는 것까지만 했고, 오늘부터 업데이트, 삭제, 필터링 기능을 구현하기 시작한 것이다. 

 

그런데 본격적으로 '좋아요' 기능을 구현하려고 하니 자꾸만 state:204가 뜨면서도 supabase에는 반영이 되지 않는 오류가 생겼다.

 

튜터님께 문의해봐도 원인을 찾지 못해서 한참 이것저것 테스트를 해보다가 supabase 강의를 다시 보게 되었는데, 애초부터 supabase 세팅을 잘못했다는 것을 알게 되었다. next.js에서 supabase를 사용하려면 server컴포넌트와 client컴포넌트에서 각각 다른 supabase를 사용해야 하고, middleware 파일까지 만들어야 하는데 이를 간과하고 이제껏 그냥 리액트에서 supabase를 쓰듯이 client 컴포넌트에서 쓰는 supabase 파일만 만들어놓았던 것이다. 

 

 

강의에 뻔히 나와 있는데 너무 부끄러운 실수였다... 바로 고쳐서 테스트까지 마치고(사실 client.ts 쪽밖에 확인을 못했지만) pr을 했다.  

 

이후 '좋아요' 버튼 로직에 insert를 넣어서 실행해보니 이제 실행이 되고, 반영까지 되는 것을 확인했다. 다만 supabase가 배열 저장을 지원하지 않는 건지 update함수가 작동하지 않는 건지 여전히 update는 동작하지 않았다. 

 

// 게시물 스크랩하기
  const postMyLikePost = async (userId: string, postId: string) => {
    // 내가 스크랩한 게시물 id 가져오기
    const likeIds = await getMyLikePostIds(userId);
    
    console.log("유저아이디=>", userId);
    console.log("업데이트 정보=>", [...likeIds, postId]);

    // 스크랩하기
    // 스크랩 정보 테이블 행 삽입하기
    console.log(likeIds.length);
    if (likeIds.length > 0) {
    // 내가 가진 기존 스크랩 정보가 있을 시 update
      const response = await browserClient
        .from("like")
        .update({ postId: [...likeIds, postId] })
        .eq("mem_no", userId)
        .select();
      console.log("업데이트 리스폰스", response);
    } else {
    // 내가 가진 기존 스크랩 정보가 없을 시 insert
      const response = await browserClient.from("like").insert({ postId: [postId] });
      console.log("삽입 리스폰스", response);
    }
  };

 

아마 후자가 원인일 것 같아서 내일은 세팅이 아니라 저장소쪽 supabase를 만져볼 생각이다.