문제
코드를 작성하다가 성능 측정이 있길래 내가 전송한 api전송시간을 봤는대,
90ms가 나왔는대 옆에 높음 이라고 뜬게 매우 신경 쓰였고 고쳐보았다.
이게 당시 코드였는대, 뭔가 이상하다.
[updater2 , putIncart는 axios 를 사용한 전송문임. ]
원인
이 사진을 잘 살펴보면 axios 특성상 promise.pull로 작업 된 듯 한 것으로 보이며, 연산 자원을 이상한 곳에 낭비 하고 있는 듯 보였다.
즉 punIncart 함수를 굳이 비동기 처리로 동시에 값을 할당하느라 시간을 뺏기는듯 보였다.
함수 자체에 async를 빼는건 깜빡햇다,
그러므로, 코드를 일반적인 동기 처리로 작성을 하니, 오히려 성능이 더 좋아졌다.
90->65 결론
비동기-동기 처리를 적절히 사용한다면 이런 문제가 일어나지 않을 것이다.
만약 이보다 큰 정보를 전송하게 된다면, 언젠가 큰 문제를 마주칠 것이고, 이러한 실수를 줄여나가는게 좋다고 생각된다.
만약 next를 사용하지 않는 환경이고, 많은양의 컨텐츠를 전송 받는다면
특정 컨텐츠를 불러오는 순서를 정하는 것도 좋다고 생각된다.
또한 관련 자료를 찾아봤더니 토스팀에서 좋은 예시를 들어주었다.
https://youtu.be/FvRtoViujGg?t=992
복잡한 조건 들이 중첩 된 상태에서 여러 작업을 처리해야 할때 비동기 처리를 사용해, 정확한 기능을 만드는것이다.
위 영상과 같은 자료는 성능 보다는 정확함을 요구하기때문이다.
영상을 보기 싫으면,비동기 처리를 왜 했는지 아래 사진 3장을 잘 살펴 보면된다.
