[TIL] 230901

Nextjs

문제

더보기 -> 검색을 했을 경우 검색값이 나오지 않던 문제

기존에 다음과 같이 되어 있었다.

useEffect(() => {
    if (searchMovieValue) {
      const sortedMovies = sortData(filteredData, sortingOption);
      setFilterefData(sortedMovies);
    } else {
      // 초기화
      setDataList([]);
      setCurrentPage(1);
      fetchMovieData(1);
    }
  }, [sortingOption, searchMovieValue]);

  useEffect(() => {
    fetchMovieData(currentPage);
    console.log('검색', searchMovieValue);
  }, [currentPage, searchMovieValue]);

검색값이 변동될 때 페이지를 초기화 해줌으로서 버그를 수정하였다.

 useEffect(() => {
    if (searchMovieValue) {
      const sortedMovies = sortData(filteredData, sortingOption);
      setFilterefData(sortedMovies);
    } else {
      // 초기화
      setDataList([]);
      setCurrentPage(1);
      fetchMovieData(1);
    }
  }, [sortingOption]);

  useEffect(() => {
    setDataList([]);
    setCurrentPage(1);
    fetchMovieData(1);
  }, [searchMovieValue]);

  useEffect(() => {
    fetchMovieData(currentPage);
  }, [currentPage]);

3가지 테이블로 연결되어 있는 데이터 가공

가장 핫한 토픽을 6가지를 가져와야 하는데 가져온 내용이나 투표 여부 등을 3가지 테이블로 나누어뒀기 때문에 내가 원하는 데이터들은 테이블1과 테이블2에 있었다.

export const getHotDiscussionPost = async () => {
  const { data: mostVote } = await supabase
    .from('discussion_post')
    .select('*')
    .order('vote_count', { ascending: false })
    .limit(6);
  let test = 1;
  const getContent = mostVote?.map(async (data) => {
    const { data: discussionOptions } = await supabase
      .from('discussion_option')
      .select('content')
      .eq('post_id', data.post_id);
    const contentsData = discussionOptions?.map((data) => data.content);
    console.log(test++);
    // console.log(data, contentsData);
    const filterData = { ...data, contents: [...contentsData] };
    // console.log(filterData);
    return filterData;
  });

  return getContent;
};

처음에 데이터를 이렇게 가져왔는데 출력해보니 Promise값이 반환되었다.
contentsData가 Promise로 담긴 값이 들어오는 것이였고 map을 사용했기 때문에 병렬로 처리할 수 있는 메서드가 필요했다.

export const getHotDiscussionPost = async () => {
  const { data: mostVote } = await supabase
    .from('discussion_post')
    .select('*')
    .order('vote_count', { ascending: false })
    .limit(6);

  const getContentPromises = mostVote?.map(async (data) => {
    const { data: discussionOptions } = await supabase
      .from('discussion_option')
      .select('content')
      .eq('post_id', data.post_id);

    const contentsData = discussionOptions?.map((data) => data.content);

    const filterData = { ...data, contents: [...contentsData] };

    return filterData;
  });

  // 모든 프로미스를 병렬로 실행하고 결과를 기다립니다.
  const allContentData = await Promise.all(getContentPromises);

  return allContentData;
};

Promise.all을 사용하여 모든 Promise를 병렬로 실행하여 원하는 데이터로 출력할 수 있었다.

Vercel

환경변수를 변경할일이 생겨서 변경 후 실행했는데 적용이 되지 않았다.
다시 배포하는 방법이 있었는데 visit옆에 버튼 누르고 Promote to Production을 클릭 하면 된다