React 기술면접 예상질문 미리보기 <8>
브로우저 렌더링 과정, Event bubbling과 capturing 비교, 쓰로틀링/디바운싱 비교, 자바스크립트/타입스크립트 차이에 관한 질문, 뭐라고 답해야 할까?
Jan 13, 2025
리액트(React)는 국내 기업에서 가장 많이 쓰이는 라이브러리 중 하나입니다. 현재 리액트 기술 면접 준비를 하고 계시다면 이번 아티클에 주목해주세요. 많이 물어보시는 리액트 기술 면접 질문을 추렸습니다. 예상 질문부터 수강생의 답변과 멘토님의 피드백까지 한눈에 확인해보세요.
Q (1). 브라우저 렌더링 과정에 대해 아는 만큼 설명해 주실 수 있을까요? 예를 들어 화면에서 DOM이 어떻게 결정되고, CSS는 어떻게 입혀지는지 등을 언급해 주시면 좋습니다.
핵심 키워드 : HTML parsing, CSS parsing, Layout, Painting, Compositing
수강생 답변
브라우저가 HTMl Parsing을 통해 HTML 문서를 받아서 DOM 트리를 만듭니다. 여기서 DOM 트리는 HTML 태그들을 노드로 표현한 구조입니다. 이후 CSS Parsing을 통해 CSS 파일이나 태그를 파싱해서 CSSOM(CSS Object Model) 트리를 만들게 되는데, 이는 CSS의 규칙을 브라우저가 이해할 수 있는 형태로 표현합니다.
DOM 트리와 CSSOM 트리가 합쳐져서 Render Tree가 생성됩니다. 이때 렌더 트리는 화면에 실제로 그려질 노드들만 포함합니다. 렌더 트리가 만들어진 후, Layout(Reflow) 단계에서 각 노드가 화면의 어디에 위치할지 계산하게 됩니다.
Painting 단계에서는 렌더 트리의 노드에 색, 텍스트, 이미지 등을 입히는 작업이 이루어지며, CSS의 스타일이 적용되는 단계입니다. 마지막 Compositing 단계에서는 여러 레이어를 합쳐서 실제 페이지를 완성합니다. 특히 투명도 등 복잡한 효과를 적용할 때 이 단계가 중요합니다.
멘토님 피드백
브라우저 렌더링의 전체 흐름을 순차적으로 잘 설명하고 있습니다. 특히 HTML Parsing, CSS Parsing, Render Tree, Layout, Painting, Compositing과 같은 핵심 키워드들을 중심으로 각 단계가 어떤 역할을 하는지 명확하게 설명했습니다.
☑︎ 체크 포인트
- 핵심 키워드를 중심으로 각 단계가 어떤 역할을 하는지 명확하게 설명한 부분👍
키워드: HTML Parsing, CSS Parsing, Render Tree, Layout, Painting, Compositing
Q (2). Event bubbling과 capturing을 비교하여 설명해 주실 수 있을까요?
핵심 키워드 : 상향식 / 하향식 전파
수강생 답변
Event Bubbling은 이벤트가 발생한 요소부터 시작해서 최상위 요소까지 이벤트가 전파되는 방식입니다. 예를 들어, 버튼을 클릭했다면 그 버튼에서 시작하여 버튼의 부모 요소, 부모의 부모 요소로 이벤트가 위로 올라가면서 전파되며, 대부분의 이벤트는 버블링을 사용하는 것이 디폴트입니다.
한편, Event Capturing(또는 Event Capturing Phase)은 이벤트가 최상위 요소에서 시작해서 발생한 요소까지 내려오는 방식입니다. 이 경우에는 이벤트가 루트 요소(예:
document)부터 시작해서 실제 이벤트가 발생한 요소까지 내려오면서 전파되며, 이 방식은 별도로 설정을 해주어야 사용할 수 있습니다.마지막으로 JavaScript에서는 이벤트 리스너를 추가할 때 세 번째 인자로 이 두 가지 방식을 선택할 수 있습니다.
멘토님 피드백
Event Bubbling과 Event Capturing의 전파 방식에 대한 정의와 구체적인 예시를 함께 잘 서술했습니다. 더불어 JavaScript에서의 실제 구현 방법까지 언급하여 이론과 실제 적용 방법을 균형 있게 잘 설명했습니다.
☑︎ 체크 포인트
- Event Bubbling과 Event Capturing을 실제 균형 방식까지 언급하여 균형있게 답변을 완성한 부분👍
“마지막으로 JavaScript에서는 이벤트 리스너를 추가할 때 세 번째 인자로 이 두 가지 방식을 선택할 수 있습니다.”
Q (3). 쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명해 주세요.
핵심 키워드 : 성능 최적화, 이벤트, 사용자 경험 개선, 안정성
수강생 답변
두 가지 모두 고성능 웹 애플리케이션을 구축할 때 중요한 기술입니다. 이들은 이벤트 핸들링을 최적화하여 불필요한 리소스 소모를 줄이고 성능을 향상하는 데 사용됩니다.
쓰로틀링은 이벤트 핸들러가 일정 시간 간격으로만 호출되도록 제한하는 기술입니다. 예를 들어, 스크롤 이벤트나 윈도우 리사이징 이벤트와 같이 빈번하게 발생하는 이벤트에 쓰로틀링을 적용하면, 이벤트 핸들러가 지정된 시간 간격마다 실행되는 것입니다. 쓰로틀링은 주로 빈번한 이벤트 처리로 인한 성능 저하를 방지하고, 불필요한 계산과 네트워크 요청을 줄여 리소스를 절약하고자 할 때 사용됩니다.
디바운싱은 연속적인 이벤트 호출 중 마지막 이벤트 또는 첫 이벤트만을 처리하는 기술입니다. 예를 들어, 사용자가 입력 필드에 텍스트를 입력하는 동안 검색을 자동으로 수행하는 경우, 디바운싱을 사용하여 사용자가 타이핑을 멈춘 후 일정 시간이 지나면 검색을 실행하는 것입니다. 디바운싱은 주로 불필요한 중간 처리를 방지하고, 쓰로틀링과 유사하게 연속적인 이벤트에서 불필요한 반적인 처리를 줄여 성능을 향상하고자 할 때 사용됩니다.
두 가지의 차이점은 실행 빈도에 있는데, 쓰로틀링은 일정 시간 간격으로 이벤트를 처리하는 반면, 디바운싱은 연속적인 이벤트가 멈춘 후 일정 시간이 지나면 한 번만 이벤트를 처리한다는 점이 있습니다. 이러한 기술들은 사용자 경험을 향상하고, 서버 부하를 줄이는 데 중요한 역할을 합니다.
멘토님 피드백
쓰로틀링과 디바운싱의 개념을 각각의 동작 방식과 특징을 구체적인 예시와 함께 설명했습니다. 특히 두 기술의 차이점을 실행 빈도를 기준으로 비교하여 설명한 부분이 인상적인 답변입니다.
☑︎ 체크 포인트
- 쓰로틀링과 디바운싱의 차이점을 실행 빈도를 기준으로 설명한 부분 👍
“두 가지의 차이점은 실행 빈도에 있는데, 쓰로틀링은 일정 시간 간격으로 이벤트를 처리하는 반면, 디바운싱은 연속적인 이벤트가 멈춘 후 일정 시간이 지나면 한 번만 이벤트를 처리한다는 점이 있습니다.”
Q (4). 자바스크립트와 타입스크립트의 차이, 장/단점에 대해 설명해 주세요.
핵심 키워드 : 브라우저, 타입, 코드 가독성과 유지 보수, 컴파일
수강생 답변
자바스크립트와 타입스크립트의 차이점은 크게 2가지로 정리할 수 있는데 먼저, 타입 시스템의 유무입니다. 자바스크립트에서 변수의 타입은 런타임에 결정되는 반면, 타입스크립트에선 변수의 타입을 선언하고 컴파일 과정에 타입을 검사합니다. 두 번째로 컴파일 과정의 유무 입니다. 자바스크립트는 별도의 컴파일 단계가 없이 직접 브라우저에서 실행되는 반면에, 타입스크립트는 컴파일러를 통해 자바스크립트 코드로 변환되어 실행됩니다.
자바스크립트는 변수의 타입을 런타임에 결정하기 때문에 코드 작성이 유연하며, 러닝 커브가 낮은 편입니다. 또한, 브라우저와 서버 사이드에서 모두 사용할 수 있는 범용 언어라는 장점을 가지고 있습니다. 다만, 런타임에만 오류를 확인할 수 있기 때문에 개발자가 코드를 작성할 때 타입 오류를 놓치기 쉽고 유지보수가 어려운 편이라는 단점이 있습니다.
타입스크립트는 변수의 타입을 미리 선언하고 컴파일러가 이를 검사하므로 개발자는 런타임 이전에 타입 오류를 발견할 수 있고 대규모 프로젝트에서도 유지보수가 용이하며, 코드의 안정성을 높일 수 있다는 장점이 있습니다. 다만, 자바스크립트보단 러닝 커브가 높고 컴파일 단계를 거쳐 자바스크립트 코드로 변환되어야 하므로 추가 작업이 필요하다는 단점이 있습니다.
멘토님 피드백
자바스크립트와 타입스크립트의 가장 핵심적인 차이점인 타입 시스템과 컴파일 과정의 유무를 정확하게 설명했습니다. 특히 타입스크립트가 컴파일 단계에서 제공하는 이점과 이를 통해 얻을 수 있는 코드 안정성, 개발 생산성 향상 등의 실질적인 장점을 체계적으로 설명한 점이 인상적입니다.
☑︎ 체크 포인트
- 자바스크립트와 타입스크립트의 가장 핵심적인 차이점을 잘 설명한 부분👍
"자바스크립트와 타입스크립트의 차이점은 크게 2가지로 정리할 수 있는데 먼저, 타입 시스템의 유무 입니다. 자바스크립트에서 변수의 타입은 런타임에 결정되는 반면, 타입스크립트에선 변수의 타입을 선언하고 컴파일 과정에 타입을 검사합니다. 두번째로 컴파일 과정의 유무 입니다. 자바스크립트는 별도의 컴파일 단계가 없이 직접 브라우저에서 실행되는 반면에, 타입스크립트는 컴파일러를 통해 자바스크립트 코드로 변환되어 실행됩니다.”
리액트(React) 기술 면접 질문, 도움이 되셨나요? 기술면접 대비는 현직 개발자의 시선에서 어떤 답변이 좋을 지를 파악할 수 있어서 취업 리부트 코스 수강생들의 만족도가 가장 높은 세션 중 하나 인데요. 앞으로도 React, Spring의 기술면접 Q&A를 꾸준히 발행할 예정이니, 관심이 있다면 항해99 블로그를 구독해주세요.
🚢 개발자 이직 준비, 어떻게 시작해야 할지 모르겠나요? 한 단계 더 도약하는 험난한 항해에서 든든한 메이트가 되어드리겠습니다.
성장의 한계를 느끼고 있는 주니어 개발자들은 항해 플러스 백엔드/프론트엔드 코스와 함께 하시면 됩니다. 기본기 역량 강화부터, 커리어 점프시켜 줄 TDD / 성능최적화, 대용량 트래픽 처리, 장애 대응 프로젝트와 이직 코칭까지 한번에 할 수 있습니다. 성장을 향한 강한 의지만 있다면 항해 플러스 10주 성장 코스로 이직을 도전해보세요.
가파르게 성장하는 AI 산업에서 AI 기술을 실무에 적용할 수 있는 역량을 키우고 싶다면 항해 플러스 AI 코스에 합류하세요. 딥러닝 이론과 자연어 처리, LLM 원리와 활용 및 구현, 클라우드 환경 배포 및 파인 튜닝 그리고 AI 전문가의 이직 코칭과 포트폴리오 코칭까지 항해 플러스 AI 코스에서 한 번에 할 수 있습니다. 갈수록 중요해지는 AI 활용 능력, 항해 플러스 AI 코스로 8주 만에 떠오르는 AI 인재로 도약하세요.
Share article
Subscribe to our newsletter