이번 프로젝트는 급하게 출발한 느낌이 있고 첫 프로젝트이다 보니 팀원들과 초면이어서 어색했던 부분이 있었다. 잘 해결해나갈 수 있을지 걱정도 되었지만 금방 친해질 수 있었고, 다 같이 적극적으로 회의를 거쳐 프로젝트를 완성도 높게 완수할 수 있었다는게 가장 뿌듯했다.
구현단계에서 팀과 함께 튜터님을 찾아가서 물어볼 시간도 없이 다들 바쁘게 달렸고, 고민을 많이 한 것이 느껴졌다.
실제 코딩에 대한 실력보다는 이전에 배웠던 웹개발 강의 내용을 떠올려 다시 복습하는 과정, Fetch, CRUD를 활용해보면서 겪을 수 있는 기본적인 문제에 직면하고 해결하는 과정에서 팀과 소통하고 해결해나가는 실력이 향상된 것 같아서 재밌었다.
async/await
멤버 리스트 호출 로직
구현된 멤버들의 리스트는
1) let docs = await getDocs(collection(db, "MemberInfo"));
: docs에 Member들의 DB 정보를 모두 담아온다. 지금 생각해보니 const로 선언할걸 그랬다.
2) docs.forEach(async (doc) => {...})
: 그리고 docs에 있는 각 문서들의 필드정보를 하나씩 불러온다.
3) let row; => {row = doc.data();}
: 미리 선언했던 row에 각 필드 정보를 순환하여 담게된다. 여기도 const가 좋아보인다.
4) const memberCardInfo=...;
: 멤버 리스트에 출력되는 카드 양식을 선언한다. 여기 더보기 버튼 양식아이디에 ${userID}값을 받아 각 멤버들의 더보기 버튼을 구분해주었다.
5) $('#memberCard').append(memberCardInfo);
: memberCard 아이디를 가진 Element에 멤버 리스트를 순차적으로 append 한다.
발생 문제
이렇게 되면 멤버 리스트에 멤버들이 모두 출력되는 것을 알 수 있는데 문제는 동적으로 생성된 더보기 버튼을 누르면 반응이 없다는 것이다.
더보기 버튼에 각 멤버의 아이디값으로 생성이 잘 되었어도 버튼을 누르면 해당 멤버의 고유 양식 팝업이 출력되지 않았었다.
문제 원인 파악
팀원들과 고민하고 튜터님께 질문을 통해 찾아보는 중 async 가 비동기 함수를 사용할때 쓰는 키워드인데 await을 통해 동기식으로 호출 순서를 수동 변경을 할 수 있다는 점이 눈에 보였다.
비동기를 하게되면 이벤트 루프를 통해 실행되기 때문에 안에 있는 로직이 언제 호출되는 모르는 이유로 await 이라던가 promise 키워드를 사용하여 병렬형식으로 호출할 수 있다.
작성했던 로직에는 async 안에 어떠한 await이라던가 promise가 없는 상태로 멤버들의 리스트가 출력되고 있었고, 그러한 로직이 언제 종료가 되는지 모르는 상태이기 때문에 아이디는 부여되었지만 빈 버튼이기 때문에 클릭에 따른 함수 호출이 작동하지 않았을거라고 짐작된다.
해결 방안
MDN - async/await 와, async/await을 forEach 문 안에서 사용할 때 주의 문서를 살펴보고 DB에서 가져와 버튼이 생성된 뒤로 동기식 구동을 시킬 수 있도록 변경하면 해결될 수 있을 것 같다.
느낀 점
팀원분이 담당하는 로직이지만 시간이 부족하여 끝내 구현하지 못하고 유저의 정보가 담긴 변수명을 사용하면서 구현했던 점이 아쉬웠다.
