한빛출판네트워크

jQuery의 Deferred(디퍼드)를 제대로 배워보자!

jQuery는 현재 가장 인기 있는 자바스크립트 라이브러리 중 하나다. 웹에서 클라이언트 사이드 스크립트 언어를 단순화할 수 있어, 많은 개발자가 사용하고 있다.

웹은 빠르게 변화하고 있다. 다양한 서비스가 웹으로 통합되면서, 웹 사용이 폭증하고 있다고 해도 과언이 아니다. 다양한 서비스가 웹으로 제공되다 보니, 웹 프로그램이 점점 복잡해지고 있다. 그 중 하나가 웹의 비동기 함수 호출이다. 웹은 기본적으로 실시간성을 보장하지 않는 비동기적 환경이다. 하지만 최근에는 시시각각 바뀌는 정보를 웹 페이지 로딩이 끝난 웹 브라우저에 즉시 전달해주는 동기식 서비스가 증가하고 있는데, 이러한 시스템을 잘못 만들면 성능이 현저히 저하되어 많은 개발자가 고심하고 있다. 

jQuery의 디퍼드(Deferreds), 프로미스(Promise), 콜백(Callback)을 사용하면 클라이언트와 서버 애플리케이션에서의 비동기 호출을 적절하게 처리하여 동기식 서비스를 구현할 수 있다. 하지만 개념과 사용 방법이 어려워 개발자들이 이들의 장점을 제대로 이용하지 못하고 있다. 

이 책은 디퍼드와 프로미스의 개념과 사용 방법, 콜백을 피하는 방법 등을 알려준다. 많은 예제로 디퍼드와 프로미스를 언제, 어떻게 사용해야 하는지 소스 코드로 직접 보여 주어 이벤트 기반 프로그래밍의 방법을 익힐 수 있다.

대상 독자

• jQuery 중급 개발자
• 초급에서 중급으로 레벨업하고 싶은 jQuery 개발자

이 책의 주요 특징

• 디퍼드를 생성하고 프로미스를 반환하는 로직을 이해할 수 있다.
• 레시피에 함께 소개한 예제를 통해서, 실제 프로그래밍을 어떻게 해야 하는지 알려준다.
• 실제 사례를 통해 유용한 디퍼드 활용 방법을 알려준다.

콜백 지옥에서 벗어나기 위한 도구, 디퍼드와 프로미스(promise)!

자바스크립트 개발을 시작하면 접하게 되는 주요 개념 중 하나가 바로 비동기 처리다. 그리고 자바스크립트 개발자에게 디퍼드의 개념은 그리 낯선 대상이 아니다. 이미 2011년 초에 jQuery 1.5가 공개되면서 디퍼드가 함께 소개되었고, 굳이 디퍼드가 아니더라도 자바스크립트 개발자에게는 비동기 처리가 일상이기 때문이다. 즉, 디퍼드는 단지 비동기 처리 방식이 추상화되고 깔끔해진 API에 지나지 않는다.

하지만 익숙해져 있기 때문에 한 번쯤 낯설게 바라볼 필요가 있다. 적어도 다음 두 가지 경우에는 반드시 그래야 한다.

첫 번째, Ajax 요청을 동기적으로 처리할 때다. 외부 시스템과의 통신을 동기적으로 처리하면 요청이 끝날 때까지 다른 어떤 코드도 수행되지 않는다. 속도를 위해 Ajax를 사용했지만, 정작 속도는 낼 수 없는 상황이 되어 버린다. 그럼에도 이런 비용을 감수하려고 하는 것은 비동기 프로그래밍이 너무 복잡해질 때가 있기 때문이다. 하지만 디퍼드를 제대로 알았더라면 다르게 생각해볼 수도 있었을 것이다.

두 번째, 디퍼드를 알고 있지만 단지 jQuery의 $.ajax, $.animate API와 같이 클라이언트의 입장에서만 사용해본 경우다. 디퍼드를 제공하고 수행하는 입장에서 코드를 작성해본 적이 없다면 디퍼드는 단지 비동기 처리를 깔끔하게 사용하도록 도와주는 jQuery 메소드일 뿐이다. 하지만 디퍼드에는 더 많은 것이 있다. 디퍼드를 좀 더 파헤쳐 본다면 이전에 할 수 없었던 방식으로 코드를 작성할 수 있을 것이다.

디퍼드를 제대로 알기 전에는 이 개념이 과연 책으로 나올만한 것인지 의심할 수 있다. 그러나 이것은 책을 읽기 전의 이야기다. 책을 읽으면서 느낀 디퍼드의 깊이와 재미는 그동안 알고 있던 것과 사뭇 다를 것이다. 이를 여러분도 느껴 보았으면 좋겠다.

1 소개 
    1.1 생각할 거리 
    1.2 디퍼드와 프로미스의 정의 
    1.3 낯익은 프로미스 

2 jQuery 디퍼드 API 
    2.1 프로미스 사용하기 
    2.2 디퍼드 작성하기 
    2.3 한 눈에 정리하기 
    2.4 디퍼드 다이나믹스 
    2.5 더는 지원되지 않는 프로미스 메소드 
    2.6 jQuery 디퍼드 API의 변경 사항 

3 디퍼드 레시피 
    3.1 setTimeout 함수 대체하기 
    3.2 크롬 익스텐션에서의 메시징 
    3.3 크롬의 로컬 스토리지에 접근하기 
    3.4 프로미스를 반환하는 함수들을 하나씩 실행시키기 
    3.5 emptyPromise 메소드와 프로미스 풀 
    3.6 구글 지도 표현하기 
    3.7 웹 워커와 통신하기 
    3.8 웹 소켓 사용하기 
    3.9 실패하는 디퍼드 호출을 자동으로 재시도하기 
    3.10 메모이제이션 
    3.11 진행 중인 함수 호출의 단기 메모이제이션 
    3.12 프로미스 이벤트의 스트리밍 
    3.13 프로미스의 집합에서 첫 번째 결과 얻기 
    3.14 디퍼드 큐 
    3.15 when2: 개선된 jQuery.when 
    3.16 여러 프로미스를 타임아웃시키기 
    3.17 스스로 운명 결정하기 
    3.18 프로미스 비활성화시키기 

4 디퍼드 수련하기 
    4.1 정말로 jQuery 디퍼드를 이해하고 있는가? 
    4.2 프로미스/A+ 
    4.3 프로미스는 함수 호출을 위한 일급 객체다. 
    4.4 비동기적 데이터 구조체 
    4.5 디퍼드의 이점 
    4.6 디퍼드의 어려움 
    4.7 참고 자료 

부록 A 과제 힌트 
    setTimeout 함수 대체하기
    크롬 익스텐션에서의 메시징 
    크롬의 로컬 스토리지에 접근하기 
    프로미스를 반환하는 함수들을 하나씩 실행시키기 
    emptyPromise 메소드와 프로미스 풀 
    구글 지도 표현하기 
    웹 워커와 통신하기 
    웹 소켓 사용하기 
    실패하는 디퍼드 호출을 자동으로 재시도하기 
    메모이제이션 
    진행 중인 함수 호출들의 단기 메모이제이션 
    프로미스 이벤트의 스트리밍 
    프로미스의 집합으로부터 첫 번째 결과 얻기 
    디퍼드 큐 
    when2: 개선된 jQuery.when 
    여러 프로미스를 타임아웃시키기 
    스스로 운명 결정하기 
    프로미스 비활성화시키기 

부록 B 프로미스/A+ 명세 
    용어 
    전제 요건 

부록 C ArrayBuffer를 Base64로 변환하기