TIL - Supabase에서 .select() 사용하기

어제 Supabase를 사용하여 댓글 기능을 구현하면서 .select() 메서드의 중요성을 깨달았습니다. 이전에는 유효성 검사를 클라이언트 측에서 처리했었고 이번에 서버 측에서 처리 했을 때 발생한 문제를 해결하기 위해 .select() 메서드를 도입하게 되었습니다. 이번 포스트에서는 .select() 메서드를 사용하게 된 이유와 그 효과에 대해 설명하겠습니다.

 

문제 상황

처음에는 Supabase를 통해 댓글 기능을 구현하면서, API 호출 한 번으로 유효성 검사를 처리했습니다. 그러나 .select() 메서드를 사용하지 않았기 때문에 다음과 같은 문제들이 발생했습니다:

1. 에러 발생: 유효성 검사를 클라이언트 측에서 처리했을 때, 간헐적으로 에러가 발생했습니다.
2. 느린 데이터베이스 업데이트: 캐시를 초기화했음에도 불구하고 데이터베이스에 업데이트가 느리게 반영되었습니다.

해결 방법

이 문제를 해결하기 위해 Supabase의 .select() 메서드를 도입하게 되었습니다. .select() 메서드를 사용하여 데이터를 가져오면서, 다음과 같은 변화를 경험했습니다:

1. 에러 해결: .select() 메서드를 사용하니 더 이상 유효성 검사에서 에러가 발생하지 않았습니다.
2. 빠른 데이터 동기화: 캐시 초기화와 함께 .select() 메서드를 사용하니 데이터베이스 업데이트가 빠르게 반영되었습니다.

.select() 메서드의 주요 이점 및 단점

장점

• 데이터 일관성 유지: 서버의 최신 상태를 즉시 반영
• 효율적인 에러 처리: 삽입/수정 과정의 오류를 즉시 감지
• UI 업데이트 용이: 새로운 데이터로 즉시 화면 갱신 가능
• 추가 쿼리 감소: 별도의 조회 쿼리 없이 최신 데이터 사용 가능

단점

• 약간의 추가 처리 시간 필요
• 대량의 데이터 처리 시 성능 저하 가능성

유효성 검사

클라이언트 측 검사

• 장점: 즉각적인 사용자 피드백, 서버 부하 감소
• 단점: 보안에 취약할 수 있음

서버 측 검사

• 장점: 데이터 무결성 보장, 높은 보안성
• 단점: 추가적인 서버 자원 사용, 응답 시간 증가

최적의 유효성 검사 방법

• 클라이언트와 서버 양쪽에서 검사 수행
  • 클라이언트: 기본적인 형식 검사, 즉각적인 사용자 피드백
  • 서버: 최종적이고 강력한 데이터 검증

.select() 사용의 주요 이점

• 데이터의 ACID 특성 보장 (원자성, 일관성, 고립성, 지속성)
• 실시간 데이터 동기화 용이
• 복잡한 비즈니스 로직 구현에 유리

성능 저하 해결 방법

• 페이지네이션 사용: 한 번에 대량의 데이터를 가져오지 않고, 페이지 단위로 나누어 가져오기
• 필요한 필드만 선택: 필요한 필드만 선택하여 가져옴으로써 불필요한 데이터 로드를 방지

const { data, error } = await supabase
  .from('your_table')
  .select('*')
  .range(0, 9); // 첫 10개의 데이터만 가져오기

결론

.select() 메서드를 사용하면 데이터의 정확성과 일관성을 높이고, 효율적인 에러 처리가 가능합니다. 클라이언트와 서버 양쪽에서 유효성 검사를 수행하여 데이터 무결성과 보안을 유지하는 것이 중요합니다. 상황에 따라 성능과 트레이드오프를 고려하여 .select()와 캐시 초기화를 활용하는 것이 효과적임을 경험을 통해 확인했습니다.

 

 

참고 사이트 
https://supabase.com/docs#reference-documentation

Supabase Docs