리엑트(React)는 네이버, 카카오, 쿠팡, 배달의 민족 등 국내 기업에서 가장 많이 쓰이는 프론트엔드 기반 기술입니다. 현재 리액트 기술 면접 준비를 하고 계시다면 이번 아티클에 주목해주세요. 많이 물어보시는 리액트 기술 면접 질문을 추렸습니다. 예상 질문부터 수강생의 답변과 멘토님의 피드백까지 한눈에 확인해보세요.
Q (1). GET, POST의 개념과 함께 데이터 흐름에 대해서 설명해주세요.
핵심 키워드 : 쿼리, 데이터, server, client
수강생 답변
GET과 POST는 웹 서버와 클라이언트 간 데이터를 교환하는 HTTP 메서드입니다. GET은 주로 서버에서 정보를 조회하기 위해 사용하며, 요청하는 데이터는 URL의 쿼리 문자열에 포함되어 전송됩니다. 이로 인해 URL에 데이터가 노출되며, 크기 제한이 있습니다. POST는 데이터를 서버에 제출할 때 사용되며, 데이터는 요청 본문에 포함됩니다. 따라서 데이터의 크기 제한이 없으며, 민감한 정보 전송에 적합합니다. GET은 데이터 조회에, POST는 데이터 제출 및 변경에 주로 사용됩니다. 데이터 흐름에서 GET은 서버에서 클라이언트로, POST는 클라이언트에서 서버로 주로 흘러갑니다.
멘토님 피드백
GET과 POST의 개념과 특징을 명확하게 설명하고 있고, 데이터의 흐름도 잘 설명하고 있는 좋은 답변입니다.
😄 좋은 부분
- GET과 POST의 개념과 특징을 명확히 설명 ”GET은 주로 서버에서 정보를 조회하기 위해 사용하며, 요청하는 데이터는 URL의 쿼리 문자열에 포함되어 전송됩니다. 이로 인해 URL에 데이터가 노출되며, 크기 제한이 있습니다.” (GET) ”POST는 데이터를 서버에 제출할 때 사용되며, 데이터는 요청 본문에 포함됩니다. 따라서 데이터의 크기 제한이 없으며, 민감한 정보 전송에 적합합니다.” (POST)
- GET과 POST의 데이터 흐름을 설명 ”데이터 흐름에서 GET은 서버에서 클라이언트로, POST는 클라이언트에서 서버로 주로 흘러갑니다.”
Q (2). 쿠키, 세션, 웹스토리지의 차이에 대해 설명해주세요.
핵심 키워드 : 저장 위치, 보안 강도, 유효 기간, 데이터 규모
수강생 답변
쿠키, 세션, 그리고 웹 스토리지는 모두 클라이언트와 서버 사이에서 정보를 저장하고 교환하는 방법들이지만, 각각 목적과 작동 방식에 차이가 있습니다. 쿠키는 클라이언트 측에 저장되는 작은 데이터 조각으로, 사용자의 상태 정보나 ID를 저장하여 웹 서버가 사용자를 식별할 수 있게 해줍니다. 그러나, 쿠키는 보안에 취약하며, 저장할 수 있는 데이터 크기에 제한이 있습니다.
세션은 서버 측에서 관리되며, 클라이언트의 상태 정보를 서버에 저장합니다. 클라이언트는 세션 ID만 쿠키로 저장하고, 이를 통해 서버는 클라이언트를 식별합니다. 이 방식은 쿠키보다 보안에 강하고, 데이터 제한이 적습니다.
웹 스토리지는 HTML5에 도입된 기술로, 로컬 스토리지와 세션 스토리지로 나뉩니다. 로컬 스토리지는 데이터를 클라이언트의 브라우저에 영구적으로 저장하며, 세션 스토리지는 브라우저 세션이 종료되면 데이터가 삭제되는 특성을 가집니다. 웹 스토리지는 상당히 큰 데이터를 안전하게 저장할 수 있으며, 서버로 데이터를 자동으로 보내지 않아 네트워크 효율이 높습니다.
멘토님 피드백
각 저장소의 장단점을 잘 이야기했고, 각 저장소별로 보안적인 부분에서 어떤 부분이 취약한지도 잘 설명하고 있는 답변입니다.
😄 좋은 부분
- 각 저장소의 장단점과 보안적 취약점을 이야기한 부분
“쿠키는 클라이언트 측에 저장되는 작은 데이터 조각으로, 사용자의 상태 정보나 ID를 저장하여 웹 서버가 사용자를 식별할 수 있게 해줍니다. 그러나, 쿠키는 보안에 취약하며, 저장할 수 있는 데이터 크기에 제한이 있습니다.” (쿠키)
”세션은 서버 측에서 관리되며, 클라이언트의 상태 정보를 서버에 저장합니다. 클라이언트는 세션 ID만 쿠키로 저장하고, 이를 통해 서버는 클라이언트를 식별합니다. 이 방식은 쿠키보다 보안에 강하고, 데이터 제한이 적습니다.” (세션)
”웹 스토리지는 HTML5에 도입된 기술로, 로컬 스토리지와 세션 스토리지로 나뉩니다. 로컬 스토리지는 데이터를 클라이언트의 브라우저에 영구적으로 저장하며, 세션 스토리지는 브라우저 세션이 종료되면 데이터가 삭제되는 특성을 가집니다. 웹 스토리지는 상당히 큰 데이터를 안전하게 저장할 수 있으며, 서버로 데이터를 자동으로 보내지 않아 네트워크 효율이 높습니다.” (웹 스토리지)
Q (3). 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념과 장/단점을 설명해주세요.
핵심 키워드 : 트레이드 오프, 렌더링, 비동기, 유저 사용성
수강생 답변
클라이언트 사이드 렌더링(CSR)은 웹 애플리케이션에서 HTML 및 페이지 컨텐츠를 브라우저에서 렌더링하는 방식입니다. 초기 로딩 시에 빈 페이지 또는 미리 정의된 레이아웃만을 서버에서 받고, 페이지 데이터는 JavaScript를 사용하여 비동기적으로 서버로부터 가져와 동적으로 렌더링됩니다. 웹 페이지를 브라우저에서 렌더링하며 초기 로딩이 빠르지만 SEO, 초기 로딩 속도, 보안 등의 단점이 있습니다.
서버 사이드 렌더링(SSR)은 웹 서버에서 페이지의 HTML 및 컨텐츠를 동적으로 생성하여 클라이언트에 제공하는 방식입니다. 서버에서 초기 렌더링을 수행하고, 클라이언트는 렌더링된 페이지를 받아와 렌더링된 상태에서 시작합니다. SEO, 초기 로딩 속도, 보안 측면에서 우위에 있지만 상호작용이 덜 부드럽고 서버 부하가 발생할 수 있습니다.
멘토님 피드백
각각의 렌더링 방식이 가지는 장점과 단점을 잘 말하고 있는 답변입니다. 다만, 언제 어떤 방식을 도입해서 적용하면 좋을지에 대한 부분을 추가하면 더 훌륭한 답변이 될 것 같습니다.
😄 좋은 부분
- CSR, SSR의 장점과 단점을 설명한 부분 ”웹 페이지를 브라우저에서 렌더링하며 초기 로딩이 빠르지만 SEO, 초기 로딩 속도, 보안 등의 단점이 있습니다.” (CSR) ”SEO, 초기 로딩 속도, 보안 측면에서 우위에 있지만 상호작용이 덜 부드럽고 서버 부하가 발생할 수 있습니다.” (SSR)
🤔 아쉬운 부분
- CSR, SSR 방식을 언제 어떻게 적용할지 설명하지 않은 부분 (CSR이 적합한 경우) → 실시간 상호작용이 많은 웹 어플리케이션인 경우 → 빠른 초기 로딩 속도가 중요한 경우 → SEO가 크게 중요하지 않은 웹 애플리케이션인 경우 (SSR이 적합한 경우) → SEO가 중요한 웹사이트일 경우 → 초기 로딩 속도와 성능이 중요한 경우 → 보안이 중요한 웹 애플리케이션인 경우
Q (4). TCP/UDP에 대해서 설명해주세요.
핵심 키워드 : 3-way handshake, 4-way handshake, 신뢰성, 데이터 손실, 속도
수강생 답변
TCP는 신뢰성 있는 데이터를 목표로 합니다. 연결을 시작하기 전에 '3-way handshake'를 통해 두 시스템이 서로에 대해 알아보고, 데이터 전송이 끝나면 '4-way handshake'로 연결을 종료합니다. 데이터가 손실되면 다시 전송하거나 재조립을 보장합니다. 물론, 이러한 신뢰성 때문에 UDP보다는 상대적으로 느릴 수 있습니다.
UDP는 신뢰성은 떨어지지만 빠른 데이터 전송이 목표입니다. handshake 과정이 없어서 연결 설정이 필요 없고, 이로 인해 더 빠르게 데이터를 보낼 수 있습니다. 스트리밍 같은 실시간 서비스에서 많이 사용되는데, 빠른 전송이 중요하고, 데이터의 약간의 손실이 큰 문제가 아니라면 UDP가 더 적합합니다.
멘토님 피드백
TCP/UDP에 대해서 잘 설명하고 있고, 필수적으로 나와야하는 단어들, 4 way handshake, 신뢰성 등이 나와서 매우 좋았고, 어떤 서비스에 어떤 프로토콜을 사용하면 좋은지까지 이야기하고 있어서 전반적으로 훌륭한 답변입니다.
😄 좋은 부분
- TCP, UDP 에 대해서 잘 설명한 부분 ”TCP는 신뢰성 있는 데이터를 목표로 합니다. 연결을 시작하기 전에 '3-way handshake'를 통해 두 시스템이 서로에 대해 알아보고, 데이터 전송이 끝나면 '4-way handshake'로 연결을 종료합니다. 데이터가 손실되면 다시 전송하거나 재조립을 보장합니다. 물론, 이러한 신뢰성 때문에 UDP보다는 상대적으로 느릴 수 있습니다” (TCP) ”UDP는 신뢰성은 떨어지지만 빠른 데이터 전송이 목표입니다. handshake 과정이 없어서 연결 설정이 필요 없고, 이로 인해 더 빠르게 데이터를 보낼 수 있습니다.” (UDP)
- 어떤 프로토콜을 사용하면 좋을지 설명한 부분 ”스트리밍 같은 실시간 서비스에서 많이 사용되는데, 빠른 전송이 중요하고, 데이터의 약간의 손실이 큰 문제가 아니라면 UDP가 더 적합합니다.”
- 적절한 키워드로 설명한 부분
- 4 way handshake
- 신뢰성
리엑트 (React) 기술 면접 질문, 도움이 되셨나요? 기술면접 대비는 현직 개발자의 시선에서 어떤 답변이 좋을 지를 파악할 수 있어서 취업 리부트 코스 수강생들의 만족도가 가장 높은 세션 중 하나 인데요. 앞으로도 React, Spring의 기술면접 Q&A를 꾸준히 발행할 예정이니, 관심이 있다면 항해99 블로그를 구독해주세요.
🚢 개발자 취업 준비 어떻게 시작해야 할지 모르겠나요? 취업으로 향하는 거친 항해에서 든든한 메이트가 되어 드리겠습니다.
취업 실패 시 교육비 0원. 반드시 취업까지 책임질 수 있다는 항해의 자신감입니다.
높은 수준의 개인 프로젝트 경험이 없는 개발 유관 전공자, 전반적인 학습이 부족한 부트캠프 수료생이라면 개발자 취업 리부트 코스에 합류하세요. 자료구조 공부, 프로젝트, 코테준비, 이력서와 면접 대비까지 취업 리부트 코스에서 한 번에 할 수 있습니다. 갈수록 높아지는 개발자 취업의 벽, 개발자 취업 리부트 코스로 11주 만에 취업의 문을 열어 보세요
CREDIT
글 | 송민영 팀스파르타 에디터
Share article
Subscribe to our newsletter