y.developer
[TIL] Day 78 기술 면접 준비 part 01 본문
2024.01.24 수
1. Virtual DOM이란 무엇이며, 실제 DOM과 어떤 차이가 있나요?
DOM(Document Object Model)은 웹 페이지의 구성 요소들을 트리 구조로 표현한 것입니다. 즉, HTML 문서의 각 요소들을 노드로 나타내는 방식입니다.
가상 DOM은 실제 DOM의 완벽한 복사본 형태로, 메모리 상에 존재하는 자바스크립트 객체로 이루어져 있습니다. 핵심 장점은 효율적이라는 점입니다. 실제 DOM을 변경하는 작업은 성능상 무겁고 시간이 많이 소요될 수 있는 반면, 가상 DOM에서는 자바스크립트 객체를 변경하는 것이기 때문에 훨씬 더 가볍고 빠릅니다.
더불어, 배치 업데이트(Batch Update)의 개념이 있습니다. 예를 들어, 화면에 있는 여러 개의 엘리먼트가 변경되어야 할 때, 실제 DOM을 사용하면 각 변화마다 화면을 새로 고침해야 하지만, 가상 DOM에서는 이 모든 변경을 한 번에 모아서 한 번만 화면을 갱신합니다. 이렇게 하면 성능이 크게 향상됩니다.
이런 이해는 웹 개발에서 매우 중요한 개념이며, 특히 리액트와 같은 현대적인 프론트엔드 라이브러리나 프레임워크를 사용할 때 필수적인 지식이라고 볼 수 있습니다.
2. 바닐라 자바스크립트 대신 React를 쓰는 이유는 무엇인가요?
컴포넌트 기반 아키텍처를 사용하여 코드의 확장성, 재사용성, 관심사 분리 등의 개념을 활용할 수 있고 동적인 코드를 작성할 수 있습니다. 이는 개발과 유지보수를용이하게 합니다.
그리고 가상 돔을 사용하제 최소한의 변경 사항만을 적용함으로써 성능을 최적화합니다. 빠른 렌더링과 효율적인 작업 수행이 가능해집니다.
단방향 데이터 바인딩을 통해 데이터 흐름이 단순하고 예측 가능하게 됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고 상태가 변화하면 UI가 자동으로 리렌더링 됩니다. 또한 JSX 문법을 도입하여 JavaScript 코드에서 HTML과 유사한 구조를 사용할 수 있습니다. 가독성을 향상시키고 컴포넌트의 구조를 더 명확하게 표현할 수 있습니다.
매우 큰 개발자 커뮤니티와 풍부한 생태계를 지니고 있습니다. 문제를 해결할 수 있는 수많은 리소스와 라이브러리를 활용할 수 있습니다. 웹 개발뿐만 아니라 React Native를 통해 네이티브 앱 개발에도 사용됩니다. 이는 코드를 재사용하여 iOS 및 Android 애플리케이션을 효율적으로 개발할 수 있게 해줍니다.
3. Redux와 같은 상태 관리 라이브러리를 사용하는 이유는 무엇인가요?
A)
Redux는 JavaScript 어플리케이션 상태를 효율적으로 관리하는 도구로, 상태를 중앙에서 저장하고 업데이트하는 라이브러리입니다. Redux를 사용하는 이유로, 여러 컴포넌트 간에 데이터를 효과적으로 공유하고 예측 가능한 방식으로 상태를 관리할 수 있기 때문입니다. Redux는 복잡한 어플리케이션에서 일관성을 유지하고 유지보수성을 높이는 효과적인 도구로 활용됩니다. 이는 SPA에서 상태 관리 라이브러리로 사용되며, 컴포넌트 간에 상태를 효과적으로 관리할 수 있도록 도와줍니다.
B)
리덕스는 리액트 앱에서 사용되는 전역 상태 관리 도구입니다. 즉, 앱의 다양한 부분에서 필요한 데이터를 중앙에서 관리하고, 어디서든 그 데이터에 접근하거나 수정할 수 있게 해줍니다. 리덕스를 '하나의 관리소'라고 표현했는데, 이 비유가 리덕스의 역할을 이해하는 데 도움이 됩니다.
리액트 자체는 '단방향 데이터 흐름'을 갖고 있습니다. 즉, 데이터가 상위 컴포넌트에서 하위 컴포넌트로만 흐르는 것입니다.. 이렇게 되면 데이터를 여러 컴포넌트에 걸쳐 공유하거나 관리하기가 복잡해질 수 있습니다. 리덕스를 사용하면, 어떤 컴포넌트에서든 필요한 데이터에 접근하고, 그 데이터를 쉽게 업데이트할 수 있게 됩니다. 이렇게 하면 데이터 흐름이 더 유동적이 되고, 사용자에게 다양한 정보를 보다 쉽게 제공할 수 있습니다.
4. JavaScript의 동기식과 비동기식 프로그래밍의 차이점은 무엇인가요?
동기(Synchronous): 동기 프로그래밍은 코드가 순차적으로 실행됩니다. 하나의 작업이 완료되기 전까지는 다음 작업이 시작되지 않습니다. 이는 코드의 흐름을 이해하기 쉽지만, 긴 작업이 진행되는 동안 다른 작업이 대기 상태에 머무르기 때문에 효율성이 떨어질 수 있습니다.
비동기(Asynchronous): 비동기 프로그래밍은 현재 진행 중인 작업이 완료될 때까지 기다리지 않고, 다음 작업을 바로 시작할 수 있습니다. 예를 들어, 네트워크 요청이나 파일 시스템 작업을 수행할 때 유용합니다. 비동기 작업은 백그라운드에서 실행되며, 완료되면 콜백 함수나 프로미스를 통해 결과를 처리합니다.
예를 들어, 카페에서 주문을 받을 때 한 손님이 주문을 하고 메뉴를 준비할 때까지 다음 손님을 받지 않으면 손님은 점점 늘어나고, 뒤에 손님이 만드는 시간이 더 짧은 메뉴를 시킬거라도 앞에 손님이 끝날때까지 기다려야 하기 때문에 비효율적으로 일 처리가 진행될 것입니다.
비동기 프로그래밍은 무거운 작업이나 네트워크 요청과 같이 시간이 많이 소요되는 작업을 처리할 때 중요합니다. 이러한 작업을 동기적으로 처리하면, 사용자 인터페이스가 멈추거나 반응하지 않는 등의 문제가 발생할 수 있습니다. 비동기 방식을 사용하면, 오래 걸리는 작업을 백그라운드에서 처리하고, 그 동안에 사용자는 다른 작업을 계속 진행할 수 있습니다. 이는 사용자 경험을 크게 향상시키며, 전체 애플리케이션의 성능과 반응성을 개선합니다.
비동기 프로그래밍은 현대 웹 애플리케이션과 소프트웨어 개발에서 필수적인 개념으로, 효율적이고 반응이 빠른 시스템을 만드는 데 큰 역할을 합니다.
5. Single Page Application(SPA)과 Multi Page Application(MPA)의 차이점은 무엇인가요?
SPA는 한 번 페이지를 로드한 후, 애플리케이션이 필요한 데이터를 동적으로 로드하고 화면을 갱신하는 방식입니다. 사용자가 애플리케이션을 사용하는 동안 페이지 전체를 다시 로드하지 않고도 새로운 내용을 표시할 수 있습니다. 이는 사용자 경험을 향상시킬 수 있으며, 빠른 응답성을 제공할 수 있습니다.
MPA는 여러 개의 독립적인 페이지로 구성되어 있습니다. 각 페이지는 서버에서 완전한 HTML을 받아와서 로드하며, 사용자가 다른 페이지로 이동할 때마다 전체 페이지를 다시 로드해야 합니다. 이는 전통적인 웹사이트의 작동 방식이며, 새로고침이 발생하므로 사용자 경험이 상대적으로 느릴 수 있습니다.
이렇게 SPA와 MPA는 페이지 갱신 방식에서 차이가 있으며, SPA는 동적이고 더 나은 성능을 제공할 수 있지만, MPA는 전통적이고 각 페이지 간의 독립성이 높습니다. 선택은 프로젝트의 요구사항과 목표에 따라 다를 수 있습니다.
6. 브라우저에 웹사이트 주소를 입력하고, 그 웹사이트가 브라우저에 나타나기까지 내부적으로 어떤 일이 벌어지나요?
URL 요청: 사용자가 웹 브라우저에 URL을 입력하면, 브라우저는 이 URL의 도메인 이름을 DNS 서버에서 검색하여 해당 도메인의 IP 주소를 찾습니다.
HTTP 요청 생성: 브라우저는 찾은 IP 주소와 URL 정보를 기반으로 HTTP 요청 메시지를 생성합니다. 이 HTTP 요청은 TCP 프로토콜을 사용하여 인터넷을 통해 목표 서버로 전송됩니다.
서버 처리: 서버는 도착한 HTTP 요청 메시지를 받아서 처리하고, 요청된 웹 페이지 데이터를 검색합니다.
HTTP 응답 전송: 서버는 웹 페이지 데이터를 HTTP 응답 메시지에 포함시켜 다시 TCP 프로토콜을 통해 사용자의 컴퓨터로 전송합니다.
브라우저 렌더링: 도착한 HTTP 응답 메시지는 웹 페이지 데이터로 변환되고, 브라우저는 이 데이터를 해석하여 사용자에게 시각적으로 보여줍니다.
브라우저의 작동방식을 이해하는 것은 웹 개발자에게 매우 중요하며, 네트워크 통신, 서버 처리, 데이터 전송, 브라우저 렌더링 등 웹 기술의 여러 측면을 이해하는 데 도움이 됩니다.