[RxJS] #1 동기와 비동기

동기와 비동기

동기
A라는 작업이 끝나면 B작업을 실행하는 방식
블로킹(blocking)이 발생한다.

비동기
콜백 함수 : 지연 시간(latency)를 발생시키는 작업, 즉 블로킹을 해결하기 위해 콜백 함수가 만들어졌다. 비동기 요청과 함께 콜백 함수를 사용하면 애플리케이션이 다음 줄의 코드를 계속 실행하는 제어의 역전(inversion of control)이 발생한다.

제어의 역전이란 코드의 특정 부분이 런타임 시스템에서 제어의 흐름을 되돌려 받는 방식이다.

반응형 사고에서 콜백을 사용하지 않아야 할까

단일 원격 http 요청을 하는 간단한 스크립트 코드를 작성할 때는 RxJS가 과하다.
함수형과 반응형 패러다임이 혼합된 라이브러리는 동적 UI 또는 서비스 조율과 같이 중간 정도의 복잡성을 가진 상태 시스템을 구현할 때 빛을 낸다.

서버 측 엔드 포인트에서 클라이언트로 데이터를 불러오는 작업이 있다고 가정해보자.
다음 단계를 호출하는 과정에서 중첩된 AJAX 요청이 필요하다.

ajax('<host1>/items',
  items => {
    for (let item of items) {
      ajax(`<host2>/items/${item.getId()}/info`,
        dataInfo => {
          ajax(`<host3>/files/${dataInfo.files}`, processFiles);
      });
    }
});

beginUiRendering();

위는 자바스크립트에서 콜백 지옥(callback hell)이라고 한다. 위와 같은 패턴은 가독성이 떨어진다. 그리고 무엇보다 큰 문제가 있다.

비동기 함수를 호출하는 for...of 명령형 블록과 같은 동기 코드를 섞으면 문제가 생긴다.
루프는 이러한 호출에 지연 시간이 있음을 인식하지 못해서 무슨 일이 있든 항상 앞으로 진행하므로 예측할 수 없고 진단하기 어려운 버그가 생길 수 있다.