[TIL] 기술 면접 질문 리스트

공통 질문

1. Virtual DOM이란 무엇이며, 실제 DOM과 어떤 차이가 있나요?

Virtual DOM(가상 DOM)은 React와 같은 일부 프론트엔드 라이브러리 및 프레임워크에서 사용되는 개념입니다. 가상 DOM은 실제 DOM에 대한 가벼운 복제본이며, 이를 통해 성능을 향상시킬 수 있습니다.

<Virtual DOM의 동작 방식>

1. 가상 DOM 구성: 변경 사항을 추적하기 위해 메모리에 가상 DOM이 구성됩니다. 이는 실제 DOM의 가벼운 복제입니다.
2. 가상 DOM 업데이트: 상태가 변경되면 새로운 가상 DOM이 생성됩니다.
3. 차이 비교: 새로운 가상 DOM과 이전 가상 DOM을 비교하여 변경된 부분을 찾습니다.
4. 효율적인 업데이트: 변경된 부분만을 실제 DOM에 반영하여 불필요한 업데이트를 최소화합니다.

<가상 DOM과 실제 DOM의 차이>

1. 연산 비용

• 실제 DOM: DOM 조작은 비용이 많이 드는 작업입니다. DOM이 직접 조작되면 레이아웃이 재계산되고 리플로우가 발생할 수 있습니다.
• 가상 DOM: 메모리 상에서만 동작하므로 실제 DOM 조작보다 연산 비용이 낮습니다.

2. 성능 향상

• 실제 DOM: 작은 변경 사항도 전체 DOM에 반영되어 성능에 영향을 줄 수 있습니다.
• 가상 DOM: 변경된 부분만을 감지하고 업데이트하므로 성능이 향상됩니다.

3. UI 업데이트 최적화

• 실제 DOM: 작은 변경이 있어도 전체 DOM을 업데이트해야 하므로 비효율적입니다.
• 가상 DOM: 변경된 부분만을 업데이트하여 효율적으로 UI를 최적화합니다.

4. 자동화된 업데이트

• 실제 DOM: 수동으로 변경 사항을 추적하고 업데이트해야 합니다.
• 가상 DOM: 프레임워크나 라이브러리에서 자동으로 관리되어 업데이트가 더 간편합니다.

가상 DOM은 프론트엔드 라이브러리와 프레임워크에서 성능 향상과 코드의 간편성을 제공하는 중요한 요소 중 하나입니다. React, Vue.js 등이 이러한 가상 DOM을 활용하여 빠르고 효율적인 UI 업데이트를 가능케 합니다.

2. 바닐라 자바스크립트 대신 React를 쓰는 이유는 무엇인가요?

• 컴포넌트 기반 구조 : React는 컴포넌트라 불리는 작고 독립적인 빌딩 블록을 사용하여 사용자 인터페이스를 구축합니다. 이러한 컴포넌트는 재사용 가능하며 유지보수가 쉽습니다.
• 가상 DOM (Virtual DOM) : React는 가상 DOM 을 사용하여 실제 DOM과 효율적으로 상호 작용 합니다. 이를 통해 변경된 부분만을 업데이트 하므로 성능이 향상됩니다.
• 단방향 데이터 바인딩 : React에서는 단방향 데이터 바인딩이 사용되어 상태의 변경이 화면에 어떻게 반영되는지 예측 가능하고 디버깅이 쉽습니다.
• 커뮤니티와 생태계 : React는 매우 큰 커뮤니티와 다양한 라이브러리, 도구, 컴포넌트를 제공합니다. 이로 인해 개발자들은 문제를 해결하고 기능을 확장하기 위해 풍부한 생태계를 활용할 수 있습니다.
• JSX 문법 : JSX는 JavaScript의 확장 문법으로, XML 과 비슷한 구조를 가지고 있습니다. 이를 통해 보다 직관적이고 가독성 높은 코드를 작성할 수 있습니다.
• React Native : React를 사용하면 React Native를 이용하여 모바일 애플리케이션도 개발할 수 있습니다. 이는 웹 및 모바일 플랫폼 간에 코드를 공유하고 재사용할 수 있도록 도와줍니다.
• 상태 관리 : React는 상태 관리를 위한 라이브러리인 Redux와 함께 사용되는 경우가 많습니다. 이를 통해 복잡한 애플리케이션의 상태를 효과적으로 관리할 수 있습니다.
• 효율적인 업데이트 전략: React는 가상 DOM과 업데이트 전략을 통해 성능 최적화에 중점을 둡니다. 이로써 더 효율적인 렌더링이 가능합니다.

3. Redux와 같은 상태 관리 라이브러리를 사용하는 이유는 무엇인가요?

• 중앙 집중화된 상태 관리: Redux는 애플리케이션의 상태를 하나의 중앙 저장소에서 관리합니다. 이는 전체 애플리케이션에서 일관된 상태를 유지하고 중앙에서 상태를 조절할 수 있게 해줍니다.

• 컴포넌트 간 데이터 공유: 대규모 애플리케이션에서는 여러 컴포넌트 간에 데이터를 효과적으로 공유하고 전달해야 합니다. Redux는 상태를 전역으로 관리하기 때문에 여러 컴포넌트 간에 데이터를 쉽게 전달할 수 있습니다.

• 예측 가능한 상태 변경: Redux는 액션(Action)을 통해 상태 변경을 관리합니다. 이로써 상태 변경이 예측 가능하며, 개발자는 디버깅 및 유지보수를 쉽게 수행할 수 있습니다.

• 시간 여행 디버깅 (Time Travel Debugging): Redux는 미들웨어를 통해 액션을 기록하고, 이를 통해 어떻게 상태가 변경되었는지를 쉽게 확인할 수 있는 시간 여행 디버깅 기능을 제공합니다.

• 상태의 불변성: Redux는 상태의 불변성을 강제하고, 이를 통해 상태 변화를 추적하고 성능을 최적화할 수 있습니다.

• 미들웨어의 확장성: Redux는 미들웨어를 사용하여 액션 처리 과정을 확장할 수 있습니다. 이를 통해 비동기 작업, 로깅, 라우팅 등 다양한 기능을 통합할 수 있습니다.

• 테스트 용이성: Redux는 순수 함수로 상태 변화를 다루기 때문에 테스트하기 용이합니다. 테스트 코드를 작성하고 상태의 예상 동작을 검증하는 데 용이합니다.

• 커뮤니티와 에코시스템: Redux는 큰 개발 커뮤니티와 다양한 에코시스템을 가지고 있습니다. 많은 개발자들이 Redux를 사용하고, 관련된 도구 및 라이브러리가 풍부합니다.

4. JavaScript의 동기식과 비동기식 프로그래밍의 차이점은 무엇인가요?

1. 동기식 (Synchronous) 프로그래밍
   : 동기식 프로그래밍은 코드의 실행이 순차적으로 진행되는 방식입니다.한 작업이 완료되기 전까지 다음 작업은 대기합니다. 코드가 순차적으로 실행되므로 결과를 기다려야 하는 경우, 해당 작업이 완료될 때까지 다음 코드가 실행되지 않습니다.
2. 비동기식 (Asynchronous) 프로그래밍
   : 비동기식 프로그래밍은 작업이 완료될 때까지 기다리지 않고, 다음 코드를 계속해서 실행하는 방식입니다. 주로 콜백 함수, Promise, Async / Await 등을 사용하여 비동기 작업을 다룹니다. 이 방식을 사용하면 여러 작업을 동시에 처리하거나, 네트워크 요청과 같은 I/O 작업을 효과적으로 다룰 수 있습니다.

5. Single Page Application(SPA)과 Multi Page Application(MPA)의 차이점은 무엇인가요?

Single Page Application (SPA):

1. 한 페이지 구조: SPA는 하나의 HTML 페이지를 가지고 있고, 동적으로 콘텐츠를 업데이트하며 사용자와 상호 작용합니다.

2. Ajax와 DOM 조작: 페이지 이동 없이 Ajax를 사용하여 서버로부터 데이터를 비동기적으로 로드하고, DOM 조작을 통해 화면을 업데이트합니다.

3. 빠른 사용자 경험: 초기 로딩 이후에는 페이지 간 전환 없이 새로운 데이터를 로드하므로 빠른 사용자 경험을 제공할 수 있습니다.

4. 라우팅: 주로 클라이언트 측 라우팅을 사용하여 URL의 일부를 변경하면 페이지가 다시 로드되지 않고도 해당 컴포넌트를 업데이트합니다.

Multi Page Application (MPA):

1. 여러 페이지 구조: MPA는 여러 HTML 페이지로 이루어져 있고, 각 페이지는 새로운 HTML을 로드하여 전체 페이지를 갱신합니다.

2. 전통적인 요청-응답: 사용자가 링크를 클릭하면 서버로부터 새로운 HTML을 받아와 전체 페이지를 로드합니다.

3. 페이지 이동에 따른 로딩: 새로운 페이지로 이동할 때마다 전체 페이지를 서버로부터 다시 받아오기 때문에 초기 로딩 시간이 필요하며 사용자 경험이 상대적으로 느릴 수 있습니다.

4. 서버 측 라우팅: 주로 서버 측 라우팅을 사용하며, 사용자가 새로운 페이지로 이동할 때 서버에 새로운 요청을 보냅니다.

언제 어떤 것을 선택해야 할까?

• SPA: 빠른 사용자 경험이 필요하며, 웹 애플리케이션이 복잡한 상태 및 상호 작용을 가지고 있는 경우.

• MPA: 전통적인 웹 사이트 구조를 유지하면서 검색 엔진 최적화(SEO)가 중요한 경우 또는 단순한 웹 페이지를 구축하는 경우.

6. 브라우저에 웹사이트 주소를 입력하고, 그 웹사이트가 브라우저에 나타나기까지 내부적으로 어떤 일이 벌어지나요?

사용자가 웹 브라우저 주소창에 웹사이트 주소를 입력합니다. 브라우저는 입력된 주소의 호스트 명을 가져와서 DNS(도메인 네임 시스템) 서버에 해당 호스트명에 대한 IP 주소를 조회합니다. DNS는 호스트 명을 IP 주소로 변환합니다. 브라우저는 얻어진 IP 주소를 사용하여 TCP/IP 연결을 시도합니다. 브라우저는 HTTP 요청 메시지를 전송합니다. 서버는 요청을 받고 해당하는 리소스를 브라우저에게 응답합니다. 응답은 HTTP 상태코드와 함께 전송됩니다. (ex. 200, 404) 브라우저는 서버로부터 받은 HTML문서를 해석하고, 다른 리소스를 다운로드 합니다. 모든 리소스가 다운로드 되면 브라우저는 html 문서를 화면에 렌더링하고, 사용자가 볼 수 있는 웹페이지가 표시됩니다.