HYEWON JUNG의 개발일지
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
supabase.com
생각보다 엄청 간단해서 놀라웠다.
데이터 추가하기!
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에서 데이터를 조회할 때 쓰이는 메서드
- .select() 메서드:
- 특정 열\을 선택하여 데이터를 가져올 때 사용합니다.
- 예: .select('column1', 'column2')
- .eq() 메서드:
- 특정 열의 값이 주어진 값과 정확히 일치하는 레코드를 가져옵니다.
- 예: .eq('column1', 'value')
- .gt(), .lt(), .gte(), .lte() 메서드:
- 각각 크다(>), 작다(<), 크거나 같다(>=), 작거나 같다(<=) 비교 연산자를 사용하여 데이터를 가져옵니다.
- 예: .gt('column1', 10)
- .like() 메서드:
- 특정 열의 값이 주어진 문자열을 포함하는 레코드를 가져옵니다.
- 예: .like('column1', 'search_string')
- .ilike() 메서드:
- 대소문자를 무시하고 문자열을 검색합니다.
- 예: .ilike('column1', 'search_string')
- .is() 메서드:
- 특정 열의 값이 주어진 값과 일치하는 레코드를 가져옵니다.
- 예: .is('column1', null)
- .not() 메서드:
- 주어진 조건의 반대인 레코드를 가져옵니다.
- 예: .not('column1', 'value')
- .in() 메서드:
- 특정 열의 값이 주어진 배열에 포함된 값 중 하나인 레코드를 가져옵니다.
- 예: .in('column1', [value1, value2])
- .range() 메서드:
- 특정 숫자 범위 내에 있는 값을 갖는 레코드를 가져옵니다.
- 예: .range('column1', 10, 20)
우리프로젝트에서 like와 ilike 같은 검색을 사용하게 될 것 같다!
filter를 적용하지 않고 데이터를 불러오는것에서 바로 필터를 할 수 있을까?
목표 달성여부
완
내일 목표
- 코드 리팩토링
- 필터적용
'개발일지' 카테고리의 다른 글
20240111 TIL react-draft-wysiwyg 첫적용 (0) | 2024.01.12 |
---|---|
20240110 TIL supabase storage (0) | 2024.01.11 |
20240108 TIL Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요, 버츄얼 돔과 리얼 돔의 차이를 설명해주세요. (1) | 2024.01.09 |
20240105 TIL 해커톤/ 면접준비 1 (0) | 2024.01.08 |
20240104 TIL 최종 프로젝트 시작 (1) | 2024.01.04 |