항목 | 변경 전 | 변경 후 |
---|---|---|
루프 방식 | for...of + await |
Promise.all + map |
속도 | 순차 처리 | 병렬 처리 |
변환 방식 | 직접 객체에 키 할당 | Object.fromEntries() 사용 |
에러 핸들링 | 각 항목 단위로만 | 전체 try/catch 추가 |
이렇게 변경하여 번역이 동시에 진행되기 때문에 초기 렌더링이 훨씬 빨라지고, Lighthouse 성능 점수도 더 높아진 것을 확인할 수 있었습니다.
이번 코드를 리팩토링하면서 가장 크게 느낀 점은 비동기 처리 방식과 코드 효율성의 중요성이었습니다. 기존 코드는 for...of
루프 안에서 await
를 사용하여 항목을 순차적으로 처리했기 때문에, 리뷰 데이터가 많아질수록 번역 속도가 느려지는 한계가 있었습니다.
후 코드는 Promise.all
과 map
을 활용해 병렬 처리로 전환함으로써 처리 속도를 크게 개선할 수 있었고, Object.fromEntries()
를 사용해 변환 로직을 간결하게 만들었습니다. 또한 전체 번역 과정을 감싸는 try/catch
를 추가함으로써, 예상치 못한 에러 발생 시에도 전체 번역 프로세스가 안정적으로 동작하도록 보완할 수 있었습니다.
이 경험을 통해, 작은 최적화와 구조 개선이 사용자 경험과 코드 안정성에 큰 영향을 줄 수 있다는 것을 체감할 수 있었습니다. 앞으로도 비동기 처리 로직을 설계할 때는 순차 처리와 병렬 처리의 장단점을 고려하고, 에러 핸들링을 체계적으로 적용하는 것이 중요하다고 느꼈습니다.