[개발 공부 76일차] 스크랩 여부가 공유되는 문제 해결

< 목차 >
0. 수정된 코드 및 과정 요약
1. 코드에서 Column name을 수정
2. user_id와 study_place_id에 대한 고유성(uniqueness)이 설정되지 않아, .single() 대신 .limit(1)을 사용하여 결과를 하나로 제한해 해결
3. 세션이 없을 경우 스크랩 여부를 확인하는 요청을 보내지 않고, 스크랩 상태를 false로 설정
4. 결론

 

 

에..?.. 제가 수척해진 농담곰으로 보이시나요?..

 

 

해결은 했지만 6시간 삽질해서 햄듭니다..

 

 

 

한 장소의 스크랩 여부가 다른 장소와도 동일하게 적용되는 문제 해결

0. 수정된 코드 및 과정 요약

수정된 코드

 

 

 

원인

 

1. [원인] 전에 Supabase 컬럼을 설정할 때 id가 user_id와 study_place_id로, 총 2가지가 들어가는데 어떤 id에 기준(unique key)을 둘 건지 설정이 안 돼서 그냥 두었다.
2. 근데 기준 설정을 안 해두면 서버 입장에선 id 하나에 여러 개가 할당되는 배열 형태로 저장되는 가능성도 있는 듯하다.
3. a - 1 이렇게 하나만 엮이는 게 아니라 a - [1, 2, 3]처럼 여러 개가 배열 형태로 들어갈 가능성도 있다고 판단한 느낌.. 배열은 .single(= 하나)이 아닐 수 있으니까.
4. [해결] 따라서 .limit(1)을 사용하여 결과를 하나로 제한하고, 배열 형태로 결과를 받아 해결했다. 데이터베이스에서 반환된 data 배열의 길이를 기준으로 스크랩 상태를 결정했다. data 배열의 길이가 1 이상이면 스크랩된 상태로 간주하고, 그렇지 않으면 스크랩되지 않은 상태로 간주했다.

 

 

1. 코드에서 Column name을 수정

기존에 .select('id')로 해두었던 것을 .select('study_place_id')로 변경하였다.

 

 

2. user_id와 study_place_id에 대한 고유성(uniqueness)이 설정되지 않아, .single() 대신 .limit(1)을 사용하여 결과를 하나로 제한해 해결

Supabase에서 "multiple (or no) rows returned"라는 오류 메시지가 떴다.

 

이 문제는 여러 행이 반환되었을 때 발생하는 것이므로, 결과를 1개로 제한하는 또 다른 방법이 필요하다.

 

 

코드를 다음과 같이 수정해 봤다.

 

1. 결과가 하나인지 확인하기: 특정 조건에 맞는 결과가 여러 개 있을 수 있으므로, .single() 대신 .limit(1)을 사용하여 결과를 하나로 제한하고, 배열 형태로 결과를 받아 처리했다. 이렇게 하면, 결과가 없거나 여러 개 있을 경우에도 적절히 처리할 수 있다.
   
   🚨스크랩 기록이 여러 개일 수 있는 이유🚨
   : '데이터베이스 설계' 때문이다. 데이터베이스의 study_place_scraps 테이블에 user_id와 study_place_id의 조합에 대한 고유성(uniqueness)이 설정되지 않았다면, 중복 데이터가 입력될 수 있다. 이를 데이터베이스의 unique constraint 설정을 통해 방지할 수 있다. (원인은 위 '과정 요약' 참고)
   
   
2. 쿼리 수정하기: 여러 개의 결과 중 첫 번째 결과만 가져오기 위해 .limit(1)을 사용하고, 배열로 결과를 받은 후 첫 번째 요소만 사용한다.

 

 

.limit(1)로 해야 하는 이유

⚠️  데이터 유효성 검사 처리 때문 ⚠️
.limit(1)을 사용하여 데이터베이스에서 최대 1개의 스크랩 기록만을 요청한다. 이는 처리해야 할 데이터의 양을 최소화하여 응답 시간을 단축시키고, 불필요한 데이터 처리를 줄인다.

 

이렇게 하면 여러 행이 반환되어도 문제없이 첫 번째 행만 사용하여 상태를 업데이트할 수 있다. 또한, 결과가 없을 경우에도 에러 없이 처리된다.

 

 

3. 세션이 없을 경우 스크랩 여부를 확인하는 요청을 보내지 않고, 스크랩 상태를 false로 설정

// 데이터 배열의 길이를 확인하여 스크랩 상태 결정
// 데이터베이스에서 반환된 data 배열의 길이를 기준으로 스크랩 상태를 결정
// data 배열의 길이가 1 이상이면 스크랩된 상태로 간주하고, 그렇지 않으면 스크랩되지 않은 상태로 간주
   setIsScrapped(data.length > 0);

 

data.length > 0을 통해 얻은 데이터가 실제로 존재하는지 확인한다. 이 조건은 반환된 데이터가 있을 때만 true로 설정되어, 사용자가 해당 항목을 스크랩했는지 여부를 정확하게 판단할 수 있게 한다.

 

 

4. 결론

BaaS API를 정확하게 이해하는 게 중요하단 사실을 다시 한번 깨닫게 되었다.. 그리고 디버깅할 때 [개발자도구] - [네트워크] 탭을 잘 이해하는 게 엄청 중요한 것 같다. 짬짬이 공부해보자

 

 

약간 너덜거리지만 괜찮아..
난 이것도 금방 까먹고 낼 다시 “헤헤 코딩 재밌어 헤헤” 할 테니까.. (물론 재미는 있었다. 원인을 몰라서 좀 힘들었을 뿐)

 

 

헤헤 낼도 공부 파이팅