구글파이어베이스를 사용해 노드js 웹서비스 만들기_3/5

### 지난번 파일업로드, 검색기능, 페이징처리 기능을 추가해 보았습니다.(아래)

현재 작업 중인 소스는 아래 깃 허브에 올려 놓았습니다.(단, 서비스계정키 파일은 보안때문에 제외 시켰습니다.)

 -. 표준노드js 웹서비스 코딩 소스 : https://github.com/miniplugin/nodejsboard 

 -. K-PaaS 플랫폼사용해 배포 : https://digitalsolveup.kr/platform.do 

 -. 표준노드js 앱 결과확인 URL : https://nodejsboard.apps.emergency-cloudplatform.kr/ 

오늘은, 댓글 기능을 추가하기 위한 준비를 해 보았습니다.

1) 쿼리함수 내에 반복문(map)에서 쿼리함수사용,(이전 코드에서는 쿼리함수내 쿼리함수는 Promise로 동기화 처리 했고. 이번엔 같은 구조이지만, 반복문(map)내에서 쿼리함수를 호출하기 때문에 특이 했습니다.)

2) 댓글 디자인 창 화면제작.

- 게시글별 총 댓글 갯수를 구하는 로직 추가: 게시물 리스트에서 반복문 내부에 댓글 카운트를 구하는 쿼리함수를 사용해야 한다. 그런데, 비동기를 동기화 시키는 Promise를 사용했지만, JS의 forEach문에서는 await를 하지 않기 때문에, Promise.all함수내에 subpromise함수를 사용했습니다.(아래)

// promose 데이터 업데이트 시 비동기화 때문에 정렬이 깨진 후 날짜별 재정렬
function custom_sort(b, a) { // 현재 내림차순 a, b를 바꾸면, 오름차순이 된다.
    return new Date(a.brddate).getTime() - new Date(b.brddate).getTime();
}
//파이어베이스 잡계 함수사용 아래 q.count() -> count 값을 구할 수 있다.
let subpromise = (childData) => {
    return new Promise((resolve, reject) => {
        const collectionRef = db.collection('reply');
        const q = collectionRef.where('brdno', '==', childData.brdno);
        q.count()
            .get()
            .then((sub_snapshot) => {
                console.log('댓글개수', sub_snapshot.data().count);
                childData.reply = sub_snapshot.data().count;
                resolve(childData);
            })
            .catch((err) => {
                console.log('Error getting documents', err);
                reject(null)
            });
    });
}
//... 중략
await Promise.all(snapshot.docs.map(async doc => { //snapshot.forEach(async (doc) => 대신 map 사용
                try {
                    var childData = doc.data();
                    childData.brddate_format = dateFormat(childData.brddate, "yyyy-mm-dd");//날짜 재정렬 custom_sort() 함수 때문에 제외
                    childData.brdtitle = (childData.brdtitle).join(" "); //파이어베이스DB는 텍스트검색을 지원하지 않기 때문에 배열로 저장
                    //console.log('순서1', childData);
                    //게시물별 댓글 갯수 구하기 시작
                    await subpromise(childData)
                        .then((result) => {
                            //console.log('순서2', result);
                            rows.push(result); //ejs에 보낼 데이터 추가
                        })
                        .catch((err) => {
                            console.log(`Error getting documents ${err}`);
                        });
                } catch (err) {
                    console.log('Error getting documents', err)
                }
            }));
            rows.sort(custom_sort); //화면에 보내기 전 위 Promise.all 사용때문에 ...
//...날짜별 정렬이 깨진 부분을 날짜 내림차순 정렬 함수 custom_sort로 처리 후 화면으로 보낸다.
            //console.log('순서3', rows);
            res.render('board3/boardList', { rows: rows, pagingObj: pagingObj });

- 특이 사항으로 위 코드 중 화면에 보내기 전 위 Promise.all + subpromise사용때문에 날짜별 정렬이 깨진 부분을 날짜 내림차순 정렬 함수 custom_sort로 처리 후 화면으로 보내는 처리가 필요한 것이 특이 사항 입니다.

- 댓글 창 디자인 작업(아래) : https://nodejsboard.apps.emergency-cloudplatform.kr/posts-read-reply.html

 

Ps. 다음시간에는 게시물 보기 창 ejs 파일에 위 댓글 창을 달고, 댓글 CRUD 작업을 처리할 예정 입니다.