[면접 합격자료] 야놀자 Software Engineer, Front-end 합격 문항 기출 최종합격

1. React 또는 Vue와 같은 프레임워크를 사용하여 SPA를 개발할 때 고려해야 할 성능 최적화 방법은 무엇인가요

React 또는 Vue와 같은 프레임워크를 사용하여 SPA를 개발할 때 성능 최적화를 위해서 첫째, 코드 분할과 지연 로딩을 적극 활용해야 합니다. React에서는 React. lazy와 Suspense를 이용하여 페이지별 또는 컴포넌트별로 필요한 것만 로드하며, 이를 통해 초기 로딩 시간을 평균 30% 이상 단축할 수 있습니다. 둘째, 불필요한 렌더링을 방지하기 위해 shouldComponentUpdate 또는 React. memo, Vue의 v-once, v-show를 적절히 사용해야 합니다. 예를 들어, 무한 스크롤 페이지에서 불필요한 재렌더링을 50% 이상 줄인 사례가 있습니다. 셋째, 가상 리스트와 무한 스크롤 기법을 도입해 DOM에 과도한 노드가 생성되지 않도록 관리해야 합니다. 실제로, 가상 리스트 도입으로 렌더링 성능이 70% 향상된 사례도 있습니다. 넷째, 이미지 최적화와 적절한 포맷 사용, CDN 배포를 통해 네트워크 로딩 시간을 최소화해야 합니다. 이는 평균 페이지 로드 시간을 2초 이하로 줄이는데 효과적입니다. 다섯째, 상태 관리를 효율적으로 설계하여 변화가 없는 컴포넌트의 …