자바스크립트에서 비동기 작업을 처리하는 방법
1. 콜백 함수
비동기 작업이 완료된 후 실행될 함수를 인자로 전달합니다. 단점으로는 콜백 지옥이 발생할 수 있습니다.
콜백 지옥
콜백 지옥은 JS에서 비동기 작업을 처리할 때 콜백 함수가 중첩되어 코드의 가독성과 유지보수성이 크게 저하되는 현상을 말합니다.
- I. 중첩된 구조
여러 비동기 작업이 순차적으로 실행되어야 할 때, 콜백 함수 안에 또 다른 콜백 함수가 중첩되는 구조가 형성됩니다.
- II. 들여쓰기 증가
콜백이 중첩될수록 코드의 들여쓰기 수준이 깊어져 코드가 오른쪽으로 치우치는 형태가 됩니다.
현대 JS에서는 Promise와 async/await을 사용하여 콜백 지옥 문제를 효과적으로 해결할 수 있습니다.
2. 프로미스
ES6에서 도입된 방식으로, 비동기 작업의 최종 완료와 그 결과값을 나타내는 객체입니다. .then(), .catch(), .finally() 메서드를 통해 체이닝이 가능합니다.
3. async/await
ES8에서 도입된 방식으로, 비동기 코드를 동기 코드처럼 작성할 수 있게 해줍니다. Promise를 기반으로 하지만 더 가독성이 좋습니다.
4. 이벤트 리스터(Event Listeners)
특정 이벤트가 발생했을 때 등록된 함수를 실행하는 방식입니다.
async/await과 Promise의 차이점
Promise: ES6에서 도입된 비동기 처리를 위한 객체로, 비동기 작업의 최종 완료 또는 실패를 나타냅니다.
async/await: ES8에서 도입된 문법으로, Promise를 기반으로 하지만 더 직관적인 방식으로 비동기 코드를 작성할 수 있게 해줍니다.
1. 문법과 가독성
-
Promise는
.then(),.catch()체이닝 방식을 사용합니다. -
async/await는 동기 코드와 유사한 형태로 작성됩니다.
2. 에러 처리
-
Promise는
.catch()를 통해 에러를 처리합니다. -
async/await은 일반적으로 try-catch 구문을 사용합니다.
3. 동작 방식
-
async/await은 내부적으로 Promise를 사용합니다. async 함수는 항상 Promise를 반환합니다.
-
await은 Promise가 해결될 때까지 함수 실행을 일시 중지합니다.
이벤트 버블링과 캡쳐링
이벤트 버블링
이벤트가 발생한 요소에서 시작하여 상위 요소로 이벤트가 전파되는 현상, 대부분의 이벤트는 기본적으로 버블링됩니다. (하위 요소 -> 상위 요소)
이벤트 캡처링
이벤트가 최상위 요소에서 시작하여 발생한 요소까지 내려가는 현상, addEventListener의 세 번째 인자로 true를 전달해서 사용합니다. (상위 요소 -> 하위 요소)
이벤트 전파 제어
event.stopPropagation(): 이벤트 전파를 중단시킵니다.event.stopImmediatePropagation(): 이벤트 전파를 중단하고, 같은 요소에 연결된 다른 이벤트 핸들러도 실행되지 않게 합니다.event.preventDefault(): 이벤트의 기본 동작을 취소합니다.
React의 Virtual DOM
Virtural DOM은 실제 DOM의 가벼운 복사본(JS 객체)입니다. React는 실제 DOM을 직접 조작하는 대신 메모리에 이 Virtual DOM을 유지하고 관리합니다.
컴포넌트 상태가 변경되면 React는 새로운 Virtual DOM을 생성하고 이전 버전과 비교하여 변경된 부분만 식별합니다. 이후 실제 DOM에는 필요한 변경사항만 일괄적으로 적용됩니다.
Virtual DOM은 메모리상의 객체로 빠르게 처리할 수 있습니다. DOM 조작 횟수를 최소화하여 브라우저의 리플로우와 리페인트를 줄이고, 상태와 UI를 자동으로 동기화하여 일관된 UI를 유지할 수 있습니다.
콜 스택
콜 스택은 프로그램 실행 중 함수 호출을 관리하는 데이터 구조입니다. JS와 같이 단일 스레드 언어에서 중요한 역할을 합니다.
콜 스택은 기본적으로 '후입선출'원리로 작동합니다. 함수가 호출되면 해당 함수는 스택의 맨 위에 추가되고, 함수 실행이 완료도면 스택에서 제거됩니다. 이를 통해 프로그램은 현재 실행 중인 함수와 이전에 호출된 함수들의 상태를 추적할 수 있습니다.
이벤트 루프는 콜 스택이 비어있을 때 태스크 큐에서 콜백 함수를 콜 스택으로 이동시켜 실행합니다.
일급 객체
프로그래밍 언어에서 다른 객체들에게 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 의미합니다.
