리엑트(React)는 네이버, 카카오, 쿠팡, 배달의 민족 등 국내 기업에서 가장 많이 쓰이는 프론트엔드 기반 기술입니다. 현재 리액트 기술 면접 준비를 하고 계시다면 이번 아티클에 주목해주세요. 많이 물어보시는 리액트 기술 면접 질문을 추렸습니다. 예상 질문부터 수강생의 답변과 멘토님의 피드백까지 한눈에 확인해보세요.
Q (1). Javascript의 호이스팅에 대해 설명해주세요.
핵심 키워드 : 인터프리터, 선언, 할당
수강생 답변
호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트의 선언문을 해당 범위의 맨 위로 이동시키는 과정을 말합니다. 컴파일 단계에서 코드 실행 전 함수와 변수 선언을 스캔하고, 모든 함수와 변수 선언들은 렉시컬 환경이라 불리는 자바스크립트 데이터 구조 내의 메모리에 추가됩니다.
var 키워드로 선언한 변수의 경우, 선언 전에 참조해도 에러가 발생하지 않고 undefined가 출력됩니다. 하지만 let과 const로 선언한 변수는 선언 전에 참조하려고 하면 ReferenceError가 발생합니다. 한편 함수 선언식으로 정의한 함수는 선언 전에 호출해도 정상적으로 동작합니다. 반면 함수 표현식으로 함수를 변수에 할당하는 방식의 경우에는 var, let, const로 선언한 변수의 호이스팅 규칙을 따르게 됩니다.
멘토님 피드백
호이스팅에 대해서 잘 설명하고 있는 답변입니다. 특히 var, let, const, function 별로 호이스팅이 적용되는 방식이 다른데, 각 키워드의 특징을 잘 설명했습니다.
😄 좋은 부분
- 각 키워드 별(var, let, const, function)로 호이스트 적용 방식을 잘 설명한 부분
“var 키워드로 선언한 변수의 경우, 선언 전에 참조해도 에러가 발생하지 않고 undefined가 출력됩니다.” (var)
“let과 const로 선언한 변수는 선언 전에 참조하려고 하면 ReferenceError가 발생합니다.” (let, const)
“함수 선언식으로 정의한 함수는 선언 전에 호출해도 정상적으로 동작합니다.” (function)
Q (2). 동기와 비동기의 차이에 대해 설명해주시고 비동기 프로그래밍의 필요성에 대해 답변해주세요.
핵심 키워드 : 병렬 처리, 성능 개선
수강생 답변
동기 작업은 차례대로 진행됩니다. 한 작업이 끝나야 다음 작업이 실행됩니다. 동기적 코드는 순서대로 실행되며, 현재 작업이 끝나야 다음 작업에 넘어갑니다. 동기적 코드는 보통 간단하고 직관적이지만, 작업이 느리거나 블록킹 되면 전체 프로그램의 성능에 부정적인 영향을 미칠 수 있습니다.
비동기 작업은 병렬로 처리되며, 작업이 완료되지 않은 상태에서도 다음 작업을 실행할 수 있습니다. 비동기적 코드는 주로 네트워크 요청, 파일 입출력, 타이머와 같이 시간이 오래 걸리는 작업에 사용됩니다.비동기 코드는 프로그램의 성능을 향상시키고, 블록킹을 피할 수 있으며 사용자 경험을 향상시킬 수 있습니다.
비동기 프로그래밍의 필요성은 첫 번째 성능 향상 입니다. 비동기 코드를 사용하면 느린 작업이 다른 작업을 차단하지 않고 병렬로 처리되므로 전체 성능이 향상됩니다. 두 번째 반응성 향상입니다. 비동기 코드를 사용하면 사용자 인터페이스가 블록 되지 않고 계속 반응할 수 있어 사용자 경험을 향상시킵니다. 세 번째 자원 효율성입니다. 비동기 코드를 사용하면 자원(예: CPU, 메모리)을 효율적으로 활용할 수 있어 대용량 데이터를 처리하거나 다수의 클라이언트 요청을 처리하는 서버 애플리케이션에 유용합니다. 마지막 네 번째 네트워크 통신입니다. 웹 애플리케이션에서 서버와의 통신은 주로 비동기 방식으로 이루어지며, 서버 응답을 기다리는 동안 다른 작업을 처리할 수 있어야 합니다.
멘토님 피드백
동기와 비동기의 차이점을 잘 설명하고 있는 답변입니다. 특히 비동기의 필요성을 ‘성능 향상’, ‘반응성 향상’, ‘자원 효율성’, ‘네트워크 통신’ 4가지 키워드를 중심으로 잘 설명했습니다.
😄 좋은 부분
- 비동기의 필요성을 4가지 키워드를 중심으로 잘 설명한 부분
“비동기 코드를 사용하면 느린 작업이 다른 작업을 차단하지 않고 병렬로 처리되므로 전체 성능이 향상됩니다.” (성능 향상)
“비동기 코드를 사용하면 사용자 인터페이스가 블록 되지 않고 계속 반응할 수 있어 사용자 경험을 향상시킵니다.” (반응성 향상)
“비동기 코드를 사용하면 자원(예: CPU, 메모리)을 효율적으로 활용할 수 있어 대용량 데이터를 처리하거나 다수의 클라이언트 요청을 처리하는 서버 애플리케이션에 유용합니다.” (자원 효율성)
“웹 애플리케이션에서 서버와의 통신은 주로 비동기 방식으로 이루어지며, 서버 응답을 기다리는 동안 다른 작업을 처리할 수 있어야 합니다.” (네트워크 통신)
Q (3). 브라우저의 작동 방식에 대해서 설명해주세요
핵심 키워드 : http, local host, TCP/IP, DOM, HTML, Script
수강생 답변
브라우저는 웹페이지를 요청, 불러오고 그리는 일련의 과정을 거치는데, 먼저 사용자가 주소창에 URL을 입력하면 브라우저는 해당 웹 서버에 페이지를 요청합니다. 이후 URL에 포함된 도메인 이름을 IP 주소로 변환하기 위해 DNS 조회가 이뤄집니다. IP 주소를 알게 되면 브라우저는 웹 서버에 HTTP 요청을 보내고, 서버는 이를 받아 처리한 뒤 HTML, CSS, JavaScript 등의 파일을 브라우저에 전송합니다. 브라우저는 받은 HTML, CSS 파일을 렌더링 엔진을 통해 화면에 그리는데, 이 과정에서 HTML을 분석하여 DOM 트리를 생성하고 CSS도 분석하여 CSSOM 트리를 만듭니다. 그리고 DOM과 CSSOM을 결합하여 렌더 트리를 구성한 후, 이 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산하는 레이아웃 작업을 거쳐 최종적으로 화면에 픽셀 단위로 페인팅합니다. 그 외에도 JavaScript 코드가 실행되어 DOM을 조작하거나 사용자 상호작용을 처리하게 됩니다.
멘토님 피드백
전체적으로 브라우저의 작동 방식을 단계별로 잘 설명하고 있습니다. 다만 로컬호스트 파일에 대한 부분이 빠져있네요. DNS 조회 단계에서 로컬호스트 파일에 대한 설명을 추가한다면 더 좋은 답변이 완성될 것 같습니다.
😄 좋은 부분
- 브라우저 작동 방식을 단계별로 잘 설명하고 있는 부분
URL 입력 및 요청 → DNS 조회 → HTTP 요청 → 서버 처리 → 렌더링 엔진 → DOM 생성 → CSSOM 생성 → 렌더 트리 생성 → 레이아웃 → 페인트 → JavaScript 실행
🤔 아쉬운 부분
- DNS 조회 단계에 ‘로컬호스트 파일’에 대한 설명이 없는 부분
- DNS 조회 설명을 보완하기 위해 DNS 서버를 통한 조회에 앞서, 브라우저가 로컬시스템의 호스트 파일을 먼저 검사하는 과정을 추가할 것 " URL에는 도메인 이름이 포함되어 있는데, 이를 IP 주소로 변환하기 위해 먼저 로컬 시스템의 호스트 파일을 검사합니다. 호스트 파일은 운영체제에서 도메인 이름과 IP 주소의 정적 매핑 정보를 저장하는 파일입니다. 호스트 파일에 해당 도메인 이름과 IP 주소의 매핑 정보가 있다면 그 정보를 사용합니다. 만약 매핑 정보가 없다면 DNS(Domain Name System) 서버를 통해 실제 IP 주소 조회가 이루어집니다.” (예시)
Q (4). GET, POST 방식의 차이점에 대해서 설명해주세요.
핵심 키워드 : 데이터 전송, URL, 보안
수강생 답변
GET 방식은 요청을 서버로 전송할 때, 데이터를 URL에 포함해 전송합니다. 일반적으로 URL 길이에 제한이 있으므로 많은 데이터를 전송하기에는 적합하지 않습니다. 데이터가 URL에 노출되기 때문에 민감한 정보를 전송하는 데에는 적합하지 않습니다. POST 방식은 요청 본문에 데이터를 포함해 전송합니다. 따라서 URL에 데이터가 노출되지 않습니다. POST는 요청 본문을 사용하여 데이터를 전송하므로, 대량의 데이터를 안전하게 전송할 수 있습니다.데이터가 URL에 노출되지 않아 GET보다는 보안이 더 좋다고 할 수 있습니다.
멘토님 피드백
각 메서드의 동작방식에 대해서 잘 설명하고 있고, 보안적인 관점에서 언제 어떤 메서드를 사용하는 게 적절한지에 대해서 잘 설명하고 있는 좋은 답변입니다.
😄 좋은 부분
- 보안적인 관점에서 어떤 메서드를 사용하는 게 적절한지 설명하는 부분
“데이터가 URL에 노출되기 때문에 민감한 정보를 전송하는 데에는 적합하지 않습니다.” (GET 방식)
“POST 방식은 요청 본문에 데이터를 포함해 전송합니다. 따라서 URL에 데이터가 노출되지 않습니다. POST는 요청 본문을 사용하여 데이터를 전송하므로, 대량의 데이터를 안전하게 전송할 수 있습니다.데이터가 URL에 노출되지 않아 GET보다는 보안이 더 좋다고 할 수 있습니다.” (POST 방식)
리엑트 (React) 기술 면접 질문, 도움이 되셨나요? 기술면접 대비는 현직 개발자의 시선에서 어떤 답변이 좋을 지를 파악할 수 있어서 취업 리부트 코스 수강생들의 만족도가 가장 높은 세션 중 하나 인데요. 앞으로도 React, Spring의 기술면접 Q&A를 꾸준히 발행할 예정이니, 관심이 있다면 항해99 블로그를 구독해주세요.
🚢 항해99가 여러분의 이력서 준비부터 실전 면접까지 함께하겠습니다. 취업으로 향하는 거친 항해에서 든든한 메이트가 되어드리겠습니다.
수료생이라면 취업 때까지 이력서와 면접코칭 횟수, 기간 무제한 제공. 반드시 취업까지 책임질 수 있다는 항해의 자신감입니다. 높은 수준의 개인 프로젝트 경험이 없는 개발 유관 전공자, 전반적인 학습이 부족한 부트캠프 수료생이라면 개발자 취업 리부트 코스에 합류하세요. 항해가 쌓아온 모든 노하우를 담았습니다. 갈수록 높아지는 개발자 취업의 벽, 개발자 취업 리부트 코스로 10주 만에 취업의 문을 열어 보세요.
CREDIT
글 | 송민영 팀스파르타 에디터
Share article
Subscribe to our newsletter