프론트엔드에서 보여줘야 하는 데이터를 추출하기 위해 다른 엔티티까지 조회해야 하는 사태가 발생... 분명 화면 설계 할 때 이런 데이터가 필요하다고 얘기는 나왔는데 db 구조로만 생각하다 보니 API 설계에서는 그 내용을 빠뜨려버렸다. 맙소사! 이게 무슨 일이람.
내일이 마감인데 이제야 이런 크리티컬한 요소를 확인해버린 게 정말 충격적이지만 어쩔 수 없다. 프론트에서 axios로 가져온 다음 데이터를 수정하고 뿌려주는 수밖에... 우아한 테크 세미나에서 말하던 react query를 사용하는 때란 이런 것이겠지 싶은 생각이 든다. 지금에야 토이 프로젝트이고 데모니까 요청이 그다지 많은 서비스가 아니지만, 만약 실사용 대민 서비스에서 이런 구조를 사용하고 있다면? 상상만 해도 끔찍하다(모레 맡게 될 페이지에서 어떤 참상을 보게 될 지는 모르겠다마는.).
안 그래도 Promise 객체에 대한 처리가 불안정한데 데이터를 전달하기 전에 또 Promise 객체를 resolve 시켜야 하는 상태가 됐다. 얼마 전에 본 인프랩의 오류 부검 글이 생각난다.
그리고 오늘 나를 한참 곤란하게 만들었던 이중 Promise.

          {
            reviewList.map(review => {
              review.then(res => {
              return res
              })
            })
          }

비동기로 가져온 데이터에 또 비동기 요청을 보내 받은 값을 하나로 합쳤더니 Promis 객체가 된 거다... .then()을 통해 데이터를 가져오려 했으나 끝끝내 안되다가 map을 한 번 더 돌린 내부에서 .then()을 시도했더니 드디어 해결됐다. 이렇게까지 해야하나 싶지만 모르겠다, 일단 마감이 내일이니 더 좋은 방법은 나중에 찾아보도록 하자(미리 해놓을 걸).

위의 방법을 시도했다가 계속 Promise 배열만 인식되어 다른 분들께 징징거렸더니 답안을 제시해 주셨다. 역시 map의 비동기가 원인이었으며... 결과적인 해결책은 다음의 스택오버플로우 코드가 제시해 줬다.
https://stackoverflow.com/questions/70037615/an-array-of-promises-is-returned-when-using-axios-in-map-function/70038223

0개의 댓글