크롬으로 디버깅을 위해 코드 내 debugger로 중단점 설정 후 페이지 새로고침해서 개발자도구에서 디버깅을 잘 하고 있었는데, 언제부터 였는지, 중단점이 잡히지 않고 그냥 넘어가 버리는 현상이 발생.
크롬 업데이트 하면서 관련 설정이 변경된 것으로 보이는데, 대체 어디서 뭘 변경해야 되는거지??
옆에 같이 일하는 돌아이 요원이 검색해서 해결책을 찾아줌.
Chrome > DevTools > Settings > Ignore List > Enable Ignore Listing 체크 해제
Enable Ignore Listing이 체크되어 활성화되면 브레이크포인트를 무시하고 그냥 넘어가니, 체크를 해제 후 테스트 해보면 중단점이 아주 잘 걸림.
더 자세한 정보는 아래 링크 참조.
https://developer.chrome.com/docs/devtools/settings/ignore-list?hl=ko
최근에 업무중 forEach로 순회하며 api 호출 후 결과를 받아서 다음 작업을 수행해야하는 경우가 있었다.
일단 api가 list형태로 파라미터를 던져서 한번에 조회 결과를 반환해주면 성능 면에서 더 좋을텐데, 굳이 단건 호출만 가능하도록 api를 제공하니 어쩔 수 없이 forEach로 순회하며 여러번 api를 호출할 수 밖에 없었다.
어쨋든 의도는 forEach로 순회하며, async 함수로 api를 호출 후 결과를 받아서 값을 셋팅해야 하는데, 돌려보니 비동기 호출 후 결과가 오기를 기다리지 않고 그냥 다음 순회를 돌아버리는 문제가 있었다.
forEach() expects a synchronous function — it does not wait for promises. Make sure you are aware of the implications while using promises (or async functions) as forEach callbacks.
mdn web docs를 찾아보니 forEach는 promises를 기다리지 않는다고 한다.
그래서 더 찾아보니 for of문을 이용하는 방법이 있는데, 이 방법은 순차적으로 처리하다 보니 병렬처리가 아니라서 순회건수가 많으면 시간이 오래걸리는 문제가 있고,
병렬처리를 위해서는 Promise.all()을 이용하는 방법이 있다.
비동기로 호출해야 하는 api 호출 부분을 Promise배열로 만들고, Promise.all()을 통해 실행하면 비동기 함수들을 병렬로 동시에 처리할 수 있다.
let apis = [];
const promises = this.sourceList.map(async (x) => {
const api = await calledApi({key: x.value});
apis.push(api);
});
await Promise.all(promises);
map()을 통해서 promise배열에 담아서, Promise.all()을 통해 실행할 수 있다.
결론은 순회하면서 비동기 처리가 필요하면 forEach대신에 map(async obj) 형태로 사용하면 된다.