ts-for-jsdev
  • 자바스크립트 개발자를 위한 타입스크립트
  • 들어가며
  • 01 타입스크립트 소개
    • 1.0 들어가며
    • 1.1 정적 타입 분석
    • 1.2 왜 타입스크립트인가
    • 1.3 타입스크립트의 구성요소
    • 1.4 타입스크립트의 역사
  • 02 ECMAScript
    • 2.0 ECMAScript
    • 2.1 블록 수준 스코프
      • 2.1.1 let을 이용한 선언
      • 2.2.2 const를 이용한 선언
      • 2.2.3 스코프 베스트 프랙티스
    • 2.2 객체와 배열
      • 2.2.1 비구조화 할당
      • 2.2.2 나머지 연산자와 전개 연산자
      • 2.2.3 객체 리터럴 변경사항
    • 2.3 함수
      • 2.3.1 기본 매개변수
      • 2.3.2 화살표 함수
    • 2.4 템플릿 리터럴
      • 2.4.1 멀티라인 문자열
      • 2.4.2 문자열 치환
    • 2.5 원소 순회
      • 2.5.1 forEach 메소드
      • 2.5.2 for-of 문법
      • 2.5.3 이터레이터 프로토콜
      • 2.5.4 이터러블 프로토콜
    • 2.6 비동기 처리
      • 2.6.1 프로미스
      • 2.6.2 Async / Await
    • 2.7 맺으며
  • 03 타입스크립트 기초 문법
    • 3.0 타입스크립트 기초 문법
    • 3.1 기본 타입
    • 3.2 배열과 튜플
    • 3.3 객체
    • 3.4 타입 별칭
    • 3.5 함수
    • 3.6 제너릭
    • 3.7 유니온 타입
    • 3.8 인터섹션 타입
    • 3.9 열거형
  • 04 인터페이스와 클래스
    • 4.0 들어가며
    • 4.1 인터페이스 기초
    • 4.2 색인 가능 타입
    • 4.3 인터페이스 확장
    • 4.4 클래스
    • 4.5 클래스 확장
    • 4.6 클래스 심화
      • 4.6.1 스태틱 멤버
      • 4.6.2 접근 제어자
      • 4.6.3 접근자
      • 4.6.4 추상 클래스
    • 4.7 인터페이스와 클래스의 관계
    • 4.8 맺으며
  • 05 타입의 호환성
    • 5.0 들어가며
    • 5.1 기본 타입의 호환성
    • 5.2 객체 타입의 호환성
    • 5.3 함수 타입의 호환성
    • 5.4 클래스의 호환성
    • 5.5 제너릭의 호환성
    • 5.6 열거형의 호환성
    • 5.7 맺으며
  • 06 타입 시스템 심화
    • 6.0 들어가며
    • 6.1 타입 좁히기
    • 6.2 타입 추론
    • 6.3 타입 단언
    • 6.4 집합으로서의 타입
    • 6.5 서로소 유니온 타입
    • 6.6 맺으며
  • 07 고급 타입
    • 들어가며 (7월 2일 공개)
  • 08 모듈과 네임스페이스
    • 들어가며 (7월 16일 공개)
  • 09 실제 프로젝트에서 사용하기
    • 들어가며 (7월 30일 공개)
  • 10 유용한 라이브러리 소개
    • 들어가며 (8월 13일 공개)
    • 맺으며
  • 부록 II : 자바스크립트 언어 생태계
    • ECMAScript 언어 표준과 TC39
    • TC39 프로세스
    • 실제 예시 - Array.prototype.includes
    • 타입스크립트와 ECMAScript
Powered by GitBook
On this page
  1. 02 ECMAScript

2.6 비동기 처리

자바스크립트는 싱글 스레드 기반의 프로그래밍 언어다. 이러한 한계와 더불어 유저 인터페이스와 매우 밀접하게 엮인 언어로 시작했다는 특징 때문에, 동기 처리를 이용한 프로그래밍 패턴은 자바스크립트에서 실질적으로 사용불가능하다. 네트워크 요청이 응답을 받을 때까지 싱글 스레드를 점유하고, 그 동안은 브라우저가 유저의 마우스, 키보드에 전혀 반응하지 않는다고 생각해보라!

이런 제약 때문에 비싼 작업을 비동기로 처리하는 것이 자바스크립트에선 매우 흔한 패턴이다. 수 년 전까지만 해도 자바스크립트 코드에서는 그런 비동기 작업이 끝난 후, 그 결과에 따라 추가적인 처리를 하기 위해 비동기 서브루틴에게 콜백 함수를 넘기는 패턴이 자주 쓰였다. 다음 코드 예시는 네트워크에서 문서를 받아온 뒤, 해당 문서를 작성한 유저의 다른 글들을 가져오는 가상의 코드 예시다.

fetchDocument(url, function(err, document) {
  if (err) {
    console.log(err);
  } else {
    fetchAuthor(document, function(err, author) {
      if (err) {
        console.log(err);
      } else {
        fetchPostsFromAuthor(author.id, function(err, posts) {
          if (err) {
            console.log(err);
          } else {
            /* do something with posts */
          }
        })
      }
    })
  }
})

위 코드에서 볼 수 있듯이 콜백을 사용해 비동기 작업을 처리하면 비동기로 처리하는 작업의 단계가 깊어짐에 따라 들여쓰기 또한 급격히 깊어진다. 이런 코드는 미관상으로도 좋지 않을 뿐더러, 프로그래머가 비동기로 일어나는 일련의 작업 흐름을 따라가기 매우 힘들게 한다. 이런 불편을 해소하고자, 최신 ECMAScript에는 이러한 콜백을 이용한 접근보다 개선된 비동기 처리 패턴이 추가되었다.

Previous2.5.4 이터러블 프로토콜Next2.6.1 프로미스

Last updated 7 years ago