[최종 프로젝트] Supabase 테이블 오류 메세지

 

 

 

 

최근 프로젝트에서 Supabase를 사용하여 로그인 인증 및 인가를 구현한 경험이 있다.

오랜만에 Supabase를 다루다 보니, 헷갈리는 부분도 있었고 생각이 많아졌던 기억이 있다.

 

이번 프로젝트에서는 인증(Auth) 기능 대신 Supabase 테이블을 사용한 CRUD 작업을 진행했다.

탄소 계산기를 통해 계산된 데이터를 carbon_records 테이블에 저장해야 했는데, 테이블에는 여러 칼럼이 있어 세밀한 작업이 필요했다.

 

제출하기 버튼을 누르면 실행되는 코드 중 supabase와 관련이 되어있는 부분은 이러하다.

   try {
      const { error } = await browserClient.from("carbon_records").insert({
        user_id: user,
        electricity_usage: electricity,
        electricity_co2: (electricity * 0.4781).toFixed(2),
        water_usage: water,
        water_co2: (water * 0.237).toFixed(2),
        gas_usage: gas,
        gas_co2: (gas * 2.176).toFixed(2),
        car_usage: car,
        car_co2: ((car / 16.04) * 2.097).toFixed(2),
        waste_volume: waste,
        waste_co2: (waste * 0.5573).toFixed(2),
        carbon_emissions: total.toFixed(2)
      });
      if (error) {
        console.error("데이터 삽입 오류:", error);
        alert("데이터 삽입 중 오류가 발생했습니다.");
      } else {
        // 성공 시 알림을 지연시키기 위해 로딩 상태를 유지
        setTimeout(() => {
          alert(`전체 에너지원 CO₂ 발생 합계 : ${total.toFixed(2)} kg/월`);
          setIsLoading(false);
        }, 5000);
      }
    } catch (err) {
      console.error("에러 발생:", err);
      alert("데이터 처리 중 오류가 발생했습니다.");
      setIsLoading(false);
    }

 

 

그리고 이 과정에서 수 많은 오류가 나왔다. 

밑에는 여러 오류들을 정리해 보았다.

 

 

오류

첫번째 오류

{code: 'PGRST204', details: null, hint: null, message: "Could not find the 'car_usage' column of 'carbon_records' in the schema cache"}

 

해당 오류는 carbon_records 테이블에 `car_usage`라는 컬럼이 존재하지 않아서 발생한 문제였다.

프로젝트 기획 단계에서 자동차 사용량 부분이 추가되었는데, 아마도 이 변경 사항이 논의되기 전에 `carbon_records` 테이블을 만들었던 것 같다.

이 문제를 해결하려면 supabase에서 `carbon_records` 테이블에 `car_usage` 컬럼을 추가했다. 

 

 

두번째 오류

{code: '22P02', details: null, hint: null, message: 'invalid input syntax for type integer: "357.91356608478804"'}

오류의 원인은 입력된 데이터의 타입이 supabase 테이블의 컬럼 타입과 일치하지 않아서 발생한 것이었다.

문제가 발생한 부분은 탄소 계산기의 총합 값을 입력하는 곳이었는데, supabase에서 확인해보니

해당 컬럼의 데이터 타입이 integer로 설정되어 있었기 때문에 소수점 값을 저장할 수 없었던 것 이었다.

해당 컬럼의 데이터 타입을 `numeric`으로 변경하니 정상적으로 소수점 저장이 되는 것을 확인 할 수 있었다. 

 

 

세번째, 네번째 오류

{code: '42501', details: null, hint: null, message: 'new row violates row-level security policy for table "carbon_records"'}

 

{code: '23503', details: 'Key is not present in table "user_info".', hint: null, message: 'insert or update on table "carbon_records" violate…eign key constraint "carbon_records_user_id_fkey"'}

 

위에 오류는 Supabase에서 테이블에 대해 RLS(Row-Level Security)가 활성화 되어있어, 테이블에 insert에 대한 권한이 없다는 뜻이다. 그리고 아래의 오류는 user_id 필드가 user_info 테이블에 존재하는 키를 참조하는 외래 키 제약 조건을 위반했다는 뜻이라고 한다.

 

생각을 해보니 `(auth.uid() = user_id)` 를 통해서 정책을 추가해놨다는 팀원의 이야기가 생각났다.

 

 

그래서 supabase의 `getUser` 함수를 이용해서 로그인한 user의 값을 연결해보기로 했다.

(아마도 zustand를 통해 전역관리를 해줘야 할 듯 하다.)

const [user, setUser] = useState<string | null>(null);

useEffect(() => {
  const fetchUser = async () => {
    const fetchedUser = await getUser();
    if (fetchedUser) {
      setUser(fetchedUser.id);
    }
  };
  fetchUser();
}, []);

 

 

위와 같이 user 값을 받아오니 supabase의 테이블에도 데이터가 잘 들어오는 모습을 볼 수 있었다.

 

 

supabase에 값을 CRUD 할때 중요한 부분 정리!

1. 컬럼명 제대로 적었는지 체크하기
2. 각 컬럼명에 설정한 타입 체크하기
3. RLS 설정 체크하기
4. 외래키를 설정한 경우 외래키 연결된 부분 체크하기