미니 프로젝트 - twitter -2

이번 프로젝트를 진행하며, 내가 가장 공을 들인 API는 프로필에 관련된 API이다.
프로필에는 내가 작성한 트윗, 내가 댓글 단 트윗, 미디어가 포함 된 트윗, 좋아요 한 트윗 등 필터링 할게 많았고, 각각의 트윗마다 댓글, 리트윗, 좋아요의 숫자가 나와야 했기에 가장 공이 많이 들었던 API이다.

각각의 목록에 관련된 데이터 입력하기

쿼리문을 통해 목록을 뽑으면 배열에 객체로 데이터가 담기게 된다. 하지만 내가 처음 뽑은 배열에 담긴 객체에는 각종 연관 데이터가 존재하지 않았다. 그래서 나는 반복문을 통해 각각의 객체에 접근해 데이터를 추가로 넣으려고 계획하고 작업했다.

1차 시도

result.map(async el => {
  const comments = await tweetDao.replyCount(el.id);
  const like = await likeDao.likeCount(el.id);
  const retweet = await retweetDao.retweetCount(el.id);
  el.commentsNum = comments.count;
  el.likesNum = like.count;
  el.retweetNum = retweet.count;
}

for 반복문 사용을 최대한 지양 하고자, map 메서드를 사용했다.
각 객체를 순회하며 DB에서 각 객체에 대한 정보를 추출한 뒤, 객체 안에 집어 넣었다.

하지만 위 방법은 작동하지 않았다. map 메서드 내부에서는 값이 제대로 들어가지만, 나온 순간 값이 제대로 저장이 되어 있지 않았다.
await를 사용하면Promise 객체는 동기적으로 실행 시켜 주지만, 배열은 해당 기능이 작동하지 않는다는 것이었다.

2차 시도

const getMessage = async () =>  {
  const result2 = await Promise.all(
    result.map(async el => {
      const comments = await tweetDao.replyCount(el.id);
      const like = await likeDao.likeCount(el.id);
      const retweet = await retweetDao.retweetCount(el.id);
      el.commentsNum = comments.count;
      el.likesNum = like.count;
      el.retweetNum = retweet.count;
  }
}

구글링을 해본 결과 Promise.all 함수는 비동기 함수의 동기적 처리를 위해 만들어진 함수라는 결과가 나왔다. 그래서 해당 함수를 사용해서 실행시켜 보았다.

위 방법도 작동하지 않았다.. Promise.all 을 사용하면 코드를 순차적으로 기다린뒤에 작동한다고 나와있으나, DB의 처리는 비동기적으로 실행시켜 버려 작동이 제대로 되지 않는걸로 유추 된다.

3차 시도

for (el of result) {
  el.replyCount = await tweetDao.replyCount(el.id);
  el.likeCount = await likeDao.likeCount(el.id);
  el.rtCount = await retweetDao.retweetCount(el.id);
}

결국 for..of 반복문을 사용했다.. 위의 코드는 바로 작동 되었다.

최대한 for 문을 쓰지 않고 싶지만, 어쩔수 없이 사용해서 프로젝트를 진행하게 되었다.

마치며

이번 미니 프로젝트는 처음으로 해본 팀 프로젝트 였다. 프로젝트를 마치고, 다시 로직을 생각해보고, 회고 해보니 로직을 수정할 곳도 많고 부족한 점도 많았다.
하지만, 프론트와 백이 서로 데이터를 주고 받고, 팀 간의 커뮤니케이션도 진행해 보며, 아주 값진 경험을 얻게 되었다.
이번 프로젝트의 경험을 기반으로 앞으로의 프로젝트는 더욱 성장한 모습을 보여줄 수 있을거 같다.