팀 소개 웹페이지 만들기 - 3

팀 프로젝트를 하면서 최대한 이해하고 코드를 쓸려고 노력했지만 부족한 부분이 있을수도 있고 정리를 위해 내가 담당했던 파트의 코드들을 자세하게 분석해볼려고 한다.

---

- 코드 분석

내가 집중적으로 맡았던 '수정하기' 파트의 전체 코드 분석이다.

- 버튼 이벤트 핸들러

$('.btn_edit').click(async function () {
            let doc_id = $(this).data("id");

"수정하기" 버튼이 클릭됐을 때 실행되는 이벤트 핸들러를 사용하고
Firebase Firestore 에서 정보를 가져오기 위해 async 비동기 함수를 사용했다.

Q. 비동기 함수를 왜 사용하는가?

A. 브라우저 또는 서버에서 발생하는 지연 시간때문에 주로 사용하게 된다. 만약 동기적으로 작업을 수행하기만 하면, 한 작업이 끝날 때까지 다른 작업을 수행할 수 없어진다.

---

- 비밀번호

const enteredPassword = prompt('게시글의 비밀번호를 입력하세요.');
            const docRef = doc(db, 'coding-three', doc_id);
            const docSnapshot = await getDoc(docRef);

프롬프트를 사용해서 방명록을 작성할 때 입력했던 비밀번호를 입력시키고 'enteredPassword' 에 저장한다. 'doc' 함수를 사용해서 Firestore DB 에서 'coding-tree' 컬렉션 내에 'doc_id' 로 지정된 문서 참조를 생성한다. 그리고 'getDoc' 함수를 사용해서 앞서 생성한 참조를 통해 Firestore 에서 해당 문서의 스냅샷을 가져오고, 비동기 함수인 'await' 을 사용해서 문서를 가져온다. 가져온 문서는 'docSnapshot' 변수에 저장된다.

---

- 비밀번호 조건문 1

 if (docSnapshot.exists()) {
                const storedPassword = docSnapshot.data().비밀번호;

만약 'docSnapshot' 변수가 스냅샷에 존재한다면 'storedPassword' 변수를 만들어서 'docSnapshot.data()' 안에 '비밀번호' 를 저장한다.

---

- 비밀번호 조건문 2

if (enteredPassword === storedPassword) {
                    // 비밀번호가 일치하면 수정 작업 진행
                    let targetDoc = await getDoc(docRef);
                    let rowData = targetDoc.data();
                    
                    .
                    .
                    .
                    
                    } else if (enteredPassword == null) {
                    } else {
                    alert('비밀번호가 일치하지 않습니다.');
                    }
            } else {
              alert('해당 문서를 찾을 수 없습니다.');
            }
        });

먼저 내가 입력했던 비밀번호가 'storedPassword' 의 '비밀번호' 와 일치하다면 'docRef' 를 사용해서 해당 문서의 스냅샷을 가져오기 위해 'getDoc' 함수를 호출한다. 이때도 'await' 을 사용한다. 그리고 가져온 스냅샷에서 데이터를 추출하여 ''rowData' 에 할당해준다.

만약 비밀번호가 일치하지 않다면 '비밀번호가 일치하지 않습니다.' 라는 alert 를 띄워주고 위에서 위에서 언급한 'docSnapshot' 변수가 스냅샷에 없으면 '해당 문서를 찾을 수 없습니다.' 라는 alert 를 띄워준다.

---

- 수정하기 모달

                    $('#edit_wName').val(rowData['이름']);
                    $('#edit_wComment').val(rowData['내용']);
                    $('#edit_wIcon').val(rowData['아이콘']);

                    // 모달을 표시
                    $('#editModal').modal('show');

'수정하기' 모달에 내가 수정할 내용을 보여준다. 방명록 작성 시 적었던 '이름', '내용', '아이콘' 을 보여주고 'updatedData''.modal' 메서드를 사용해서 모달을 보여준다.

---

- 저장하기

$('#btn_save_edit').click(async function () {
                        // 사용자가 수정한 내용을 가져옴
                        const updatedData = {
                            '내용': $('#edit_wComment').val(),
                            '이름': $('#edit_wName').val(),
                            '아이콘' : $('#edit_wIcon').val(),
                        };

'저장하기' 버튼이 클릭됐을 때 실행되는 이벤트 핸들러다.
이후 클릭 이벤트가 발생했을 때 사용자가 '수정하기' 모달 에서 수정했던 내용을 'updatedData''updatedData' 에 저장한다.

---

- 뷰포트에 적용

						// 파이어베이스 문서 업데이트
                        await updateDoc(docRef, updatedData);

                        // 모달 닫기
                        $('#editModal').modal('hide');

                        // 화면 새로고침
                        location.reload();
                    });
               

'updatedData' 에 저장된 내용('이름', '내용', '아이콘') 을 Firestore 에 업데이트 시키고 다시 .modal 메서드로 모달을 닫아준다. 그리고 뷰포트에 바로 업데이트 된 내용을 반영시키기 위해 화면을 새로고침 시킨다.

---

- 팀 프로젝트를 마치며

이번 팀 프로젝트는 주말 제외 총 4일 정도 진행했는데 본 캠프 시작하자마자 바로 진행된 프로젝트라서 조금 정신없이 진행했었다. 여러 어려움도 있었고 힘들었지만 다들 열심히 참여해줘서 결과물은 만족스러웠다. 다만, 내가 작업한 부분이 많이 않아서 아쉬움이 좀 많이 남고 다들 많은 분량을 작업해주고 발표, 시연영상 제작 등 여러 부분을 담당해준 팀원분들한테 미안함도 있다. 결과물이 좋았던건 내가 잘해서가 아닌 팀원분들이 노력해주고 열심히 해줘서라고 생각한다. 이번 팀 프로젝트를 경험삼아 다음 프로젝트엔 좀 더 적극적으로 의견도 내고 공유도 하면서 팀 프로젝트를 진행해야겠다.

팀원분들 다 너무 고생많았고 좋은 경험 할 수 있게 해줘서 너무 감사하다! 😊

팀원 안바꾸고싶다 ㅜ