프론트엔드 모의면접 질문 정리

하 질문을 받자마자 머리가 새하얘져서 아무말이나 했다..

아 지능 모자라..

 

오늘 받은 질문 정리 

상태 관리를 왜 하고, 평소에 상태 관리를 어떻게 하나요?

요약 ) 리액트에서 상태의 역할, 리렌더링, useState < 전역 상태 < 서버 상태

 

리액트에서 상태 관리는 애플리케이션 UI와 데이터의 동기화를 유지하는데 중요한 역할을 합니다

리액트에서는 기존 상태와 변경된 상태를 버추얼 돔을 통해 비교하고 실제 dom에 반영되어 리렌더링이 발생하게 됩니다

 

저는 가장 기본적으로 useState를 통해 상태관리를 합니다

리렌더링의 조건에는 state가 변경이 되거나, props가 변경이되었을 때 리렌더링이 발생하게 됩니다

 

하지만 useState는 전역적으로 필요한 데이터 전달을 위해서는 props drilling이 발생하여, 실제 props의 출처를 찾기가 어렵고, props를 사용하지 않지만 전달만 하는데도, props가 변경되어 불필요하게 리렌더링이 발생됩니다

 

이를 해결하기 위해 전역 상태 관리를 사용하고, Context 나 Redux, zustand와 같은 전역 상태 관리 라이브러리를 사용합니다

 

추가적으로 네트워크 통신을 통해 가져오는 서버 데이터는 클라이언트와 서버간의 일관된 상태 관리와 로딩, 에러와 같은 추가적인 상태를 사용하기 위해 tanstack query라이브러리를 사용해서 서버 상태를 관리합니다

 

 

동기와 비동기의 차이가 무엇인가요?

동기 작업은 작업이 순차적으로 실행되며, 해당 작업이 종료될 때까지 다른 작업이 시작되지 않는 블로킹이 발생합니다

비동기는 호출부에서 실행결과를 기다리지 않고 즉시 종료되어 논블로킹으로 동작되지만, 작업 순서가 보장되지 않는 특징이 있습니다

 

 

 

비동기 작업이 필요한 이유가 무엇인가요?

요약 ) 네트워크 통신

 

네트워크 통신을 예로 설명할 수 있습니다

만약 모든 통신 코드를 동기식으로 짜면 결과를 받아오기까지 다음 코드가 실행되지 않는 블로킹이 발생하게 됩니다

 

예를 들어 버튼을 눌렀을 때 네트워크 통신이 발생한다면, 동기 코드는 서버로부터 데이터를 받아오는 동안 블로킹이 되어 UI가 멈추거나, 응답없음 상태가 되는데 이러한 점은 사용자 경험이 크게 저하됩니다

 

하지만 비동기 방식으로 코드를 작성한다면, 비동기 작업이 진행되는 동안, 다른 작업을 동시에 수행하여 효율적으로 사용할 수 있고, 로딩 스피너나 진행바를 통해 작업이 진행되고 있음을 알려주고, 작업이 완료되면 UI를 업데이트 하여 사용자에게 즉각적인 피드백을 반영할 수 있습니다

이러한 장점으로 효율적이고, 반응성 있는 개발을 위해서는 비동기 작업이 필수적입니다

 

 

 

데이터 10,000개를 가지고 무한 스크롤 구현 시 가장 중요하게 고려해야 할 점이 무엇이라고 생각하나요?

만개의 데이터를 가지고 무한스크롤을 구현하는 것에서 가장 중요한 것은 데이터 패칭을 최적화하는 것과 사용자 경험 개선이라고 생각합니다

 

데이터 양이 많기 때문에 한번에 가져오는 것이 아니라, 화면에 보이는 뷰의 개수를 기준으로 페이지네이션을 통해 필요한 만큼만 데이터 패칭을 하는 것이 중요합니다

 

하지만 페이지네이션은 페이지가 변경될 때마다 자주 통신을 해야하는데, 이때 로딩 스피너나 진행바를 통해 사용자에게 로딩 상태를 표시하여 사용자 경험을 향상시키는 것이 필요하다 생각합니다

 

 

 

무한스크롤은 어떻게 구현 할 것인가요?

리액트 쿼리의 useInfiniteQuery와 데이터 패칭이 필요한 부분을 확인하기 위한 Intersection Observer 라이브러리를 활용해서, 화면에 보이는 뷰의 개수를 기준으로 페이지네이션을 사용하여 구현할 것입니다.

 

 

 

이벤트 루프가 무엇인가요?

이벤트 루프는 이름처럼 이벤트가 순서대로 돌아가며 처리하는 역할을 합니다

자바스크립는 싱글 스레드 언어로 동시에 여러 작업을 처리할 수 없지만, 이벤트 루프를 통해 비동기 작업을 효율적으로 관리할 수 있습니다

 

자바스크립트에서 위에서부터 코드를 읽어가며 함수를 실행하며, 이때 실행된 순서대로 콜스택에 쌓이게 됩니다 

만약 비동기 함수를 만나게되면, 호출과 동시에 외부 스레드로 이동하여 비동기 동작이 실행되고, 비동기 작업이 완료되면 이후 실행할 콜백함수를 태스크 큐에 완료된 순서대로 쌓이게 됩니다

 

이벤트 루프는 콜스택과 태스크 큐를 모두 바라보다가, 동기 코드가 모두 종료되어 콜스택이 비어있을 때 태스크 큐에 들어온 순서대로 콜백함수를 콜스택으로 전달하게 됩니다

 

이러한 과정이 반복되면서 비동기 작업이 처리가 됩니다