📌 변경 포인트 요약

항목 변경 전 변경 후
루프 방식 for...of + await Promise.all + map
속도 순차 처리 병렬 처리
변환 방식 직접 객체에 키 할당 Object.fromEntries() 사용
에러 핸들링 각 항목 단위로만 전체 try/catch 추가

🔍 성능 효과

이렇게 변경하여 번역이 동시에 진행되기 때문에 초기 렌더링이 훨씬 빨라지고, Lighthouse 성능 점수도 더 높아진 것을 확인할 수 있었습니다.

라이팅하우스.png

image.png

이번 코드를 리팩토링하면서 가장 크게 느낀 점은 비동기 처리 방식과 코드 효율성의 중요성이었습니다. 기존 코드는 for...of 루프 안에서 await를 사용하여 항목을 순차적으로 처리했기 때문에, 리뷰 데이터가 많아질수록 번역 속도가 느려지는 한계가 있었습니다.

후 코드는 Promise.allmap을 활용해 병렬 처리로 전환함으로써 처리 속도를 크게 개선할 수 있었고, Object.fromEntries()를 사용해 변환 로직을 간결하게 만들었습니다. 또한 전체 번역 과정을 감싸는 try/catch를 추가함으로써, 예상치 못한 에러 발생 시에도 전체 번역 프로세스가 안정적으로 동작하도록 보완할 수 있었습니다.

이 경험을 통해, 작은 최적화와 구조 개선이 사용자 경험과 코드 안정성에 큰 영향을 줄 수 있다는 것을 체감할 수 있었습니다. 앞으로도 비동기 처리 로직을 설계할 때는 순차 처리와 병렬 처리의 장단점을 고려하고, 에러 핸들링을 체계적으로 적용하는 것이 중요하다고 느꼈습니다.