[면접준비] 기술 면접 기초 13일차

프론트엔드 성능최적화를 위한 방법이 있다면 말씀해주시고 그 중 프로젝트에서 활용한 경험이 있다면 설명해주세요.

핵심 키워드 : 압축, 캐싱, 비동기 처리, 지연 로딩, 렌더링 개선

 

프론트엔드 성능최적화를 위한 방법 첫 번째는 이미지 최적화입니다. 웹 페이지의 의도와는 다르게 이미지 용량이 큰 경우 사용할 수 있습니다. 두 번째 방법은 코드를 컴포넌트 기반으로 번들을 분할하여 필요한 시점에만 로드하는 방법이 있습니다. 세 번째는 브라우저 캐싱을 활용하는 방법이 있고, 마지막으로는 쓰로틀링과 디바운싱을 활용해서 서버에 요청하는 횟수를 제한하는 방법이 있습니다. 제가 프로젝트를 진행하면서 사용했던 최적화 방법은 React를 활용하여 컴포넌트 기반으로 코드를 작성하는 것이었습니다. 이 방법을 사용하면, 렌더링이 필요한 페이지만 렌더링을 할 수 있기 때문에 프론트엔드 성능을 높일 수 있습니다. 두 번째 방법은 React-Query를 활용하는 것이었습니다. 리액트 쿼리는 요청한 데이터를 캐시에 저장하기 때문에 저장된 쿼리키로 요청을 하면, 서버에 요청을 보내지 않고 캐시에 저장된 데이터를 불러오기 때문에 서버와의 요청 횟수를 줄일 수 있고, 이에 따라 성능을 높일 수 있습니다.

 

Javascript의 event loop에 대해서 설명해주세요.

핵심 키워드 : 호출 스택, 콜백 큐, 콜백 함수, 비동기 처리

 

자바스크립트의 이벤트 루프(Event Loop)는 비동기 코드의 실행을 관리하고, 단일 쓰레드에서도 비동기 작업을 효율적으로 다룰 수 있게 도와주는 핵심 개념입니다.자바스크립트는 단일 호출 스택을 갖고 있어서 호출 스택은 현재 실행 중인 함수의 정보를 저장하고 관리하는 구조입니다. 함수가 호출되면 해당 함수의 정보가 스택에 쌓이고, 함수가 종료되면 스택에서 제거됩니다.그리고 타이머 함수(setTimeout), HTTP 요청, 이벤트 핸들러 등은 콜백 함수를 메세지 큐에 보냅니다.이벤트 큐는 메세지 큐에 있는 콜백 함수들을 순서대로 호출 스택으로 옮겨 실행하게 되는데, 이때 호출 스택이 비어있을 때만 콜백 함수가 실행 됩니다.마지막으로 이벤트 루프는 호출 스택이 비어있는지 확인하고, 비어있으면 이벤트 큐에서 콜백 함수를 가져와 호출 스택으로 옮겨 실행합니다. 만약 호출 스택이 비어있지 않으면 기다리고 호출 스택이 비어질 때까지 계속 반복합니다.