반복문내 비동기 코드 처리에 대한 궁금증

Question

안녕하세요. HEROPY님 강의를 보면서 공부하다가 의문사항? 궁금사항이 생겨 질문남깁니다. 프로젝트의 store/movie.js를 보면 페이징 처리를 위해 한번에 Ajax 요청으로 받아오는게 10개뿐이므로 각 각의 요청을 나눠서 최대 30개까지 받을 수 있는데요. 그 과정에서 반복문내에서 Ajax 요청을 합니다.  제가 궁금한게 반복문내에서 async, await를 사용하여 비동기 요청을하면 응답 순서가 반드시 지켜지는건가요? 이 질문을 드리는 이유는 예전에 비슷한 코드를 작성할 때 요청 순서가 서버 네트워크 상태에 따라서 뒤죽박죽인 경우가 있어서 고민했던 적이 있습니다. 그 때 당시에는 1) 한번에 들고오는 응답 갯수를 늘린다 2) 반복문내 요청에서는 동기 코드로 ajax 요청을 한 다( 매우 좋지 않은 방법이지만..) 이런 방식으로 해결하였던거 같습니다.  사실 현재 프로젝트 상에서 순서를 안지키더라도 크게 문제가 없을 듯합니다만 궁금해서 질문드립니다.

hellofrontdev · Answer

아 그런거였군요. 답변 감사합니당!

HEROPY · Answer

hellofrontdev 님  안녕하세요~ 역시 주말에도 공부하시는군요! 멋지십니다! 혹시 예전에 작성하셨다는 그 비슷한 코드에서 forEach나 map 등 콜백을 사용하는 반복을 쓰신 건 아닐까요? forEach나 map 같이 콜백을 사용하는 반복은 구조적으로 응답을 기다릴 수가 없고, 결론적으로 강의 예제와 같이 구식의 for문을 사용하면 응답 순서를 기다릴 수 있습니다! 테스트를 위해서 완성 예제 화면을 축소한 후 최대 30개로 검색을 하시면, 응답(검색된 영화 목록)이 순서대로 빵.빵.빵. 찍히는 것을 보실 수 있습니다. 혹시 응답이 너무 빠르면 네트워크 속도를 줄여서(강의에 내용 있어요~) 테스트해 보시면 도움이 되지 않을까 하네요 :)