너무 어려운 게시판 구현하기..
게시판 구현하는 걸 firestore Database로 실습했다.
index.html (게시판 목록) 페이지
index 페이지 만드는 것부터가 어려웠는데...
list라는 클래스를 부여한 div 태그 안에 데이터를 만드는 것부터 시작이다.
import { collection, getDocs, query, orderBy } from "…/firebase-firestore.js";
파이어스토어에서 쿼리 만들고 문서 묶음 읽는 함수들 로드.
const q = query(collection(db, "posts"), orderBy("createdAt","desc"));
posts컬렉션을 대상으로,createdAt필드를 기준으로 내림차순(desc) 정렬하는 쿼리를 생성.
const snap = await getDocs(q);
- 위 쿼리를 실행해서 스냅샷(문서 모음)을 받아옴.
- 목록을 비워서 중복 렌더링 방지(새로고침 느낌).
- 결과에 담긴 각 문서마다 반복
const d = docSnap.data();→문서 실제 데이터 객체const id = docSnap.id;→문서 ID(문서 식별자).const li = document.greateElement('a');→목록 아이템으로 쓸<a>생성.
- 읽기 페이지로 이동하도록 링크 설정(쿼리스트링으로 문서 ID 전달)
- 제목 표시.
??(null 병합 연산자):d.title이null/undefined면 “(제목 없음)”로 대체. - 날짜 표시.
?.(옵셔널 체이닝):createdAt이 없거나 타입이 달라도 에러 없이 건너뜀. - Firestore
Timestamp라면toDate()로 JSDate로 바꾸고,toLocaleString()으로 지역 시간 문자열로 변환.
- 완성된 링크를 목록 컨테이너에 추가.
write.html 뜯어보기
불러온 함수들 :
-
collection: 컬렉션 선택 -
addDoc: 새 문서 추가. -
serverTimestamp: 서버 시간 자동 입력. -
doc: 특정 문서 지정. -
getDoc: 문서 읽기. -
updateDoc: 문서 수정.
url에서 글 ID 읽어오기
- 주소창
?id=xxxxxx에서 글 ID추출. postId값이 있으면 "수정모드", 없으면 "새 글쓰기 모드."
DOM 요소 변수
- 입력칸, 버튼, 제목 DOM을 변수로 잡아 둠.
수정모드 처리 (then 방식)
postId가 있으면 글 수정모드 진입.- Firestore에서 해당 문서 불러와서 제목·내용 입력칸에 채워 넣음.
?? ""→값이 없으면 빈칸으로 처리
수정모드 처리 (await 방식)
- await는 async 함수 안에서만 쓸 수 있음.
- Promise가 끝날 때까지 “잠깐 기다렸다가” 결과를 변수에 바로 담아 줌.
- 코드가 위에서 아래로 동기 코드처럼 읽혀서 직관적임.
--
read.html 살펴보기
글 목록에서 항목을 클릭하면 read.html?id=문서ID로 이동한다.
이 페이지에서는 URL에서 id를 꺼내 Firestore에서 해당 문서를 불러오고,
제목/내용/날짜를 DOM에 표시해준다.
const ref = doc(db, "posts", postId);→ 특정 문서 참조const snap = await getDoc(ref);→ 데이터 가져오기- 가져온
snap.data()를 화면에 출력
또한 “수정하기” 버튼을 누르면 write.html?id=문서ID로 이동해서
글 수정 모드로 진입할 수 있다.
전체 흐름 정리 (CRUD)
- Create:
addDoc()으로 새 글쓰기 - Read:
getDocs()/getDoc()으로 목록과 읽기 - Update:
updateDoc()으로 수정 - Delete:
deleteDoc()으로 삭제 (추가 구현 가능)
배운 점과 회고
이번 실습에서 가장 헷갈렸던 건 then()과 await 차이였다.
처음엔 getDoc(...).then(...) 방식이 익숙했는데,
await로 바꾸고 나니 코드가 위에서 아래로 읽혀서 훨씬 직관적이었다.
또한 ??(null 병합)과 ?.(옵셔널 체이닝)을 사용하면
Firestore에서 값이 없을 때도 페이지가 깨지지 않는다는 점이 인상 깊었다.
마지막으로 serverTimestamp()를 활용하면
글 작성/수정 시점을 서버 기준으로 정확하게 기록하고,
정렬할 때 안정적으로 동작한다는 것도 알게 되었다.
