20240109 TIL supabase 데이터 읽기, 추가하기 CR with typescript

목표

• 데이터 CR하기

새로 알게 된것/ 오늘의 코드

supabase 세팅하기

supabaseClient.ts

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = '각자 url';
const supabaseKey ='각자의 key';
export const supabase = createClient(supabaseUrl, supabaseKey);

데이터를 읽어오는 법

  const [posts, setPosts] = useState<Post[]>([]);
  useEffect(() => {
    const getPost = async () => {
      try {
        let { data: community, error } = await supabase
          .from('community') //테이블 이름
          .select('*'); //테이블 전체 column
        if (error) throw error;
        if (community != null) { //없지 않을 경우만!
          setPosts(community);
        }
      } catch (error: any) {
        alert(error.message);
      }
    };

    getPost();
  }, []);

타입은 테이블 column들의 타입을 담은 객체로 지정해주면된다.

나 같은 경우엔

type Post = {
  post_id: number;
  title: string;
  content: string;
  created_at: string;
  category: string;
  post_user: string;
  nickname: string;
  comment: { user_id: string; user_name: string } | null;
  likes: number | null;
  like_user: { uid: string }[] | null;
};

이렇게 된다. 

하지만 해당 페이지에서 필요한 데이터는 별로 없어서 리팩토링으로 수정할 예정이다. select를 변경해서 일부 데이터만 불러오도록!

 

관련 정보는 supabase docs 에 예제로 다 나와있다

https://supabase.com/dashboard/project/ahhyzbgcyoyfrzmvrgce/api?resource=community

API | Supabase

 

 

생각보다 엄청 간단해서 놀라웠다.

 

데이터 추가하기!

get해오는 것과 맥락은 거의 동일하다. 

  const addPost = async () => {
    try {
      const { data, error } = await supabase
        .from('community')
        .insert([
          {
            title,
            content,
            category,
            post_user: 'sweetPotato',
            nickname: 'goguma'
          }
        ])
    
      if (error) throw error;
      navigate('/community');
    } catch (error) {}
  };

insert 해줄 항목을 적어주면 된다.. 

그리고 함수를 클리이벤트로 넣어주면. .. 끝! 

완전 간단하다! 물론 아직 쉬운 부분만 했지만..  내일 부턴 사진 추가와 필터 여부를 확인해서 진행해야겠다.

 

참고한 영상! 

https://www.youtube.com/watch?v=4yVSwHO5QHU

개념정리

supabase에서 데이터를 조회할 때 쓰이는 메서드 

1. .select() 메서드:
   • 특정 열\을 선택하여 데이터를 가져올 때 사용합니다.
   • 예: .select('column1', 'column2')
2. .eq() 메서드:
   • 특정 열의 값이 주어진 값과 정확히 일치하는 레코드를 가져옵니다.
   • 예: .eq('column1', 'value')
3. .gt(), .lt(), .gte(), .lte() 메서드:
   • 각각 크다(>), 작다(<), 크거나 같다(>=), 작거나 같다(<=) 비교 연산자를 사용하여 데이터를 가져옵니다.
   • 예: .gt('column1', 10)
4. .like() 메서드:
   • 특정 열의 값이 주어진 문자열을 포함하는 레코드를 가져옵니다.
   • 예: .like('column1', 'search_string')
5. .ilike() 메서드:
   • 대소문자를 무시하고 문자열을 검색합니다.
   • 예: .ilike('column1', 'search_string')
6. .is() 메서드:
   • 특정 열의 값이 주어진 값과 일치하는 레코드를 가져옵니다.
   • 예: .is('column1', null)
7. .not() 메서드:
   • 주어진 조건의 반대인 레코드를 가져옵니다.
   • 예: .not('column1', 'value')
8. .in() 메서드:
   • 특정 열의 값이 주어진 배열에 포함된 값 중 하나인 레코드를 가져옵니다.
   • 예: .in('column1', [value1, value2])
9. .range() 메서드:
   • 특정 숫자 범위 내에 있는 값을 갖는 레코드를 가져옵니다.
   • 예: .range('column1', 10, 20)

우리프로젝트에서 like와 ilike 같은 검색을 사용하게 될 것 같다!

filter를 적용하지 않고 데이터를 불러오는것에서 바로 필터를 할 수 있을까?

목표 달성여부

완

내일 목표

• 코드 리팩토링
• 필터적용