✏️ 무엇을 배웠나
1. firebase 복합쿼리 사용하기
const q = query(
collection(db, 'reviews'),
where('bookId', '==', bookId),
orderBy('createdDate', 'desc')
);파이어베이스에 저장된 리뷰 데이터를 불러오려고 위 코드처럼 쿼리 요청을 하고 onSnapshot을 사용했다. 이렇게 하니까 아래 같은 에러가 떴다.
쿼리에 색인이 필요하다는 얘기이고 메시지에 안내된 링크로 가면 색인을 만들 수 있다고 해서 들어가보니까 친절하게도 자동으로 필요한 필드를 채워서 생성해줬다.
몇 분 기다리니까 완료가 되서 다시 코드를 실행해보니 원하는 그림대로 나왔다. 전에는 이걸 몰라서 복합쿼리를 포기했었는데, 이번에 해내서 좋음 ㅋㅋ 에러 메시지를 읽는 습관을 들이고 있는데 이게 나름 도움이 된 것 같다.
2. 파이어베이스 deleteDoc을 사용해 문서 삭제하기
- 상세보기 스크린
- 리뷰 컴포넌트
- 코멘트 컴포넌트
- 수정 / 삭제 모달 컴포넌트
이런 구조에서 코멘트 컴포넌트에서 같은 레벨에 있는 수정 / 삭제 컴포넌트에 코멘트를 식별할 수 있는 id를 넘겨줘야 했다.
결과적으로 작동이 되는 코드는 아래와 같다.
const deleteReview = (reviewId) => {
Alert.alert('리뷰를 삭제합니다', '정말 삭제하시겠어요?', [
{
text: '아니요',
},
{
text: '삭제',
onPress: async () => {
await deleteDoc(doc(db, 'reviews', reviewId));
},
},
]);
};그런데 이 짧은 삭제 기능을 구현하기 위해 3~4시간 정도 썼다.
일단 파이어베이스에서 제공하는 deleteDoc을 이용하는 것이라 구문은 헷갈리지 않았는데
도대체 id를 어떻게 가져와야 할지 막막했다.
시도1 ) 일단 같은 컴포넌트 내에서 map을 이용해 렌더링해주는 부분이 있으니까 그걸 사용하면 되겠다고 생각했다. 그런데 어떻게 가져와야 할지 모르겠고 그렇게 가져와 본 적이 없어서 안 될 거라고 생각했다.
시도2) 렌더링을 위한 map을 돌리기 위해 state로 저장했던 리뷰 리스트에서 아이디만 뽑아와서 넣어주면 되겠다고 생각했다. 시도해보니까 접근할 수는 있는데 문제는 이 삭제 함수를 작동시키는 건 수정 / 삭제 모달 컴포넌트에 있기 때문에 거기까지 전달을 해줘야 하는데 어떻게 해야 할지 모르겠었다. 구글링도 해봤지만 문제가 풀리지 않았다.
해결한 방법) 시도1과 시도2에서 실마리가 있었다. 렌더링이 되는 jsx 부분에 내가 원하는 id값이 있으니까 코멘트 컴포넌트에서 수정 / 삭제 모달 컴포넌트를 부를 때 모달을 오픈하는 동시에 useState를 이용해서 해당 리뷰 글의 id값을 state에 저장한다. 그리고 삭제 버튼을 눌렀을 때 onPress={deleteReview(reviewId)}를 넣어주면 위에 함수에서 파라미터로 reviewId를 잘 받아와서 코드가 작동했다.
어떻게 알았냐면 나보다 더 잘하는 분에게 물어봤다.
나는 삭제 함수에 인자도 넣어주지 않고 파라미터만 받고 있었으니까 작동을 안 했던 것이다.
함수에 대한 가장 기본적인 것인데 머리로는 알고 있었지만 이렇게 복잡한 로직 안에서 정신이 혼미했다. 다시 말해서 몰랐다는 뜻이지 뭐.
그 분이 부연 설명해주시기로는 현업에서는 함수와 함수 사이를 왔다갔다 하는 로직이 많은데, 함수 다룰 때는 어떤 걸 보내주고 어떤 걸 받아넣는지 확실하게 명시해주는 게 좋다고. 나도 다른 사람들 코드 읽을 때 이건 도대체 어디서 받아온 파라미터인지 아무리 찾아도 안 보이는 경우가 있어서 어떤 느낌인지 감을 잡았다.
후... 여튼 이걸로 오늘 너무 고생해서 진이 다 빠지는데 프로젝트가 끝나면 자바스크립트 내용 다시 한 번 쭉 봐야겠다. 역시... 기본은 아무리 해도 모자르지 않다.
3. 베이스가 되는 코드를 잘 짜놓자
프로젝트니까 여러 명이 각자 맡은 파트를 담당해 진행하고 있는데, 오늘 일이 터졌다. 네비게이션을 구성해주신 분이 리팩토링을 했는데, 이전 코드에 맞춰 작성해둔 코드들이 작동을 안 하는 일이 생겼다. 오전부터 점심 이후까지 이 문제를 해결하는 데만 시간을 들여야 했다.
일단 근본적인 문제는 처음부터 네이게이션을 어떻게 짜놓을지 서로 얘기하지 않았다는 점이다. 처음부터 설계에 기반해 네이게이션을 서로 얘기해가면서 짰다면 오늘의 일을 예방할 수 있었을 것 같다.
그리고 문제를 해결하면서 느낀 점은 로직 안에 있는 모든 과정들에 대해서 console.log로 확실하게 검증해나가면서 문제의 범위를 좁혀야 한다는 것. 일단 다들 멘붕이어서 차분하게 차근차근 검증할 생각을 못했다. 데이터를 받고 전달하고 또 받는 그 과정 중에 한 군데만 문제가 있어도 전부 문제가 되더라. 다음부터는 이 코드가 멀쩡하다고 믿지 말고 에러가 생기면 무조건 차근차근 검증해야겠다고 생각했다.
🏷️ 오늘의 코멘트
힘들었다 오늘도. 내일도?
