Promise와의 전쟁, 북마크 기능 구현 성공기

오늘은 북마크 기능을 구현하려고 했는데 또 async/await 때문에 발목이 잡혔다..

📌 내가 구현하려던 방식

1.	북마크 추가 버튼을 누르면 해당 영화의 id가 배열에 추가
2.	추가된 id 배열로 getMovieData 함수를 호출해 영화 데이터를 받아오기
3.	받아온 데이터로 영화 카드 리스트 생성

🚧 문제 발생

getMovieData 함수가 Promise를 반환하다 보니 데이터를 제대로 못 가져오는 문제가 생겼다.

문제 해결 시도

1. 함수 외부에 빈 배열을 선언하고 그 안에 await getMoviesAPI의 결과를 push하는 방식

   → 결과: 빈 배열만 출력된다. await가 비동기적으로 실행되면서 데이터가 배열에 추가되기 전에 코드가 끝나버렸다.

2. openBookmark 함수에 async를 붙여서 해결하려고 시도

   → 결과: forEach 안에서 await가 동작하지 않았다.

해결 방법

map 함수를 이용해 문제를 해결했다. map은 배열을 순회하며 동일한 크기의 새로운 배열을 반환하는데 이 과정에서 Promise 배열을 생성할 수 있다. 여기서 Promise들을 한 번에 처리하려면 Promise.all을 사용하면 된다.

1.	bookmarkIds.map → 각 id를 이용해 getMovieData를 호출하고 Promise 배열 생성
2.	Promise.all(promises) → Promise 배열을 한 번에 처리해서 데이터 반환

느낀점

forEach는 비동기 처리가 어렵지만 map은 비동기 작업이 가능하다. map에 익숙해지자!! 그리고 저번에 블로그에 써놓았던 async/await 관련 트러블슈팅 글을 보면서 문제를 해결해보려고 했다. 기록의 중요성을 또 한번 느꼈다. 오늘 쓴 이 글도 미래의 나에게 도움이 되길...