모던 자바스크립트 Deep Dive 41장~43장 타이머/비동기/AJAX

41장. 타이머

호스트 객체인 타이머 함수.
setTimeout 함수는 생성된 타이머를 식별하는 id를 반환한다.

디바운스과 스로틀

• 디바운싱 debouncing : 짧은 시간 간격으로 발생하는 이벤트를 그룹화하여 마지막 한 번만 호출되도록 한다. (예) 인풋 입력
• 쓰로틀링 throttling : 일정 시간 간격으로 발생하는 이벤트를 그룹화하여 간격 안에서 최대 한 번만 호출되도록 한다. (예) 스크롤

42장. 비동기 프로그래밍

• 동기 처리 : 현재 실행 중인 태스크가 종료할 때까지 다음 태스크가 대기하는 방식. 다음 태스크가 블로킹된다.
• 비동기 처리 : 현재 실행 중인 태스크가 종료되지 않은 상태라도 다음 태스크를 곧바로 실행하는 방식

자바스크립트는 싱글 스레드로 동작한다. 한 번에 하나의 태스크만 처리할 수 있다.

43장. AJAX

• JSON : 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된다.
• JSON.stringify : 직렬화. 클라이언트가 서버로 객체를 전송할 때 객체를 문자열로 만든다.
• JSON.parse : 역직렬화. JSON 포맷의 문자열을 객체로 변환한다.

XMLHttpRequest : HTTP 요청과 응답을 위한 객체

 

// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();


// HTTP 요청 초기화
// https://jsonplaceholder.typicode.com은 Fake REST API를 제공하는 서비스다.
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');


// HTTP 요청 전송
xhr.send();


// load 이벤트는 HTTP 요청이 성공적으로 완료된 경우 발생한다.
xhr.onload = () => {
  // status 프로퍼티는 응답 상태 코드를 나타낸다.
  // status 프로퍼티 값이 200이면 정상적으로 응답된 상태이고
  // status 프로퍼티 값이 200이 아니면 에러가 발생한 상태다.
  // 정상적으로 응답된 상태라면 response 프로퍼티에 서버의 응답 결과가 담겨 있다.
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.response));
    // {userId: 1, id: 1, title: "delectus aut autem", completed: false}
  } else {
    console.error('Error', xhr.status, xhr.statusText);
  }
};