동기 (synchronous)

• 요청(request) 를 보내고 응답(response)이 오면 그 다음 동작을 처리하는 방식이다.
• 요청과 결과가 한 자리에서 동시에 일어남

영어로 동시에 일어나는 뜻을 가지고 있으며,
요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 한다.

비동기 (Asynchronous)

• 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식이다.
• 요청한 그 자리에서 결과가 주어지지 않음

영어로 동시에 일어나지 않는 뜻을 가지고 있으며,
요청과 결과가 동시에 일어나지 않을거라는 약속이다.

동기와 비동기의 장단점

동기

• 장점 : 설계가 매우 간단하고 직관적이다.
• 단점 : 결과가 주어질 때까지 아무것도 못하고 대기 해야하는 단점이 있다.

비동기

• 장점 : 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용 할 수 있다.
• 단점 : 동기보다 복잡하다.

☕️ 동기와 비동기를 쉽게 이해해보자!

ex) 우리가 커피숍에 가서 주문을 했다.

동기적 커피숍

동기적 커피숍알바생은 주문을 받으면 주문받은 음료를 제조한 뒤,
커피나왔습니다! 해야 다음 주문을 받는다.

비동기적 커피숍

비동기적 커피숍알바생은 주문을 받으면 주문받은 음료를 제조하는 중에도
다음 주문을 받는다.

🎙 당신의 선택은?

당신은 어떤 커피숍을 이용하실건가요?

동기적 커피숍은 알바생이 일하기 참 좋은 커피숍이죠
하지만, 손님입장에선 내 앞에 제조가 오래걸리는 주문이 있었다면..주문하려면 한참을 기다려야겠죠.

비동기적 커피숍은 대신 알바생이 정말 바쁜 구조입니다.
하지만, 손님 입장에선 빨리빨리 주문을 받아줘서 기다리는 시간도 많이 줄 수 있습니다.

RxJs

비동기적 데이터 흐름 관찰 동작 자체가 함수형 프로그래밍 특성과 케미가 잘 맞음

Reactive Extension 줄임말 , 함수형 프로그래밍을 통한 반응형 프로그래밍을 쉽게 적용할 수 있도록 도와주는 라이브러리
옵저버블 스트림을 사용하는 비동기 프로그래밍 API이다.

• 파일 읽기, HTTTP호출, 마우스 움직임 등의 이벤트 소스를 비동기적으로 처리하는 라이브러리.
• RxJS는 콜백이나 Promise기반 라이브러리를 같은 방식으로 처리를 할 수있다.
• 비동기적 데이터 흐름 관찰 동작 자체가 함수형 프로그래밍 특성과 케미가 잘 맞는다.
• 자바스크립트 라이브러리나 프레임워크와 함께 사용이 가능하며, 앵귤러의 경우 기본적으로 지원이 된다.
  (그래서 회사 실무에서 모르는게 있을땐 앵귤러 공식문서를 많이 참고했다.)

스트림(Stream)

시간이 지남에 따라 발생하는 일련의 이벤트를 스트림(stream)이라고 부른다.

• 스트림은 Observable에서 Observar만 이동한다. 다른 방향으로는 이동하지 않는다.
• 스트림에는 항상 데이터 생산자가 있어야 한다.

💡 스트림을 중지시키는 법

• of(), from()같은 완성연산자를 사용
• complete()메서드를 호출
• 옵저버에 오류를 던져 스트림 자동 중지
• teardown 함수를 실행(unsubscribe.구독취소)

생산자(Subject)

데이터 생산자(데이터소스)라는 의미도 있으며, 생성자를 옵저버 패턴에서는 서브젝트(subject)라고 정의

• 생산자는 이벤트 방출에만 관여하고 이벤트 처리에는 관
  여하지 않는다.

관찰자(Observer)

Subject (주체) 를 관찰하고 있는 관찰자

• 소비자가 소비할 이벤트에 대해 생산자를 들고 시작하면 스트림이 생기게된다.
• 스트림은 이벤트를 푸시하기 시작한다. 여기서 소비자를 Observer라고 한다.

옵저버블(Observable)

관찰할수 있는 무언가라는 의미로 옵저버블(Observable)이라고 부른다.

• Observable 데이터 스트림을 생성하는 객체이고, Observable은 비동기값을 받기 위해 구독이라는 개념을 사용

pipe

Observable을 입력으로 사용하고 다른 Observable을 반
환하는 함수이다.

• 순수한 작업
• 연산(데이터 조작이나 편집)이 이루어지는 곳
• 안에서 데이터조각이 이루어지기 때문에 관심사도 분리된다.

rxjs 단점

• 디버깅의 어려움
• 러닝커브가 큼
• api가 명확하지않아 표준스펙으로 채택하기 어려움
• 대용량 배치 작업을 할때, 속도를 조절해야할때

rxjs 간단 정리

일관된 방식으로 Observable
안전하게 외부영향을 받지 않고
데이터흐름을 데이터소스부터 개발자가 원하는 Observable 데이터가 흘러가고
처리를 원하는대로 가공할 수 있는 라이브러리이다!