forEach는 async를 기다려주지 않는다

평화롭게 프로젝트 중....

 

작성자를 띄우고 싶다..!

하지만 post 에는 UserId만 있을 뿐 username은 들어있지 않았는데,

가장 먼저 생각한 것은 posts에 forEach로 접근하여 각각의 post마다 username 정보를 불러와서 덧붙여주는 것.

 

    const posts = await Post.findAll({
      where: { BoardId: currentBoard.id },
      order: [["createdAt", "DESC"]],
      raw: true,
    });

    posts.forEach(async (post) => {
      const author = await User.findOne({ where: { id: post.UserId } });
      Object.assign(post, { author: author.name });
      console.log(post);
      return post;
    });

그래서 작성한 것이 위와 같은 코드이다.

 

하지만 아무리 해도 posts는 변함이 없었는데, 몇시간의 고민과 구글링을 통해서 원인이 forEach와 비동기 관련이었다.

처음 자바스크립트를 공부했을 때 배웠던 기억이 난다. 역시 다 까먹게 되있다.

 

 

forEach에서 async를 써야할 때 해결방법 2가지

1. for ... of 문

2. Promise.all()

 

 

 

결국 해결해낸 코드 ↓

    const promises = posts.map(async (post) => {
      const author = await User.findOne({ where: { id: post.UserId } });
      post.author = author.name;
      return post;
    });
    await Promise.all(promises);

 

작성자가 잘 나온다..!

 

 

 

forEach는 콜백함수를 요소마다 그냥 전달해주는 역할을 하고,

Promise.all()은 비동기함수의 병렬 처리를 하는 역할을 한다.

 

잘 모르겠으면 forEach의 동작 원리와 Promise.all()을 검색해보자