React 기술면접 예상질문 미리보기 <6>
http/https 차이, Vanilla JS, 상태 불변성 그리고 라이프사이클 질문들. 뭐라고 답해야 할까?
Jul 23, 2024
리엑트(React)는 네이버, 카카오, 쿠팡, 배달의 민족 등 국내 기업에서 가장 많이 쓰이는 프론트엔드 기반 기술입니다. 현재 리액트 기술 면접 준비를 하고 계시다면 이번 아티클에 주목해주세요. 많이 물어보시는 리액트 기술 면접 질문을 추렸습니다. 예상 질문부터 수강생의 답변과 멘토님의 피드백까지 한눈에 확인해보세요.
Q (1). http와 https의 차이점에 대해 설명해주세요
핵심 키워드 : SSL, TCP/UDP, 인증서
수강생 답변
HTTP는 Hypertext Transfer Protocol의 줄임말이며 웹에서 데이터를 주고받기 위한 프로토콜입니다. HTTPS는 Hypertext Transfer Protocol Secure의 줄임말이며, HTTP의 보안 버전으로, 데이터를 암호화하여 안전한 통신을 제공합니다. SSL/TLS 프로토콜을 사용하여 데이터를 암호화하므로, 중간자 공격에 대비하고 안전한 데이터 전송을 보장합니다.
보안 인증서를 사용하여 웹사이트의 신원을 확인하고, 통신의 기밀성과 무결성을 유지합니다. HTTP의 포트 번호는 80, HTTPS는 443입니다. HTTP의 URL은 http://로, HTTPS의 URL은 https://로 시작합니다. HTTP는 주로 민감한 정보를 다루지 않는 웹 페이지에서 사용되고, HTTPS는 민감한 정보를 주고받아야 하는 웹사이트에서 권장되며, 로그인 페이지 등에서 사용됩니다.
멘토님 피드백
http와 https의 대한 정의와 차이점을 잘 이야기 한 답변입니다. 특히 암호화 통식 방식이나 인증서를 통한 신원을 확인한다는 내용이 들어간 부분이 좋습니다.
😄 좋은 부분
1) 암호화 통신 방식에 대한 내용이 들어간 부분
- “SSL/TLS 프로토콜을 사용하여 데이터를 암호화하므로, 중간자 공격에 대비하고 안전한 데이터 전송을 보장합니다.”
2) 인증서를 통한 신원을 확인한다는 내용이 들어간 부분
- 보안 인증서를 사용하여 웹사이트의 신원을 확인하고, 통신의 기밀성과 무결성을 유지합니다.
Q (2). VanillaJS와 비교하여 리액트를 사용하는 이유에 대해 설명해주실 수 있을까요?
핵심 키워드 : 상태 관리, JSX,
수강생 답변
React를 사용하는 이유는 컴포넌트 기반 아키텍처, 단방향 데이터 흐름, JSX 등을 통해 더 효과적이고 편리한 웹 애플리케이션 개발이 가능하기 때문입니다. VanillaJS는 DOM 조작이 복잡하고 유지보수가 어려웠으나 React는 컴포넌트 기반 아키텍처를 제공하여 UI를 독립적인 작은 부분으로 나누어 관리하게 합니다. 이로써 코드의 재사용성과 유지보수성이 향상됩니다.
VanillaJS는 양방향 데이터 바인딩을 구현하려면 많은 코드가 필요하지만 React는 단방향 데이터 흐름을 통해 데이터의 흐름이 단순하고 예측 가능하며, 컴포넌트 간의 의사소통이 쉬워집니다. VanillaJS는 HTML과 JavaScript를 조합하는 것이 번거로웠으나 React는 JSX를 도입하여 JavaScript 코드 안에서 XML 형태의 마크업을 사용할 수 있도록 하여 가독성을 높이고 컴포넌트를 쉽게 작성할 수 있습니다.
멘토님 피드백
이 질문에 대한 대답에서 가장 중요하게 다뤄야 할 점은 두 가지입니다. 첫째, "상태 관리" 기능을 한다는 점입니다. 둘째, 상태(state)를 통해 Virtual DOM을 이용해 이전 DOM과 최신 업데이트된 DOM을 비교하여 리렌더링 여부를 판단하는 과정을 명확히 설명해야 합니다. 이 부분에서 조금 아쉬운 답변이지만, 비교적 대답을 잘 했습니다.
🤔 아쉬운 부분
1) 상태 관리 내용 추가
- "React는 효율적인 상태 관리 시스템을 제공합니다. 컴포넌트 내부에서 상태를 관리하고 업데이트할 수 있어, 복잡한 UI 로직을 간단하게 처리할 수 있습니다.”
2) Virtual DOM 내용 추가
- "React는 Virtual DOM을 사용합니다. 이는 실제 DOM의 가벼운 복사본으로, 메모리에 존재합니다. React는 상태 변화가 있을 때 먼저 Virtual DOM을 업데이트합니다.”
- "React는 Virtual DOM과 실제 DOM을 비교하여 실제로 변경이 필요한 부분만 업데이트합니다. 이 과정을 '재조정(Reconciliation)'이라고 하며, 이를 통해 불필요한 DOM 조작을 최소화하여 성능을 크게 향상시킵니다.”
3) 리렌더링 내용 추가
- "React는 Virtual DOM과 실제 DOM을 비교하여 실제로 변경이 필요한 부분만 업데이트합니다. 이 과정을 '재조정(Reconciliation)'이라고 하며, 이를 통해 불필요한 DOM 조작을 최소화하여 성능을 크게 향상시킵니다."
Q (3). 상태의 불변성이 중요한 이유가 무엇인가요?
핵심 키워드 : 깊은/얕은 비교, 변경과 렌더링
수강생 답변
먼저 첫 번째 이유는 불변성을 유지하면 상태가 어떻게 변경될지 예측하기가 쉽기 때문입니다. 이는 디버깅을 용이하게 하며, 코드의 안정성을 높입니다.
두 번째 이유는 불변성을 지키면서 상태를 업데이트하는 패턴을 사용하면 코드의 명확성이 높아지기 때문입니다.
세 번째 이유는 리액트와 같은 라이브러리는 상태나 Props의 변경을 감지하기 위해 얕은 비교를 수행하는데, 불변성을 유지하면 이러한 비교가 효율적으로 이루어지며, 불필요한 렌더링을 방지하여 성능을 최적화할 수 있기 때문입니다.
결론적으로 상태의 불변성을 유지하는 것은 프론트엔드 개발에서 안정성, 성능, 코드의 명확성 등 다양한 이점을 제공하기 때문에, 상태를 업데이트할 때는 항상 불변성을 유지하는 방식을 사용하는 것이 좋습니다.
멘토님 피드백
상태의 불변성을 왜 지켜야 하고, 그것을 지킴으로써 무엇을 얻을 수 있는지 이 점을 잘 말하고 있는 답변입니다.
😄 좋은 부분
1) 상태 불변성의 필요성에 대해 설명한 부분
- “첫 번째 이유는 불변성을 유지하면 상태가 어떻게 변경될지 예측하기가 쉽기 때문입니다.”
- “두 번째 이유는 불변성을 지키면서 상태를 업데이트하는 패턴을 사용하면 코드의 명확성이 높아지기 때문입니다.”
- “세 번째 이유는 리액트와 같은 라이브러리는 상태나 Props의 변경을 감지하기 위해 얕은 비교를 수행하는데, 불변성을 유지하면 이러한 비교가 효율적으로 이루어지며, 불필요한 렌더링을 방지하여 성능을 최적화할 수 있기 때문입니다.”
2) 상태 불면성의 이점을 설명한 부분
- “디버깅을 용이하게 하며, 코드의 안정성을 높입니다.”
- “결론적으로 상태의 불변성을 유지하는 것은 프론트엔드 개발에서 안정성, 성능, 코드의 명확성 등 다양한 이점을 제공하기 때문에, 상태를 업데이트할 때는 항상 불변성을 유지하는 방식을 사용하는 것이 좋습니다.”
Q (4). 라이프사이클이 의미하는 바에 대해서 설명해주세요.
핵심 키워드 : 컴포넌트 생명 주기, 메모리 할당
수강생 답변
라이프사이클은 일반적으로 어떤 객체나 시스템이 생성되어 사용되고, 종료되는 전체 과정을 의미합니다. 즉, 특정 객체나 시스템이 처음부터 끝까지 겪는 여러 단계나 상태를 나타낸다고 볼 수 있습니다. 컴포넌트는 일반적으로 생성 → 마운트 → 업데이트 → 언마운트의 라이프사이클을 거칩니다.
먼저 생성 단계는 컴포넌트가 메모리에 생성되는 단계입니다. 이때 초기 상태와 props가 설정됩니다. 두 번째, 마운트 단계는 컴포넌트가 화면에 처음으로 그려지는 단계를 말합니다. 세 번째인 업데이트는 컴포넌트의 상태나 속성이 변경되어 화면에 그려지는 단계를 말합니다. 마지막 언마운트는 컴포넌트가 화면에서 사라지는 단계를 말합니다.
이러한 라이프사이클은 컴포넌트가 어떻게 동작하고, 언제 어떤 작업을 수행해야 하는지를 이해하는 데 중요합니다. 예를 들어, 외부 데이터를 가져오는 작업은 컴포넌트가 화면에 처음 그려질 때(마운트) 수행하는 것이 적절하며, 불필요한 리소스를 정리하는 작업은 컴포넌트가 화면에서 사라질 때(언마운트) 수행하는 것이 적절합니다.
이러한 라이프사이클의 이해는 컴포넌트 동작을 최적화하고, 예상치 못한 버그나 문제를 방지하는 데 중요한 역할을 합니다.
멘토님 피드백
라이프사이클에 대한 정의와 리액트 컴포넌트의 생명주기를 단계별로 잘 설명하고 있고, 이것들을 잘 이해함으로써 얻을 수는 이점을 잘 나타낸 좋은 답변입니다.
😄 좋은 부분
1) 라이플사이클의 개념과 React 컴포넌트의 구체적인 생명주기를 설명한 부분
- “라이프사이클은 일반적으로 어떤 객체나 시스템이 생성되어 사용되고, 종료되는 전체 과정을 의미합니다. 즉, 특정 객체나 시스템이 처음부터 끝까지 겪는 여러 단계나 상태를 나타낸다고 볼 수 있습니다. 컴포넌트는 일반적으로 생성 → 마운트 → 업데이트 → 언마운트의 라이프사이클을 거칩니다.”
2) 라이프사이클 이해의 이점을 잘 설명한 부분
- “이러한 라이프사이클의 이해는 컴포넌트 동작을 최적화하고, 예상치 못한 버그나 문제를 방지하는 데 중요한 역할을 합니다.”
리엑트 (React) 기술 면접 질문, 도움이 되셨나요? 기술면접 대비는 현직 개발자의 시선에서 어떤 답변이 좋을 지를 파악할 수 있어서 취업 리부트 코스 수강생들의 만족도가 가장 높은 세션 중 하나 인데요. 앞으로도 React, Spring의 기술면접 Q&A를 꾸준히 발행할 예정이니, 관심이 있다면 항해99 블로그를 구독해주세요.
🚢 개발자 취업 준비 어떻게 시작해야 할지 모르겠나요? 취업으로 향하는 거친 항해에서 든든한 메이트가 되어 드리겠습니다.
취업 실패 시 교육비 0원. 반드시 취업까지 책임질 수 있다는 항해의 자신감입니다.
높은 수준의 개인 프로젝트 경험이 없는 개발 유관 전공자, 전반적인 학습이 부족한 부트캠프 수료생이라면 개발자 취업 리부트 코스에 합류하세요. 자료구조 공부, 프로젝트, 코테준비, 이력서와 면접 대비까지 취업 리부트 코스에서 한 번에 할 수 있습니다. 갈수록 높아지는 개발자 취업의 벽, 개발자 취업 리부트 코스로 11주 만에 취업의 문을 열어 보세요
CREDIT
글 | 송민영 팀스파르타 에디터
Share article
Subscribe to our newsletter