20240724 오류의 오류의 오류

RingKim1·2024년 7월 25일

TIL

목록 보기

60/77

Today

1. 알고리즘

리스트 자르기

2. 프로젝트

✅ 로딩, 에러, 없는 페이지 제작
파일 위치 : (app라우팅 방식) app폴더 바로 아래

loading.tsx, error.tsx, not-found.tsx

에러 페이지
~~이걸 만들어서 그런가 이번에는 저 페이지를 너무 많이 봐버렸다.~~

"use client";

import Button from "@/components/common/button";
import { useRouter } from "next/navigation";

const ErrorPage: React.FC = () => {
  const router = useRouter();

  return (
    <div className="h-[calc(100vh-10rem)] flex flex-col justify-center items-center gap-2 text-3xl font-semibold">
      <p>오류가 발생 했습니다.</p>
      <Button
        buttonName="재시도"
        onClick={() => {
          router.refresh();
        }}
      />
      <Button
        buttonName="홈으로 가기"
        onClick={() => {
          router.push("/");
        }}
      />
    </div>
  );
};

export default ErrorPage;

✅ 마이페이지 : supabase likes 테이블에 있는 내용 불러오기

클라이언트 사이드 요청

  const fetchLikes = async (id: string, contentType?: number) => {
    try {
      let { data, error } = await supabase.from("Likes").select("*").eq("user_id", id);
      setLikes(data as Like[]);
    } catch (error) {
      console.error("Error fetching likes:", error);
    }
  };

  const fetchFilterLikes = async (id: string, contentType?: number) => {
    try {
      let { data, error } = await supabase
        .from("Likes")
        .select("*")
        .eq("user_id", id)
        .eq("content_type_id", contentType);
      setLikes(data as Like[]);
    } catch (error) {
      console.error("Error fetching likes:", error);
    }
  };

  useEffect(() => {
    if (carouselName === "전체") {
      fetchLikes(id as string, contentType);
    } else {
      fetchFilterLikes(id as string, contentType);
    }
  }, [id, carouselName]);

서버 사이드 요청

// app/api/filterlikes/route.ts

import { createClient } from "@/utils/supabase/server";
import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  const { searchParams } = request.nextUrl;
  const id = searchParams.get("id");
  const contentType = searchParams.get("contentType");

  const supabase = createClient();

  try {
    let { data, error } = await supabase
      .from("Likes")
      .select("*")
      .eq("user_id", id as string)
      .eq("content_type_id", contentType);

    if (error) {
      return NextResponse.json({ error: error.message }, { status: 500 });
    } else {
      return NextResponse.json(data);
    }
  } catch (error) {
    console.error("Error fetching likes:", error);
    return NextResponse.json({ error: "Error fetching likes" }, { status: 500 });
  }
}

  useEffect(() => {
    const fetchLikes = async () => {
      try {
        const response = await fetch(`/api/likes?id=${id}`, { cache: "force-cache" });
        const data = await response.json();
        setLikes(data);
      } catch (error) {
        console.error("Error fetching likes:", error);
      }
    };
    const fetchFilterLikes = async () => {
      try {
        const response = await fetch(`/api/filterlikes?id=${id}&contentType=${contentType}`, { cache: "force-cache" });
        const data = await response.json();
        setLikes(data);
      } catch (error) {
        console.error("Error fetching likes:", error);
      }
    };

    if (carouselName === "전체") {
      fetchLikes();
    } else {
      fetchFilterLikes();
    }
  }, [id, contentType]);

요청 성공

Learn

오늘은 에러의 에러의 에러가 많다..

TroubleShooting1

문제 / 원인

팀원분이 supabase 클라이언트를 다른데서도 만들어 둔게 있어서 supabse 클라이언트가 많은 문제

해결중

팀원분과 이야기 해서 클라이언트를 하나로 정리
그리고 팀원분은 supabas-js를 쓰셔서 ssr로 바꾸는 것도 이야기 필요

TroubleShooting2

문제

useRouter를 썼는데 오류가 발생

원인

(Next.js 12버전 이전) useRouter import
근데 이런 것은 사람의 실수인데 자동 import 안되게 미리미리 삭제하면 안되나
아니 그전 프로젝트들은 이것을 사용해서 삭제하면 문제인가?

import {useRouter} from "next/router"

해결

(Next.js 13에서 도입) useRouter import

import {useRouter} from "next/navigation"

❓next/navigation의 useRouter

브라우저의 내장 history API를 기반으로 동작

성능이 향상된 클라이언트 사이드 라우팅을 제공

push, replace, refresh, back, forward, prefetch 등의 기능을 제공

페이지 간 이동, 브라우저 기록 관리, 리소스 프리페치 등의 작업을 더 효율적으로 처리

공식문서