오늘의 작업 : 방명록 만들기
firebase를 이용해서 방명록을 만들려고 하는데,
이런 형태의 방명록이다.
파란색 선은 팀원과의 소통을 위해 그어놓은 거라서 디자인적 요소는 아니다.
저 안에 들어갈 각각의 글들을 만들기 위해 코드를 작성했는데, 대략 이런 형태다.
const db = firebase.firestore();
let posts =[] ;
// 모든 데이터 가져오기
db.collection('guest-book').get().then((result) => {
result.forEach((data) => {
posts.push(data.data());
});
// posts에 data를 객체 형태로 저장.
// 데이터가 들어갈 ul 생성
const ul = document.createElement('ul');
ul.classList.add('guest-book');
// posts에서 post로 글을 하나씩 받아와 html태그로 변환.
posts.forEach(post => {
const li = document.createElement('li');
li.classList.add('post');
const userNameElement = document.createElement('p');
const userName = document.createTextNode(post['username']);
userNameElement.appendChild(userName);
userNameElement.classList.add('user');
li.appendChild(userNameElement);
const dateElement = document.createElement('p');
const datetime = new Date(post['date']['seconds']*1000);
const year = datetime.getFullYear();
const month = datetime.getMonth();
const date = datetime.getDate();
const hours = datetime.getHours();
const minutes = datetime.getMinutes();
const dateNode = document.createTextNode(`${year}년 ${month}월 ${date}일 ${hours}:${minutes}`);
dateElement.appendChild(dateNode);
dateElement.classList.add('date');
li.appendChild(dateElement);
const descriptionElement = document.createElement('p');
const description = document.createTextNode(post['description']);
descriptionElement.appendChild(description);
descriptionElement.classList.add('explain');
li.appendChild(descriptionElement);
ul.appendChild(li);
});
document.body.appendChild(ul);
});
// 방명록 서버에 저장하기
db.collection('guest-book').add({
username: "홍길동",
description: "날아간다아아아아",
date: new Date(),
}).then(result => {
console.log(result);
});
위와 같이 방명록을 작성하고, 방명록을 불러오는 코드는 완성했다.
위와 같이 코드를 작성해서 html을 생성하면,
이런 형태로 태그가 구성되고,
이런 형태로 일단 get() 요청이 성공적으로 이뤄지고 있는 걸 확인할 수 있다.
이제 삭제 기능을 만들어야 한다. 내가 찾은 정보에 따르면 firebase에서는 문서를 지우려면 문서 이름을 통해서만 지울 수가 있는데 정작 문서 이름을 알 방법이 없다.
오늘의 문제 : 문서를 지우려면 문서 ID가 필요한데, 문서 안에는 문서 ID가 없다.
firebase에서 collection.add() method를 통해 문서(SQL의 row에 대응하는 부분같다. NoSQL에서는 document에 해당.)를 생성하면 오른쪽 맨 위에 "Bn19cMwk..."처럼 자동으로 ID를 생성해주는데, 저 ID를 입력해야 문서를 삭제할 수 있다.
근데 문제는 문서를 js로 받아올 때 저 ID는 안알려준다는거... 심지어 where같은 쿼리의 형태로 문서 내부 속성에 접근해서 delete() method 등을 사용하는 방법도 안 먹힌다.
mongoDB같은 경우에는 객체를 생성할 때, _id 속성을 통해서 자동으로 ID값을 문서내에 만들어줘서, firestore가 NoSQL 기반이라길래 나는 firebase의 ID도 같은 개념인 줄 알았다. 근데 실제로는 아니었음. mongoDB는 쿼리로도 데이터 지울 수 있던데...쳇.
지금 시간이 늦어서 이제 잘 거 같은데 지금 떠오르는 방법으로는,
ID를 내가 직접 만드는거다. collection에 데이터를 추가할 때 add()가 아닌 다른 method를 사용하면 문서의 ID를 직접 정할 수 있다고 했던 것 같아서 UUID같은 패키지를 통해서 내가 직접 문서 제목을 설정하고 동일한 ID를 객체 내에 _id 속성으로 직접 지정한다. 그리고 js로 데이터를 받아왔을 때 _id를 html 태그에다가 "data-documentId" 속성으로 저장해놓고, 삭제가 필요할 때 "dataset.documentId" 등으로 불러와서 문서의 ID를 식별하여 삭제하는 것이다.
즉, 정리하면 문서 ID를 내가 원하는대로 직접 정할 수는 있지만, 만든 이후에 js에서 문서 ID를 직접적으로는 가져올 수 없다. 그래서 문서 ID랑 똑같은 값을 문서 내에 _id 속성으로 만들어놔서 나중에 내가 필요할 때 _id로 문서 ID를 찾겠다는 것이다.
근데 될지는 모르겠어서 내일 해봐야 함.
방명록 완성되면 요런 모양일 예정! 내일은 완성해야 하는디...
ID 지정 가능하다고 함. 내일 해보자.
했다.
UUID 패키지를 쓰고싶었는데 생각해보니 이번 프로젝트에서 node.js를 안쓰고 있어서 쓸 수가 없었다. 그래서 그냥 random을 돌릴까 하다가 그래도 겹칠 가능성을 최소화하기 위해서 getTime()으로 밀리세컨드를 받아와서 postId 값으로 쓰기로 했다.
doc 내부에 임의적으로 _id를 설정해서 doc의 제목과 동일하게 postId를 전달해줬다.
post id가 콘솔에 정상적으로 출력되는 모습.
collection에 doc을 살펴보면 doc의 제목과 문서 내부의 _id 속성값이 일치하는 것을 볼 수 있다.
이로써 문서를 js로 받아왔을 때, 객체 내부의 값인 _id를 통해 나는 DB에서 문서를 식별할 수 있게 되었다.
이제 다음 단계는 문서 지우기. 애초에 _id 값을 만든 이유가 문서를 지울 때 사용할 식별자를 만들기 위함이었다.
현재 문서인 1713366540561 을 지워보자.
1713366540561 이 지워지고 그 아래있던 문서가 위로 올라온 모습을 볼 수 있다. 아주 굳굳!!! 근데 파베 진짜 delete하기 겁나 귀찮게 만들었다.
후에 찾아봤는데 이번에 내가 쓴 작업환경은 파베 버전8인데, 버전9 부터는 함수가 약간 다른 식으로 작동한다고 한다. 버전을 올리면 함수를 전부 다시 써야해서 그대로 작업했지만, 버전 9부터는 addDoc 같은 함수를 썼을 때 docRef값을 반환한다고 한다. 아마도 docRef의 값이나 그 내부에 ID값이 포함되어 있는 모양이다.
