realtime database 쿼리정렬 (orderByChild not working?)

2차 기획 멘토링 결과

1. 경로를 중간에 추가하거나 수정하거나 다른 날로 옮기는 기능은 무조건 추가!

2. 동시성제어 라는것에 관심을 가지고 해결할 것

3. 챌린징하는 부분이 많으니 음성채팅 기능의 스코프를 1:1로 줄이던가 없애던가 하는 방향도 고려해 볼 것

기존에는 내가 파이어베이스를 통해 query라는 개념을 사용할 수 있다는 것도 몰랐기 때문에 

장소를 추가하면 무조건 차례대로 push 되는 형태로 일정이 뒤로 달라붙는 기능만 있었다.

그래서 이범규대표님의 피드백을 반영하여 일단 중간에 추가하는 기능을 넣고 추후에 시간을 수정하는 기능도 넣어보자

 

일단 뭔가 DB의 중간에 들어가려면 query라는 것을 써서 어떤 기준에 따라 정렬해주면 될 것 같다는 생각이 들었다.

하지만 우리가 기존에 받는 정보는 오로지 장소(매장)에 대한 정보뿐이었으므로 차례로 정렬할 기준이 부족했다.

처음에는 순번(1,2,3..)을 유저에게 입력받아서 나열해볼 생각이였으나

예를 들어 1,2,3,4,5번 장소가 이미 있는 상황에서 2번을 추가한다면? 기존의 2,3,4,5번이 하나씩 밀리는 알고리즘을 

프론트엔드에서 짜서 파이어베이스에 반영해야 한다.

그 정도는 할 수 있지 않을까?라고 생각했지만 삭제하는 경우를 생각해보니 시간이 너무 오래 걸릴 것 같았다.

그래서 방문시간을 입력받기로 조정했다.

확정하면 바로 파이어베이스로 날아가는 것이 아니라, 시간을 정하도록 모달 창을 띄웠다.

그리고 플랜 확정을 누를 때 온클릭이벤트로 기존의 함수를 붙여서 시간 정보까지 같이 가져가도록 설정했다.

(빠르게 해야 하는 상황이라 급하게 하드코딩했습니다..😅)

숫자로 가져가야 대소 비교가 가능할 것이라고 생각해서 parseInt 해서 보냈습니다.

이제 저의 DB에는 planTime을 가진 장소 객체들이 있을 것이고, 저는 불러올 때 그 값을 비교해서 

쿼리정렬을 시킨 채로 불러오면 됩니다!

 

다음은  가져오는 부분입니다. 

위쪽에 보시면 query라는 명령어가 추가되었고 뒤에 orderByChild("planTime")을 추가했습니다.

레퍼런스에서 불러올 때 planTime기준으로 오름차순으로 불러오라는 뜻입니다.

그리고 onValue에서 꼭 snapshot.forEach를 써줘야 합니다.

snapshot.val()을 하면 쿼리정렬이 안됩니다.

https://stackoverflow.com/questions/33893866/orderbychild-not-working-in-firebase

orderByChild not working in Firebase

그 이유는 snapshot.val()을 하게 되면 JSON객체가 반환되는데 그 객체의 키 순서는 firebase의 통제가 아니라 브라우저의 몫이라고 하는군요. 저는 firebase에서 보내주는 그 순서가 필요합니다.

그래서 위 url의 답변을 참고하여

forEach를 써서 firebase가 보내주는 순서대로 하나하나 배열에 추가했습니다.

그래야만 쿼리정렬을 할 수 있습니다.

이렇게 해서 유저로부터 시간을 입력받아 중간에 일정을 추가하는 기능을 구현했습니다.

 

다음에는 프론트단에서 어떻게 firebase realtime DB에 트랜잭션, 동시성 제어를 할 수 있을지 공부해서 오겠습니다!