TIL (240109)

Jtiiin:K·2024년 1월 9일

TIL 내일배움캠프

내일배움캠프

목록 보기

67/85

오늘 한 일

캐러셀 만들기

해결한 문제

✅ 문제상황

우리 프로젝트에서 사용하는 API는 장소에 대한 정보는 제공하지만
사진은 제공하지 않기 때문에
장소 상세페이지에 사진을 어떤 식으로 처리할 지 고민하다가
사용자들이 리뷰에 넣어준 사진을 이용하기로 했다
그리고 사진들을 보기 좋게 나열하기 위해 캐러셀을 적용했는데
캐러셀 이미지주소들을 배열에 넣어서 가져와야했다

일단 리뷰 테이블에 있는 place_id 값으로
일치하는 데이터의 image_url을 다 가져와야 했는데
데이터가 몇 겹으로 쌓여(?)있어서 이걸 어떻게 풀어야 할지 고민이었다
[ { image_url : ["1", "2"] }, { image_url : ["3", "4", "5", "6"] } ]
원하는 형태 : ["1", "2", "3", "4", "5", "6"]

방법 1

리뷰테이블에 새 데이터가 들어가면 place_id를 기준으로
places 테이블의 id와 비교하여 똑같으면 image_url을 트리거하여 넣어준다

방법 2

겹겹이 쌓인 데이터를 풀어서 사용한다

✅ 시도 1

트리거 함수를 사용하는 쪽이 편하게 가는 길인 것 같아서 시도했는데
sql을 어느정도 알아야 했다
gpt가 참고하라고 준 코드를 보고 나름 도전해봤는데
계속 'places 열에 id열이 없다'는 오류가 떠서 실패

✅ 시도 2 - 해결

[ { image_url : ["1", "2"] }, { image_url : ["1", "2", "3", "4"] } ]
문제의 데이터를 1차원 배열로 풀려고
Object.values() 와 concat() 등등 다양한 방법으로 시도했으나 원하는 모양이 안나왔다
flat()을 이용해서 해결!!

export const getImgList = async (id: string) => {
  const { data, error } = await supabase
    .from('reviews')
    .select('images_url')
    .eq('place_id', id);
  return data?.map((item) => item.images_url).flat() as string[];
};