[모던자바스크립트 DeepDive] 41장. 타이머 & 43장. Ajax

 본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다.

 

 

 

 

호출 스케줄링

일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수 사용

• setTimeout
• setInterval
• clearTimeout
• clearInterval

JS 엔진은 싱글 스레드 이기 때문에(단 하나의 실행 컨텍스트) 타이머 함수는 비동기 처리 방식으로 동작한다.

 

 

 

 

 

타이머 함수

setTimeout (callback, ms[, params1, ...] 

• 일정 시간 이후에 콜백함수 실행
• 시간은 밀리초 단위로 사용

clearTimeout(timerId)

• 즉시 타이머 중지

const timer = setTimeout(() => console.log('Hi!'), 1000);

clearTimeout(timer);

 

setInterval (callback, ms[, params1, ...])

• 일정 시간 마다 반복해서 콜백함수 실행
• 시간은 밀리초 단위로 사용

clearInterval(timerId)

• 즉시 타이머 중지

let count = 1;

const timerId = setInterval(() => {
  console.log(count);
  if (count++ === 5) clearInterval(timerId);
}, 1000);

 

 

 

디바운스

• 특정 시간을 지정하고 그 시간 이전에 이벤트가 발생할 경우 이전에 실행하려던 이벤트는 종료하고 새로운 이벤트 등록하는 방식이다.
• 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트가 호출되도록 함
• scroll, resize, input, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생 => 성능에 문제를 줌
  
  • 검색창에 단어를 입력하면 추천 검색어를 추천해 주는 경우를 자주 볼 수 있다.
  • 그럴 때 하나의 단어를 입력할 때마다 추천검색어를 출력해 주는 것보단 디바운스를 적용해서 추가적인 입력이 없어지고 난 이후에 추천검색어를 보여주면 서버에 대한 부하나 쓸데없는 작업을 줄일 수 있다.
• resize 이벤트 처리나 input 요소의 입력된 값으로 ajax 요청하는 입력 필드 자동완성, 버튼 중복 클릭 방지 처리등에 사용한다.

    const debounce = (callback, delay) => {
      let timerId;

      return event => {
        if (timerId) clearTimeout(timerId);
        timerId = setTimeout(callback, delay, event);
      };
    };

 

 

 

스로틀

• 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 최대 한 번만 호출되도록 한다.
• 즉, 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 한다
• delay 시간이 경과했을 때 이벤트가 발생하면 콜백 함수를 호출하고 새로운 타이머를 재설정한다. (delay 시간 간격으로 콜백함수가 호출된다)
  • scroll 이벤트 처리나 무한 스크롤 구현 등에 유용하게 사용된다

 const throttle = (callback, delay) => {
      let timerId;

      return event => {
        if (timerId) return;
        timerId = setTimeout(
          () => {
            callback(event);
            timerId = null;
          },
          delay,
          event
        );
      };
    };

 

 

 

디바운싱
- 웹에서 주로 ajax 검색에 자주 쓰인다.
- 주로 그룹에서 처음이나 마지막으로 실행된 함수를 처리하는 방식으로 사용된다.

쓰로틀링
- 주로 성능개선을 위하여 사용된다. (무한 스크롤)
- 이벤트를 일정주기마다 발생하도록 한느 기술이다.

---

43장 Ajax

 

 

 

Ajax란?

• JS를 사용해서 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식
• 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다.

 

Ajax 통신의 장점

• 필요한 데이터만 서버로부터 전송 받아서 효율적
• 변경할 필요가 없는 부분 재 랜더링X -> 순간적으로 깜박이는 현상 없음
• 클라이언트와 서버의 통신이 비동기적으로 동작하여 요청을 보낸 후에 블로킹이 발생하지 않는다.

 

 

 

JSON

• JSON은 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다.

JSON의 표기 방식

• JS의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트
• 키는 무조건 큰 따옴표로 묶고, 값 중에서 문자열은 반드시 큰 따옴표로 묶어야함.

{
    "name": "식빵",
    "family": "웰시코기",
    "age": 1,
    "weight": 2.14
}

JSON.stringify

이 메서드는 객체를 JSON 포맷의 문자열로 변환함

클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야하며 이를 직렬화라고 한다.

JSON.stringify(value[, replacer[, space]])

• value : JSON 문자열로 변환할 값.
• replacer - Optional
  • 문자열화 동작 방식을 변경하는 함수, 이 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.
• space - Optional
  • 가독성을 목적으로 JSON 문자열 출력에 공백을 삽입하는데 사용되는 String 또는 Number 객체.
  • 이것이 Number 라면, 공백으로 사용되는 스페이스(space)의 수를 나타낸다;
  • 이 수가 10 보다 크면 10 으로 제한된다.
  • 1 보다 작은 값은 스페이스가 사용되지 않는 것을 나타낸다.
  • 이것이 String 이라면, 그 문자열(만약 길이가 10 보다 길다면, 첫번째 10 개의 문자)이 공백으로 사용된다.
  • 이 매개 변수가 제공되지 않는다면(또는 null 이면), 공백이 사용되지 않는다.

 

JSON.parse

JSON 포맷의 문자열을 객체로 변환한다.

서버로부터 받은 JSON 데이터를 객체로 사용하려면 JSON문자열을 객체화 하여 사용한다.

JSON.parse(text[, reviver])

• text : JSON으로 변환할 문자열.
• reviver - Optional
  : 함수라면, 변환 결과를 반환하기 전에 이 인수에 전달해 변형함.

 

XMLHtppRequest

JS를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다.

이 객체는 HTTP 요청 전송 및 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공한다.

XMLHttpRequest 객체 생성

Web API 이므로 브라우저 환경에서만 정상적으로 실행된다.

생성자 함수를 호출하여 생성

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

XMLHttpRequest 객체의 프로퍼티와 메서드

프로토타입 프로퍼티

• status : HTTP 상태 코드

이벤트 핸들러 프로퍼티

• onload : HTTP 요청이 성공적으로 완료한 경우
• onerror : HTTP 요청에 에러가 발생한 경우

메서드

• open : HTTP 요청 초기화
• send : HTTP 요청 전송
• setRequestHeader : 헤더 설정

 

 

 

HTTP 요청 전송

1. open 메서드로 HTTP 요청 초기화
2. setRequestHeader 메서드로 특정 HTTP 요청의 헤더 값 설정
3. send 메서드로 HTTP 요청 전송

5

const xhr = new XMLHttpRequest();

xhr.open('GET', '/users');

xhr.setRequestHeader('content-type', 'application/json');

xhr.send();

• GET 요청은 데이터를 URL의 일부분인 쿼리 문자열로 서버에전송
• POST 요청은 데이터(payload)를 요청 몸체에 담아 전송

 

 

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);
  }
};