#TIL 2 모바일 청첩장 빌더 만들기 - NextJS(app router)

오늘 한 작업

• metadata를 동적으로 구성하도록 하기
• post 업데이트 로직 만들기 (좋아요 count)
• comment 생성하기

metadata를 동적으로 구성하기 (layout.tsx)

layout.tsx에 로직을 작성한 이유

동적으로 metadata를 구성하는 로직은 page.tsx가 아닌 layout.tsx에 구성했다.
-> 하위 페이지에서도 동일하게 metaTitle과 metaDescription을 사용하도록 하기 위해

구조

/app
  /:templateCode
    layout.tsx -> 여기에서 동적으로 metadata를 세팅
    page.tsx -> metadata 적용
    /posts
      /:postId
        page.tsx -> metadata 적용

막혔던 부분

1. 데이터 구조상 templateCode로 metadata를 가져오는 것이 어려울 것
   template 테이블에 code 컬럼이 있고, metadata 테이블은 template_id를 참조하고 있.
   페이지 url 구조는 /:templateCode라서, code를 기반으로 데이터를 요청해야 했는데, code와 id는 다르기 때문에, code를 가지고 metadata를 가져오려면 두 단계를 거쳐야 할 것이라고 생각했었다.
   (code를 가지고 template 데이터를 가져온다) >> (template.id를 가지고 metadata 데이터를 가져온다) 하지만, supabase API를 통해 이 요청을 한번에 처리할 수 있다!

   const code = "templateCode";
   const { data } = await supabase
   	.from("metadata")
   	.select(`
   		*,
   		template ()
   	`)
   	.eq("template.code", code)
   	.single();

게시물 좋아요

Router API

export const PATCH = (req) => {
  // ...
  const { error } = await supabase
    .from("post")
    .update(newData)
    .eq("id", id);
}

• PATCH vs PUT
  • 리소스의 부분 정보만 업데이트할 것이기 때문에, PATCH 메서드를 사용
• update vs upsert
  • update는 DB에 이미 존재하는 레코드의 데이터를 수정.
  • upsert는 해당 레코드가 이미 존재하면 업데이트하고, 존재하지 않으면 새로운 레코드를 추가.

막혔던 부분

1. likes가 증가하지 않고, 왜 0이 되는거야?
   -> setState를 함수 내에서 호출했을 때, 변경 사항을 일정기간 동안 모은 후에 비동기적으로 컴포넌트 상태를 업데이트함
2. formAction으로 전달할 serverAction 함수에 form 요소 외의 데이터를 포함시키려면?
   (배경)
   postId는 dynamic Route(주소)로부터 전달받는 값이기에 serverAction 함수로 전달할 필요가 있었다.
   (방법)
3. form 내부에 hidden input을 만들어서, defaultValue로 값을 넣어준다.
4. bind method를 이용

게시물 댓글 생성

막혔던 부분

1. 생성 후, 생성한 댓글이 UI에 업데이트되지 않음
   comment를 serverAction을 통해 생성했는데, cache된 post 데이터가 업데이트되지 않기 때문이었다.
   NextJS의 On-demand Revalidation을 참고하여, refetch를 수행하도록 함.
   fetch시, option으로 tag를 삽입하고, 업데이트가 필요한 시점에 revalidateTag를 통해 데이터를 업데이트하도록 했다.

   // Fetching
   const res = await fetch(url, { next: { tags: ["posts", "postImages", "comments"]}});

// Comment 생성 로직
const createComment = async () => {
// ...
revalidateTag("comments");
}