[모던 자바스크립트 Deep Dive] 40장 ~ 45장

41장 타이머

41.1 호출 스케줄링

• 함수 호출 지연, 반복 예약 가능
• 타이머 함수: 호스트 객체
• setTimeout: 일정 시간 후 한 번만 실행
• setInterval: 일정 시간 간격으로 반복 실행
• 자바스크립트는 싱글 스레드로 동작하므로 타이머는 비동기 처리

41.2 타이머 함수

• setTimeout / clearTimeout

  • const timeoutId = setTimeout(func|code[, delay, param1, param2, ...]);

    매개변수	설명
    func	타이머가 만료된 뒤 호출될 콜백 함수
    delay	타이머 만료 시간(ms). setTimeout 함수는 delay 시간으로 단 한 번 동작하는 타이머를 생성한다. 인수 전달을 생략한 경우 기본값 0이 지정된다.
    param1, param2, ...	호출 스케줄링된 콜백 함수에 전달해야 할 인수가 존재하는 경우 세 번째 이후의 인수로 전달할 수 있다.

• setInterval / clearInterval

  • const timerId = setInterval(func|code[, delay, param1, param2, ...]);
  • 일정 간격마다 콜백 반복 실행
  • 반복 횟수 조건으로 제한 가능

41.3 디바운스와 스로틀

• 디바운스
  • 짧은 시간 간격으로 이벤트가 발생하면 이벤트 핸들러를 호출하지 않음
  • 일정 시간이 경과한 이후에 콜백 한 번 호출
  • 최종 상태 반영에 적합: 입력 완료 후 한 번만 Ajax 요청
  • setTimeout, clearTimeout 사용
  • resize 이벤트, 자동완성 UI, 중복 클릭 방지 등
• 스로틀
  • 이벤트가 연속 발생해도 일정 시간 간격마다 한 번씩만 콜백 실행
  • setTimeout 사용, 일정 간격마다 타이머 초기화
  • scroll 이벤트, 무한 스크롤 UI

42장 비동기 프로그래밍

42.1 동기 처리와 비동기 처리

• 싱글 스레드 기반: 한 번에 하나의 태스크 처리 가능
• 함수 호출 시 실행 컨텍스트 스택에 푸시되어 순차적 실행
• 실행 중인 함수가 종료되어야 다음 함수 실행 가능 -> 동기 처리 -> 블로킹 발생
• 비동기 처리
  • 실행 순서에 상관 없이 다음 태스크 실행 가능
  • 실행 순서 보장 어려움
  • setTimeout, setInterval, HTTP 요청, 이벤트 핸들러
• 콜백 패턴
  • 비동기 처리 방식
  • 콜백 헬, 예외 처리 어려움, 복잡한 비동기 흐름 처리 한계
  • 해결책: 프로미스(Promise)

42.2 이벤트 루프와 태스크 큐

• 이벤트 루프: 자바스크립트의 동시성 지원
• 자바스크립트 엔진 구성 요소
  • 콜 스택(call stack): 실행 컨텍스트 저장 및 실행
  • 힙(heap): 객체 저장 공간
• 비동기 작업 처리: 브라우저, Node.js
  • 태스크 큐(task queue): 비동기 콜백 함수, 이벤트 핸들러 저장
  • 마이크로태스크 큐: 프로미스의 후속 처리용 콜백 저장
  • 이벤트 루프 동작 원리
    1. 콜 스택이 비었는지 확인
    2. 비어 있으면 태스크 큐에서 콜백 함수를 꺼내 콜 스택에 푸시하여 실행
    3. FIFO(First In First Out) 방식으로 처리
  • 자바스크립트는 싱글 스레드, 브라우저는 멀티 스레드
  • 브라우저와 자바스크립트 엔진이 협력하여 비동기 처리 구현

43장 Ajax

43.1 Ajax란?

• 브라우저와 서버 간 비동기 통신을 가능하게 하는 프로그래밍 방식
• XMLHttpRequest 객체 사용하여 HTTP 요청 비동기 처리
• 기존 방식 단점
  • 매 요청마다 HTML을 다시 받아와 불필요한 데이터 전송과 렌더링 발생
  • 화면 깜빡임 등 사용자 경험 저하
  • 서버 응답 전까지 블로킹 발생
• Ajax 장점
  • 필요한 데이터만 요청, 네트워크 부하 감소
  • 변경된 부분만 렌더링하여 UX 향상
  • 비동기 통신으로 블로킹 없는 처리 가능

43.2 JSON

• JSON 표기 방식
  • 자바스크립트 객체와 유사한 텍스트 기반 포맷
  • 배열과 객체 모두 표현 가능
  • 키와 문자열은 반드시 " 사용
• JSON.stringify
  • 객체나 배열을 JSON 문자열로 직렬화
  • 선택적 들여쓰기 가능
  • replacer: 특정 속성 제외 가능
• JSON.parse
  • JSON 문자열을 객체나 배열로 역직렬화
  • 서버에서 받은 JSON 데이터를 자바스크립트에서 사용할 수 있도록 변환

43.3 XMLHttpRequest

• XMLHttpRequest 객체 생성
  • const xhr = new XMLHttpRequest()
• HTTP 요청 전송
  1. XMLHttpRequest.prototype.open 메서드로 HTTP 요청 초기화
  2. 필요에 따라 XMLHttpRequest.prototype.setRequestHeader 메서드로 특정 HTTP 요청의 헤더 값 설정
  3. XMLHttpRequest.prototype.send 메서드로 HTTP 요청 전송
• HTTP 응답 처리
  • onreadystatechange 이벤트: readyState === 4 (DONE) && status === 200일 때 응답 처리
  • onload 이벤트: 성공 시 자동 호출, readyState 체크 불필요

44장 REST API

44.1 REST API의 구성

구성 요소	내용	표현 방법
자원 (resource)	자원	URI(엔드포인트)
행위 (verb)	자원에 대한 행위	HTTP 요청 메서드
표현 (representations)	자원에 대한 행위의 구체적 내용	페이로드

44.2 REST API의 설계 원칙

1. URI는 리소스를 표현해야 한다.
   • 명사 사용: GET /todos/1
2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다.
   • GET: 조회
   • POST: 생성
   • PUT: 전체 수정
   • PATCH: 부분 수정
   • DELETE: 삭제

45장 프로미스

45.1 비동기 처리를 위한 콜백 패턴의 단점

• 콜백 헬
  • 비동기 함수는 결과가 준비되기 전 종료, 반환값 외부 사용 불가능
  • setTimeout, XMLHttpRequest: 콜백 실행이 호출 시점 이후에 발생
  • 콜백에서 상위 스코프의 변수에 값을 할당해도 순서 보장이 안 되므로 예상대로 동작하지 않음
  • 후속 처리는 콜백 함수로 처리, 콜백 중첩 시 콜백 헬 현상 발생
    • 가독성 저하
    • 유지보수 어려움
• 에러 처리의 한계
  • try...catch
    • 동기 코드에만 유효
    • 비동기 콜백에서 발생한 에러는 잡을 수 없음
    • 비동기 콜백은 호출 스택 상에서 try 블록과 연결되어 있지 않음
  • 콜백 기반 비동기 처리에서는 에러 처리를 위한 일관된 매커니즘 부재

45.2 프로미스의 생성

• 등장 배경

  • 콜백 패턴의 한계 해결
  • 비동기 처리 결과 명확하게 표현
  • 가독성 및 에러 처리 용이성 향상

• 생성 방법

  • const promise = new Promise((resolve, reject) => {...});
  • executor 함수: 생성 시 전달되는 콜백, 비동기 작업 수행

  프로미스의 상태 정보	의미	상태 변경 조건
  pending	비동기 처리가 아직 수행되지 않은 상태	프로미스가 생성된 직후 기본 상태
  fulfilled	비동기 처리가 수행된 상태 (성공)	resolve 함수 호출
  rejected	비동기 처리가 수행된 상태 (실패)	reject 함수 호출

45.3 프로미스의 후속 처리 메서드

• Promise.prototype.then
  • 두 개의 콜백 함수를 인수로 전달받음
    • 첫 번째: fulfilled, 프로미스의 비동기 처리 결과
    • 두 번째: rejected, 프로미스의 에러
  • 언제나 프로미스 반환
    • 반환값이 프로미스인 경우 그대로 반환
    • 반환값이 프로미스가 아닐 경우 암묵적으로 프로미스를 생성해 반환
• Promise.prototype.catch
  • 한 개의 콜백 함수를 인수로 전달받음
    • 프로미스가 rejected 상태일 경우 호출
  • then(undefined, onRejected)과 동일하게 동작
• Promise.prototype.finally
  • 한 개의 콜백 함수를 인수로 전달받음
    • 성공/실패 여부와 무관하게 무조건 호출
  • 리소스 정리, 로딩 종료 등 공통 처리 시 유용

45.4 프로미스의 에러 처리

• catch
  • 비동기 처리에서 발생한 에러 처리 가능
  • then 내부에서 발생한 에러 처리 가능
• then의 두 번째 인자보다는 catch 사용 권장
  • then: 두 번째 콜백은 첫 번째 콜백에서 발생한 에러 캐치 불가능

45.5 프로미스 체이닝

• then, catch, finally는 모두 프로미스 반환, 연속 호출 가능 -> 체이닝
• 체이닝을 통해 비동기 처리 순차적 연결 가능 -> 콜백 헬 방지
• async/await: 체이닝 없이도 동기처럼 프로미스 처리 가능

45.6 프로미스의 정적 메서드

• Promise.resolve / Promise.reject
  • resolve: 값을 즉시 resolve한 프로미스 생성
  • reject: 에러 등을 즉시 reject한 프로미스 생성
• Promise.all
  • 여러 프로미스 병렬 처리, 모두 성공 시 배열로 결과 반환
  • 하나라도 실패하면 즉시 reject
• Promise.race
  • 가장 먼저 완료된 프로미스의 결과/오류를 반환
• Promise.allSettled
  • 모든 프로미스의 성공/실패 결과를 객체 배열로 반환

45.7 마이크로태스크 큐

• 마이크로태스크 큐는 태스크 큐보다 우선순위가 높음

45.8 fetch

• fetch()
  • XMLHttpRequest를 대체하는 HTTP 요청 API
  • Promise 기반
• Response 객체: HTTP 응답 표현
• 에러 처리
  • 404, 500 등의 HTTP 오류는 reject되지 않음 -> ok: false인 Response로 resolve
  • 네트워크 에러나 CORS 오류만 reject 처리
  • 명시적 에러 처리 필요
  • axios: 모든 HTTP 에러를 자동으로 reject 처리