#2. Supabase 테이블의 특정 column에 대해 중복값 처리하기

자동차 연비 관련 웹 사이트를 만들어보고 있다.

 

구현하고자 한 것

연비 정보를 필터링 할 수 있도록

몇몇 column들의 값을 select 태그를 이용해 선택하여 검색할 수 있는 기능을 구현하고자 했다. 

그럴러면 중복값을 처리하고 option 태그에 하나 하나 담아야 했다.

---

시도한 방법

chatGPT에서 알려준 방법이었던 .distinct()는 작동하지 않았다.

 

 

그래서 distinct()를 빼고, set을 이용하여 중복값을 처리하였지만. 문제가 있었다.

 

Supabase에 저장된 데이터는 대략 3400개 정도인데,

저 코드로는 1000개의 데이터만 가져오기 때문에

1000번째가 넘어가는 데이터에 대해서는 중복값 처리가 불가했던 것.

---

 

해결방법

1. Supabase 내에서 SQL 에디터를 통해 선택한 column의 고유한 값만 필터링하는 함수를 만들기

 

좌측 메뉴에서 SQL Editor를 선택하고, 다음과 같이 함수를 정의하고 Run 버튼 클릭.

CREATE OR REPLACE FUNCTION get_unique_values(column_name TEXT)
RETURNS TABLE(unique_value TEXT) AS $$
BEGIN
    RETURN QUERY EXECUTE format('
        SELECT DISTINCT %I FROM cars', column_name);
END;
$$ LANGUAGE plpgsql;

 

'SELECT DISTINCT %I FROM cars' 이 부분에서 cars는 내가 사용하는 테이블명이니,

사용하고자 하는 테이블명으로 대체해서 사용가능하다.

 

자바스크립트에서 get_unique_values()함수를 호출하면,

{unique_value: value} 형태의 값이 들어있는 배열을 리턴한다.

value에는 column에 들어있는 값이 들어간다.

 

사실 sql 문법은 기초만 알아서 저 복잡한 코드는 chatGPT가 짜준 것...🤫

눈치껏 보자면...

format('SELECT DISTINCT %I FROM cars', column_name) 이 부분에서

column_name이 %I 부분에 들어간 쿼리를 실행시키는 것이 아닌가 싶다.

---

 

2. JavaScript에서 해당 함수 호출하기

 

 

SQL Editor에서 정의해둔 함수를 자바스크립트에서 불러와야 한다.

.rpc 메소드를 이용해 호출하고자 하는 함수를 전달하고, column_name에 들어갈 column명을 동적으로 전달해주었다.

 

 

 

 

data를 콘솔에 찍으면 위와 같이 {unique_value: value} 형태의 데이터로 구성된 배열이 리턴됨을 알 수 있다.

나는 저기서 value 부분만 필요하기 때문에 map을 이용해 해당 객체의 unique_value 속성을 선택하여 value만 반환하도록 한다.

 

 

 

덤으루 오름차순 정렬두 함.

 

해결 완료!