게시판 메뉴의 CSS 뼈대가 완성되었으니 이제 본격적으로 게시물 작성하기 기능을 만들어 보려고 한다. 데이터베이스는 firebase의 Realtime Database를 사용할 예정이다.
Firebase에는 DataBase와 Realtime DataBase 두 개가 있는데 업로드되는 데이터의 양이 작고 CRUD가 많이 발생하는 경우 후자가 더 적절하기 때문에 Realtime DataBase를 사용하기로 했다.
board_service.js
board_service.js에는 게시판의 네 가지 함수를 제공하는 클래스를 작성했다.
- 작성 (Write)
- 읽기 (Load)
- 수정 (Modify)
- 삭제 (Delete)
게시물 작성
작성되는 게시물은 json으로 형태는 다음과 같다.
{
"memNo": 'memberId',
"userName" : 'userName'
"title": "제목",
"content": "내용"
"vote" : 0,
"view" : 0,
"date" : "2022-04-14 00:00"
}
게시물별 고유 key값은 Date.now()를 통해 할당하려고 했는데 마침 Realtime DataBase에서 key값을 자동 할당해주는 push를 제공하고 있었다!!
https://firebase.google.com/docs/database/admin/save-data?hl=ko
<Realtime Database 저장 관련 문서>
확인 결과 아주 잘 저장되는 걸 확인할 수 있다.
게시물 읽기
게시물 리스트 노출
boardList를 console.log로 띄워서 확인해보자.
잘 불러와지는 걸 확인한 후 게시물을 렌더링하려고 했는데 문제가 생겼다. map 함수가 작동을 하지 않는다. 처음엔 useState의 비동기성으로 인해 아직 비어있는 오브젝트에 map을 써서 나는 에러인 줄 알았다. 하지만 확인해보니 boardList에는 이미 데이터가 받아진 상태다. 데이터베이스로부터 데이터는 정상적으로 받아오고 있으나 내가 지금 쓰고 있는 map의 형태가 boardList의 데이터 구조와 맞지 않는 것 같다.
바보처럼 key값이 할당된 오브젝트를 배열처럼 단순하게 순회하려고 했던 게 문제였다. Object.keys로 키를 받아와서 그 키를 바탕으로 오브젝트를 돌아야 한다. 테스트 결과 잘 나온다!
작성된 게시물들의 연번이 firebase에서 제공하는 기본 key값인데다 데이터가 저장된 순서대로 보이니 역순으로 배치되는 모습이 보인다. 게시물의 총 개수에서 해당 게시물의 index만큼을 뺀 값으로 게시물 연번을 다시 매기고, map에 reverse을 추가하여 최신 글부터 상단에 노출될 수 있도록 수정했다.
게시물별 보여주기
해당 게시물을 클릭했을 때 보여지는 화면이다. html 태그까지 보여지고 있다.
dangerouslySetInnerHTML을 사용하여 해결했다.
