[모의 면접] 돔, 호이스팅, 이벤트루프, 동기와 비동기

• 실제돔과 가상돔의 차이
• 자바스크립트 호이스팅
• 변수의 호이스팅
• 이벤트 루프
• 동기와 비동기의 차이, 비동기프로그래밍의 필요성

---

실제돔과 가상 돔의 차이

실제돔(Real DOM)

• HTML 문서 구조를 표현하는 객체 모델
• 브라우저 웹 페이지의 실제 요소들을 나타낸다.

특징

• 즉각적인 렌더링 : 개발자 도구 사용으로 직접 변경 가능하며, 즉각 반영된다.
• 비효율성 : 한 번에 많은 변경이 발생하거나 복잡한 구조의 DOM을 자주 업데이트할 경우, 성능이 저하될 수 있다(느린 로딩, 브라우저 과부하 등) 모든 변경마다 브라우저가 레이아웃과 페인팅 과정을 반복해야 하기 때문
• API: document.getElementById, document.createElement와 같은 브라우저 API를 통해 직접 조작할 수 있다.

동작 예시

• DOM 요소를 추가하거나 제거, 수정할 때마다 전체 DOM 구조가 레이아웃과 페인팅 과정을 반복해야한다

레이아웃과 페인팅 과정
돔 요소의 위치와 모양을 그리는 작업

 

 

가상 DOM (Virtual DOM)

• 실제 DOM의 추상화된 복제본으로 눈으로 보이는 것이 아닌, 메모리에 존재한다.
• UI의 상태 변화를 추적하고, 변경 사항을 효율적으로 관리하기 위한 목적으로 사용되며 주로 리액트와 같은 프레임워크에서 사용된다.

특징:

• 빠른 연산: 가상 DOM은 메모리 내에서 작동하기 때문에  빠르게 상태 변화를 계산할 수 있다.
• 효율성: 변경 사항을 한 번에 모아서 실제 DOM에 최소한의 업데이트만 수행한다(배치업데이트)
• Diffing 알고리즘: 리액트는 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분만 실제 DOM에 반영한다. 이를 통해 불필요한 렌더링을 줄이고 성능을 최적화한다

동작 예시:

• 상태 변화가 발생하면 새로운 가상 DOM 생성
• 이전 가상 DOM과 새로운 가상 DOM을 비교(diffing)하여 변경된 부분을 찾아낸다
• 변경된 부분만 실제 DOM에 적용.

 

주요 차이점

업데이트 방식

• 실제 DOM: 모든 변경이 즉시 반영되므로, 많은 변경이 발생할 경우 성능 저하가 크다
• 가상 DOM: 변경 사항을 메모리에서 처리하고, 배치업데이트로 변경 사항을 모아서 한 번에 실제 DOM에 적용하여 성능을 향상한다

1. 성능
   • 실제 DOM: 직접적인 업데이트로 인해 자주 변경되는 경우 성능 문제가 발생할 수 있다
   • 가상 DOM: 변경 사항을 효율적으로 계산하고 반영하므로, 성능이 개선에 도움 된다.
2. 개발 편의성:
   • 실제 DOM: 복잡한 UI 업데이트 로직을 직접 관리함
   • 가상 DOM: 리액트와 같은 라이브러리가 변경 사항을 자동으로 관리해 주므로, 개발 용이

정리

 

실제 DOM은 HTML 문서 구조를 표현하는 객체 모델로 개발자 도구로 직접 접근이 가능하며 변경이 즉각 반영된다

가상 DOM은 실제 DOM의 상태와 구조를 반영하지만, 더 간단하게 표현하여 효율적인 업데이트를 목표로 하는 복사본으로. 리액트 같은 라이브러리에서 사용되며, 배치업데이트로 변경사항을 모아 한번에 메모리에서 처리하여 실제 DOM에 반영시키기 때문에 성능 개선에 도움 된다.

 

리액트는 라이브러리인가 프레임워크인가?

리액트는 주로 라이브러리이다
관점에 따라 프레임워크로 설명되기도 한다

라이브러리로 설명하는 이유
단일 목적 : 리액트는 UI를 만들기 위한 라이브러리로,
그 외의 기능(라우팅, 상태 관리, HTTP 요청 등)은 제공하지 않는다. 이런 한계로 인해 라이브러리로 간주된다.

선택적 사용 : 리액트는 다른 라이브러리나 프레임워크와 함께 사용할 수 있다
상태 관리 라이브러리인 Redux나 MobX와 함께 사용하여 상태를 관리하거나, 라우팅을 위해 React Router를 사용할 수 있다

프레임워크로 설명하는 이유
주도적인 접근 : 리액트는 개발 방법론 중 하나인 "주도적인" (opinionated) 방식을 채택한다
리액트가 개발자에게 어떤 방식으로 UI를 구성하고 관리해야 하는지에 대한 일정한 지침을 제공한다는 것을 의미하며 이런 특성은 프레임워크의 특징과 유사하다

컴포넌트 중심 : 리액트는 컴포넌트 중심의 개발 방식이다
UI를 작은 단위의 컴포넌트로 분해하고, 조합하여 복잡한 UI를 구성한다 이런 컴포넌트 중심의 접근은 일반적으로 프레임워크에 더 가깝다.

 

---

자바스크립트의 호이스팅 개념 왜 발생하는가

호이스팅은 낚시로 끌어올리는 것과 같이 변수나 함수 선언이 스코프의 상단으로 끌어올려지는 현상으로

코드 순서와 관계없이 변수, 함수를 참조할 수 있게 해 준다

주의점으로 변수나 함수에 값을 할당하는 것은 호이스팅이 적용되지 않는다

(호이스팅이 변수나 함수 선언부만을 끌어올리기 때문에 해당하는 값은 원래 위치에 남아 있기 때문)

 

발생 이유

호이스팅은 JavaScript의 실행 컨텍스트와 변수의 스코프 규칙에 따라 발생합니다.

코드 실행 전 실행 컨텍스트를 생성하며, 변수와 함수 선언이 스코프의 시작 부분으로 끌어올려진다

실행 컨텍스트는 두 단계로 나뉜다

 

정리

• 호이스팅 개념: 변수나 함수 선언이 스코프의 상단으로 끌어올려지는 현상.
• 발생 이유: JavaScript의 실행 컨텍스트와 변수의 스코프 규칙에 따라 변수와 함수 선언이 스코프 시작 부분으로 끌어올려짐.
• 주의점: 변수나 함수에 값을 할당하는 것은 호이스팅 되지 않으며, 선언부만 끌어올려짐.

실행컨텍스트?
JavaScript 코드가 실행되는 환경
JavaScript는 단일 스레드 언어로, 하나의 호출 스택(call stack)으로 실행 컨텍스트를 관리한다
실행 컨텍스트는 전역 컨텍스트와 함수 컨텍스트로 나뉜다

실행컨텍스트 생성 단계
실행 컨텍스트가 생성되면, 변수와 함수 선언이 해당 컨텍스트의 최상단으로 끌어올려진다(호이스팅)
변수 선언은 undefined으로 초기화된다
함수 선언은 함수 자체가 메모리에 저장된다.

실행 단계
코드를 순차적으로 실행.
변수에 값이 할당되면, 그 시점에 실제 값으로 초기화된다

실행 컨텍스트는 코드 실행 시 생성되고, 호이스팅은 코드 실행 전에 처리된다.

 

실행컨텍스트 예시코드

1. 실행 단계
console.log(a); // 출력: undefined
console.log(foo()); // 출력: "Hello, world!"

var a = 10;

function foo() {
    return "Hello, world!";
}

console.log(a); // 출력: 10

2. 생성 단계
var a; // 변수 선언이 끌어올려져 초기화됨 (undefined)
function foo() { // 함수 선언이 끌어올려져 메모리에 저장됨
    return "Hello, world!";
}

3. 전체 코드 실행 흐름
var a; // 'a'가 undefined로 초기화됨
function foo() { // 'foo'가 함수로 초기화됨
    return "Hello, world!";
}

// 실행 단계
console.log(a); // undefined
console.log(foo()); // "Hello, world!"
a = 10; // 'a'에 값 10 할당
console.log(a); // 10

---

변수의 호이스팅

var

• var로 선언된 변수는 선언 단계에서 호이스팅 되며, 초기화는 원래 위치에서 이루어진다
• 변수는 선언 시 undefined로 초기화된다.

console.log(myVar); // 출력: undefined
var myVar = 5;
console.log(myVar); // 출력: 5

 

let과 const

• let과 const로 선언된 변수도 선언 단계에서 호이스팅 된다
• var와 달리  선언 전에 접근할 수 없다 일시적 사각지대이기 때문
• 초기화 전에 변수에 접근하려고 하면 ReferenceError 발생

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = 5;
console.log(myLet); // 출력: 5

console.log(myConst); // ReferenceError: Cannot access 'myConst' before initialization
const myConst = 10;
console.log(myConst); // 출력: 10

 

함수 선언의 호이스팅

• 함수 선언은 전체가 호이스팅 되기 때문에 선언 전 호출이 가능하다

console.log(myFunction()); // 출력: "Hello, world!"
function myFunction() {
    return "Hello, world!";
}

 

함수 표현식의 호이스팅

• 함수 표현식은 변수에 할당되는 함수로, 변수 선언만 호이스팅 되고, 함수 할당은 호이스팅 되지 않는다

console.log(myFunc); // 출력: undefined
console.log(myFunc()); // TypeError: myFunc is not a function
var myFunc = function() {
    return "Hello!";
};

 

 

정리

• var: 선언은 호이스팅 되지만 초기화는 원래 위치에서 이루어지고, 초기화 전 undefined 반환
• let과 const: 선언은 호이스팅 되지만 초기화는 원래 위치에서 이루어지며, 초기화 전 접근 시 오류발생 일시적 사각지대(TDZ) 때문
• 함수 선언: 전체가 호이스팅 되며, 선언 전에 호출할 수 있다
• 함수 표현식: 변수 선언만 호이스팅 되고, 함수 할당은 호이스팅 되지 않으며, 선언 전에 호출할 수 없다.

---

이벤트 루프

1. 호출 스택 (Call Stack): 실행되는 코드를 담아두고, 현재 실행 중인 함수의 정보를 유지한다
2. 이벤트 큐 (Event Queue): 비동기 작업을 처리하기 위한 대기열. 비동기 작업이 완료되면 해당 작업의 콜백 함수가 이벤트 큐에 추가된다
3. 이벤트 루프 (Event Loop): 이벤트 루프는 계속해서 호출 스택과 이벤트 큐를 확인하며 호출 스택이 비어있고, 이벤트 큐에 콜백 함수가 있다면 이벤트 루프는 해당 콜백 함수를 호출 스택으로 이동시켜 실행한다.

정리

 

이벤트 루프는  콜스택과 이벤트 큐를 지속적으로 추적하며, 콜스택이 비워질 때마다 이벤트 큐에서 대기하던 이벤트를 콜스택으로 이동시켜 실행하는 역할

동기는 하나의 작업이 끝나야 다음 이벤트가 콜스택으로 이동되지만

비동기는 요청과 동시 콜스택이 비워지기 때문에 비동기 작업을 효율적으로 처리할 수 있게 된다.

자바스크립트는 싱글스레드지만, 멀티스레드처럼 동작하게 해 주는 것

---

동기와 비동기의 차이 

 

동기(synchronous)

• 순차적으로 실행되며, 한 작업이 끝나야 다음 작업이 실행된다
• 호출한 함수가 반환될 때까지 코드의 실행이 멈추고 대기
• 주로 순차적인 작업이 필요한 경우 사용된다

비동기(asynchronous)

• 작업이 순차적으로 실행되지 않으므로 호출한 함수가 즉시 반환된다
• 작업이 완료될 때까지 기다리지 않고, 다음 코드를 실행한다
• 주로 네트워크 요청, 파일 시스템 액세스, 타이머 등과 같이 시간이 오래 걸리는 작업에 사용된다

---

비동기 프로그래밍의 필요성

• 성능 향상: I/O(Input/Output) 작업 등의 느린 작업 중 다른 작업을 수행할 수 있어 CPU 및 시스템 리소스를 효율적으로 활용하여 전체적인 성능을 향상할 수 있다
• 사용자 경험: 비동기적으로 데이터를 가져오고 처리하는 등의 작업을 수행하여 웹 애플리케이션의 반응성을 향상하고 사용자 경험을 개선할 수 있다
• 비동기 작업 처리: 여러 개의 API 호출을 병렬로 처리함으로 동시성 작업을 쉽고 빠르게 처리할 수 있기 때문에 애플리케이션의 처리량을 향상하고 사용자에게 보다 빠른 응답을 제공하는 데 도움 된다

정리

 

CPU 및 시스템 리소스를 효율적으로 활용해 성능을 향상하고

동시에 다른 작업을 처리함으로 애플리케이션의 처리량을 향상하고 사용자에게 보다 빠른 응답을 제공할 수 있다