24-04-16 Firebase에서 불러온 데이터 정렬하기

오늘은 어제 작성한 SA를 바탕으로 프로젝트의 코드를 작성하는 시간을 가졌다.

 

TIL 특강도 있었는데 사전캠프때부터 꾸준히 작성하고 있었기 때문에 가벼운 마음으로 들을 수 있었다. 이미 블로그에 공부한 내용을 정리해두는 것이 얼마나 도움이 많이되는지 직접 느낄 수 있었기 때문에 앞으로도 열심히 잘 적을 수 있을 것 같다. 

 

그리고 예상치 못한 팀원의 이탈도 있었다. 포기하신게 아니라 다른 일자리를 찾으셨다고 하니 마음은 편했는데 갑자기 팀원이 4명에서 3명으로 줄어드니 당황스럽기는 했다. 그치만 남은 3명이서 더 열심히 팀 프로젝트를 진행할 수 있었다.

 

사실 어제 캠프 시작하자마자 바로 SA를 작성해야해서 살짝 당황스러웠고 그렇기 때문에 초반에 계획을 잘 세워두고 홈페이지 제작에 임했어야 했는데 그렇지 못했다. 팀원들도 모두 각자 찾아보면서 공부해온 부분이 있었기 때문에 초기 계획과는 다르게 다양한 의견들이 나왔고 처음 작성한 SA와는 조금 다른 결과물로 완성이 되어가고 있다. 그래서 내일부터는 아예 계획표부터 수정하고 홈페이지 제작을 완료하게 될 것 같다.

 

어제 튜터님께서 프로젝트에 방명록 제작이 계획에 있는 것을 보시고는 Firebase를 사용할 경우에 글을 남긴 시간 순서대로 정렬해서 출력하는 것을 하려면 생각보다 까다로울텐데 시도해보라고 힌트를 주시고 가셨다.

 

그래서 그 부분을 찾아보고 해결해보았던 과정을 정리해본다.

 

1. Firebase에서 불러온 데이터 정렬하기

1-1. 문제 파악

먼저 웹개발 종합반에서 배운 내용만을 생각해보면 Firebase에 데이터를 저장하고 불러오는 것을 맛보기로만 배운 수준이라 애초에 Firebase에 데이터가 어떤 순서로 저장되고 불러오게 되는 것인지 자체를 몰랐다.

 

그리하여 찾아봤더니 임의의 id 값을 준 뒤에 그것에 따라 정렬하는 것이 기본설정이라고 한다.

 

실제로 1,2,3,4,5,6,7,8 숫자를 순서대로 저장해보았다. 그랬더니 아래와 같은 결과가 나왔다.

데이터에 임의의 ID 값이 부여되고 그것이 숫자, 알파벳 대문자, 알파벳 소문자 순으로 정렬되는 것을 볼 수 있었다. 

 

게시판 기능을 임의로 만들어 둔 페이지에서는 아래와 같이 완전히 임의의 순서로 정렬되었다.

이제 문제는 파악했으니 순서대로 정렬하는 법을 찾아봐야 한다.

 

1-2. 찾아본 해결 방안

먼저 시간 순서대로 정렬을 하려고보니 내가 저장한 데이터에는 시간에 대한 데이터가 아예 없었다. 그래서 데이터를 저장할 때 시간을 같이 저장하는 것 부터 하기로 했다.

 

아래와 같이 댓글 달기 버튼을 눌러 데이터가 저장될 때 저장된 시간까지 저장되도록 코드를 바꿔주었다.

$("#guestupload").click(async function () {
            let name = $('#name').val();
            let comment = $('#comment').val();
            const date = new Date(); // 새로 추가한 부분


            let doc = {
                'name': name,
                'comment': comment,
                'date': date // 새로 추가한 부분
            };
            await addDoc(collection(db, "guestbook"), doc);
            alert("댓글이 작성되었습니다")
            window.location.reload();
        });

 

그리고 나서 다시 데이터를 저장해보았다.

위와 같이 정상적으로 시간이 들어간 것을 볼 수 있다.

 

이제 데이터를 Firebase로부터 가져올 때 시간순으로 정렬을 하면 된다.

 

찾아보니 query와 orderBy함수를 이용하면 쉽게 정렬된 데이터를 가져올 수 있다고 한다. 그래서 바로 적용해보았다.

// 기존 코드
let docs = await getDocs(collection(db, "guestbook"));

// 수정한 코드
let docs = await getDocs(query(collection(db, "guestbook"), orderBy("date")));

 

그런데 위와 같이 작성하고 나니 더 이상 데이터가 Firebase로 부터 불러와지지가 않았다. 잘못한 부분이 있는지, 오타가 있는지, 괄호를 빼먹은게 있는지 한참을 이리저리 살피다가 결국 안되는 이유를 알지 못해 절망하려던 찰나에 console을 열어 어디서 오류가 난것인지 확인할 수 있었다.(그때 왜 콘솔을 볼 생각을 못했는지 나도 잘 모르겠다.)

콘솔을 열어 확인해보니 query가 정의되지 않았다는 오류 메시지를 볼 수 있었다. 오류가 어디서 발생했는지 알았으니 어딜 고쳐야하는지 쉽게 파악할 수 있었다.

 

코드를 위에서 부터 다시 보니 다음과 같은 부분을 볼 수 있었다.

// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

 

사실 이 라이브러리 가져오는 부분은 강의를 들으면서도 코드스니펫 '딸깍' 복사만 해서 썼던 부분이라 깊게 생각해 본 적이 없었다. 지금 보니 내가 사용하고 있던 함수들 모두 라이브러리에서 가져온 것이었다. 그러니 똑같이 query와 orderBy 함수를 가져오면 될 것 같았다.

// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { query, orderBy } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

위와 같이 query와 orderBy 함수를 라이브러리에서 가져왔다. 그리고 다시 시도해보니 이번에는 잘 작동되었다.

 

아래와 같이 순서대로 결과를 가지고 온 것을 볼 수 있다.

그런데 1,2,3,4,5,6,7,8 순서대로 저장했고 최근에 작성한 댓글 순서대로 불러오는 것이 목표였기 때문에 8,7,6,5,4,3,2,1 순서로 불러와져야 한다.

 

따라서 orderBy 함수에 내림차순으로 정렬("desc")하는 부분을 추가해주었다.

let docs = await getDocs(query(collection(db, "guestbook"), orderBy("date", "desc")));

그런 다음 다시 새로고침을 해보았다.

 

아래와 같이 반대로 정상적으로 나온 것을 볼 수 있다.

위와 같이 몰랐던 부분에 대해 공부해보고 참조해보며 문제를 해결해보았다. 생각보다 시간이 오래걸리긴 했지만 다 하고나니 꽤 뿌듯했다. 이제 위와 같이 기능을 구현하는 방법을 알았으니 이걸 활용해 페이지를 잘 꾸며보아야겠다.

 

2. 오늘 배운 것

- TIL 작성법을 자세히 배워보았다

- Git, GitHub 사용법을 복습해보았다. 프로젝트 진행하며 협업해보면서 사용해보니 더 잘 알게된 것 같다.

- 실제 페이지를 제작해보니 생각보다 시간이 오래걸렸다. 그치만 시행착오를 겪어가며 하나하나 수정해나가는 부분에서 재미를 느낄 수 있었다. 내일 더 열심히 해봐야겠다.