23/10/08 TIL _ 게시판 글번호

 

내일배움캠프 에서 토이 프로잭트를 진행중이다. 

아직 다들 시작한지 얼마 안되었지만 열심히 머리 맞대고 만들고 있는데, 

오늘은 게시판 글번호 기능이랑, 수정하기 기능을 만졌다. 

 

 

 

게시판 글번호 기능

게시판에 페이지 네이션을 어찌어찌 완료 했다. 

그런데, 그 기능을 완료하니까 게시판 글번호 기능이 작동되지 않았다. 

 

글번호 기능을 구현하기 위해 이런 방법들을 시도해 봤다. 

 

⭐️접근 방법 1.⭐️ 

파이어베이스 문서 id값을 setdoc으로 설정해서 넣어준 후에, 

그 값을 가져와서, +1 해준 뒤,

새로운 데이터의  문서 id 값을 +1 해준 값으로 넣어준다. 

이 id 값을 이용해서 글번호를 넣어준다. 

 

👉 setdoc으로 설정까지는 해줬는데, 이 루프를 만들 방법을 계속 고민했다. 

그런데 지금 생각해 보면 훨씬 더 복잡한 방법이였던 것 같다. id 값을 계속 가져와야 한다. 

 

 

⭐️접근 방법 2.⭐️

num 이라는 변수에다가, 고유 식별값을 만들어서 넣어줬었다. 

var newID = function () {
    return Math.random().toString(36).substr(2, 16);
};

이 값을 불러와서 object에 넣어주는데, 

넣어줄 때 글번호를 위한 키, 값 을 만들어 주는 방법을 고민했다. 

 

👉  함수 밖에서 변수를 선언하고, submit 이벤트가 일어나면 변수가 ++ 이 되도록 했지만,

글번호가 같은 숫자가 찍히는 현상이 나타났다. 

당연한 결과였다. 그렇게 되지 않기 위해 좋은 방법이 없을까 계속 고민했다. 

데이터를 저장하기 위해 만든 write 파일에 데이터를 불러오는 코드도 넣어야 할까 ? 싶었고, 멘붕에 빠져버렸다. 

 

 

 

 

⭐️접근 방법 3.⭐️

글번호는 데이터를 불러와서 글 목록을 보여주는 list 파일에서만 사용할 수 있으면 된다. 

그렇기 때문에, 복잡하게 할 필요 없이 데이터 불러오는 곳에서만 코드를 만질 수 있다. 

 

1. 데이터를 불러온다
2. 데이터를 재 가공할 배열을 만들어 둔다. 
3. 글번호 값으로 이용할 변수와 값을 할당해 둔다. (최신 데이터가 가장 큰 글번호 값을 가지도록 변수의 값에는 데이터의 길이를 넣어주었다. ) 
4. 불러온 데이터를 반복문을 이용해서  하나하나 꺼내는데,
5. ...을 이용해서 아까 만들어둔 배열에 넣어준다. 
6. 이때 아까 선언한 변수 이름을 키,  변수값을  값 으로 넣어준다. 
7. 반복문의 각 반복이  끝나기 전에 변수값에 --를 해준다.(최신 데이터가 가장 큰 글번호 값을 가지도록) 
8. 데이터를 붙일때, 데이터의 요소 하나하나를 반복하며 변수에 해당 데이터를 넣어주는데, 이때 글번호 값도 넣어준다. 
9. 그리고 append

const board = collection(db, "board");
const d = await query(board, orderBy("when", "desc"));
const docs = await getDocs(d);

// 글 번호 만들기
let bigDocs = [];
let a = docs.size;  //전체 데이터의 길이를 구한다. 
docs.forEach((data)=>{
  let dat =  {
    ...data.data(),   //각 데이터를 넣어줄 때에, ...을 이용해 풀어줘야 하고, .data() 해야한다. 
    index : a,       //글번호를 위한 값 넣어줬다. 
    ID : data.id  //데이터의 id값도 같이 불러와 줬다. 
  } 
  bigDocs.push(dat)  
  a--   //글번호가 최신 글 일수록 커야한다. 이전글이 25 였으면 새로 작성한 글은 26
})