[TIL] 230829

Nextjs

최신 리뷰 & 최신 영화 출력

최신순으로 영화를 가져왔을 때, 날짜 기준이라 포스터가 없거나 데이터가 부족한 영화들이 나왔었는데, 투표 개수를 설정하여 url을 변경하였더니 어느정도 정보가 있는 영화들을 가져올 수 있었다.

api

• review

export const getLatestReviews = async () => {
  const fetchData = await supabase
    .from('reviews')
    .select('*')
    .order('date', { ascending: false }) // 날짜 기준으로 내림차순 정렬
    .limit(4); // 가져올 개수 제한

  return fetchData;
};

// userid기반으로 닉네임 찾아야함
export const getUserName = async (userid: string) => {
  const { data: userName } = await supabase.from('users').select('username').eq('id', userid);

  if (userName && userName.length > 0) {
    return userName[0].username;
  }

  return null; // 사용자가 없을 경우 또는 데이터가 올바르지 않을 경우
};

• tmdb
  dayjs를 사용하여 현재 날짜와 한달전 날짜를 입력받아 가져오도록 api를 구성했다.

export const getNewMovies = async (formattedCurrentDate: string, formattedOneMonthPrev: string) => {
  try {
    const movies = await fetch(
      `${process.env.NEXT_PUBLIC_TMDB_BASE_URL}discover/movie?include_adult=false&include_video=false&language=ko-KR&page=1&release_date.gte=${formattedOneMonthPrev}&release_date.lte=${formattedCurrentDate}&sort_by=popularity.desc`,
      tmdbOptions
    );
    const movieData = await movies.json();

    return movieData;
  } catch (error) {
    console.error(error);
  }
};

component

• 최신리뷰
  리뷰는 계속 가져오기 때문에 query로 가져오도록 구성했다.

const { data: latestReviewData } = useQuery(['latest_reviews'], getLatestReviews);

  return (
    <div className="p-3">
      <h2 className="text-2xl">최신 리뷰</h2>
      <div className="flex flex-wrap gap-4">
        {latestReviewData?.data!.map((review) => {
          let username;
          username = getUserName(review.userid);
          return (
            <Link key={review.reviewid} href={`/review/${review.reviewid}`} className="w-full">
              <div className=" p-4 border border-gray-300 rounded">
                <div className="font-bold mb-2">{username}</div>
                <div className="overflow-ellipsis">{review.content}</div>
              </div>
            </Link>
          );
        })}
      </div>
    </div>
  );

• 최신 영화
  dayjs를 사용하여 현재 날짜부터 한달전까지 기간을 가져와서 매개변수로 넣어주면 된다.

const [newMovies, setmovieData] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const currentDate = dayjs();
      const oneMonthPrev = currentDate.subtract(1, 'month');

      const formattedCurrentDate = currentDate.format('YYYY-MM-DD');
      const formattedOneMonthPrev = oneMonthPrev.format('YYYY-MM-DD');
      const data = await getNewMovies(formattedCurrentDate, formattedOneMonthPrev);
      setmovieData(data.results);
    };
    fetchData();
  }, []);

Error 및 문제

Hydration failed because the initial UI does not match what was rendered on the server.

서버 컴포넌트였는데 클라이언트 컴포넌트로 변경해주었다.

parallel layout

처음에는 parallel layout을 이용하여 메인 페이지를 구성하려 했는데, 다른 페이지에도 영향을 주기 때문에 layout보다는 component로 구성하여 작업했다.

KeywordButtons

키워드 버튼들을 button으로 구성을 했었는데 next/link의 Link를 사용하여 router.prefetch를 사용할 필요가 없게 만들었다.
Link로 변경하니 style을 전부 지정해주어야 해서 다음과 같이 변경했다.

if (genre.id) {
            return (
              <Link
                key={genre.name}
                href={`/${genre.id}`}
                className={`block mt-7 bg-blue-500 hover:bg-blue-700 text-white font-bold m-1 py-2 px-4 rounded ${
                  (params.genreId === undefined && genre.name === '전체') || Number(params.genreId) === genre.id
                    ? 'bg-blue-700'
                    : ''
                }`}
              >
                {' '}
                # {genre.name}
              </Link>
            );