앵귤러 기초(Angular basic) 22. RxJS, Observable

앵귤러의 HTTP코드를 이해하려면 RxJS 및 Observable의 기본 사항을 이해하는 것이 중요합니다.

이번 포스트에서는 기술적인 부분과 그 의미하는 바를 알아보도록 하겠습니다.

 

이번 포스트에서는 아래의 내용을 다루고 있습니다.

1. RxJS 란
2. 동기, 비동기 차이
3. Observable 이란
4. Observable Pipe

---

RxJS란

Reactive Extensions for Javascript(RxJS)는 Observable시퀀스를 사용하여 데이터를 구성하고 일련의 연산자를 사용하여 해당 데이터를 변환하기 위한 라이브러리입니다.

. NET에 익숙하다면 이들은 LINQ 연산자와 유사합니다.

Angular는 데이터, 특히 HTTP 요청과 같은 비동기 데이터 작업을 위해 RxJS를 사용합니다.

 

하나씩 풀어서 비동기에 대해 간략히 알아본 다음 Observable시퀀스와 연산자에 대해 살펴보겠습니다.

---

동기, 비동기 차이

동기

동기식 의사소통은 전화 통화와 같은 실시간입니다.

상대방이 이야기를 하면, 나는 즉시 이야기를 듣고 응답해야 합니다.

동기식 데이터를 사용하면 응용 프로그램은 값을 요청하고 값이 도착할 때까지 기다립니다.

 

비동기

비동기는 즉각적인 반응을 기대하지 않습니다.

예를 들어 이메일을 보낼 때 답장을 기다릴 필요가 없습니다.

답장이 올 때까지 여러 가지 일을 할 수 있습니다.

나중에 답장이 오면 답장에 관한 행동을 언제든지 결정할 수 있습니다.

 

애플리케이션의 관점에서 HTTP 요청은 비동기적입니다.

애플리케이션과 백엔드 웹 서버가 있다고 생각해 봅시다.

앱에서는 데이터 표시를 위해 웹 서버에 데이터를 요청(Request)합니다.

그런 다음 데이터가 반환될 때 알림을 받도록 설정하고 계속 다른 일을 진행합니다. 그리고 어느 시점에 애플리케이션은 서버로부터 HTTP Request 데이터의 응답(Response)을 받고, 앱은 데이터가 반환되었음을 알려줍니다.

이렇듯 HTTP Request와 Response의 과정은 비동기적입니다.

 

Angular에서는 HTTP를 사용하여 get request를 발행하는데, 알림 설정은 무엇을 사용하는 것일까요?

여기서 RxJS Observable Sequence가 필요합니다.

---

Observable 이란

Observable 시퀀스는 시간에 따른 항목(아이템)의 컬렉션입니다.

컬렉션이지만 배열과는 달리 항목을 유지하지 않습니다.

오히려 방출된 항목을 시간이 지남에 따라 관찰할 수 있습니다.

예를 들어 [G,O,O,D]이라는 배열이 있습니다.

배열을 이용했을 때는 배열을 분류하거나, 혹은 인덱스로 세 번째 글자를 바로 요청할 수 있습니다.

 

Observable의 경우에는 시간에 따라 데이터가 흘러갑니다.

Observable은 시간이 지남에 따라 편지가 도착한다는 것에 더 가깝습니다.

우리는 그것들을 반복해서 분류할 수도 없고, 이미 방출된 후 세 번째를 다시 요청할 수도 없습니다.

이러한 문자를 마우스를 움직임, 버튼을 클릭, 문자를 입력하는 것으로 생각해 보세요.

마우스의 이동, 클릭 또는 키 누름 역시 시간이 지남에 따라 발생합니다.

Observable이 뭔가 이러한 이벤트에 잘 어울릴 것 같은 생각이 드시나요?

 

Observable이 하는 일

Observable은 구독할 때까지 아무것도 하지 않습니다.

구독을 스트리밍 서비스라고 생각해 보세요.

구독하기 전까지는 새로 공개된 드라마 시리즈를 볼 수 없습니다.

구독하면 Observable에서 알림을 보내기 시작합니다.

 

Observable알림에는 세 가지 유형이 있습니다.

첫 번째로 "next" 알림입니다.

가장 일반적인 알림(Notification)은 다음 항목이 내보내질 때 발생하는 "next"알림 이며, 내보낸 항목을 제공합니다. 예를 들어, 키 누름 추적을 생각해 보세요.

키를 누를 때마다 관찰이 next 알림을 내보내고 누른 문자를 제공합니다.

 

두 번째로 "error"  알림입니다.

오류가 발생하면 Ovservable에서 error 알림을 내보내고 오류 정보를 제공합니다.

그런후 관찰이 완료되고 항목이 더 이상 방출되지 않습니다.

 

세 번째로 "complete" 알림입니다.

내보낼 항목이 더 이상 없으면 Observable에서 "complete"알림을 내보냅니다.

 

Observable을 구독했다면, "next", "error", "complete"알림을 받게 되는 것입니다.

 

Observable에 대해 기본 지식을 갖췄으니 Observable을 활용한 HTTP통신을 다시 생각해 봅시다.

화면에 표시할 데이터를 가져오기 위해 http get을 호출하게 됩니다.

Http get은 알림을 내보내는 Observable을 반환하므로 응답이 도착하면 알 수 있습니다.

그런 다음 Observable이 작동하도록 구독하고 get request가 서버로 전송됩니다.

다시 한번 기억해야 할 것이 Observable은 구독하기 전까지는 아무것도 하지 않습니다.

코드는 응답을 기다리지 않고 계속 다른 처리를 하게 됩니다.

나중에 백엔드 서버가 response를 반환합니다.

Observable은 "next"알림을 보내 데이터가 있음을 알려줍니다.

Http get을 사용할 때 Observable은 전체 response를 하나의 항목으로 내보냅니다.

이제 데이터를 받고 처리를 하면 됩니다.

Observable Pipe

Observable로 할 수 있는 일이 하나 더 있습니다.

일련의 연산자를 사용하여 내보내는 각 항목을 변환하는 일종의 파이프 라인을 만들 수 있습니다.

예를 들어 소문자로 바꾸는 연산자를 통해 파이프를 통과하면 모든 데이터는 소문자로 바뀝니다.

Observable에는 매핑(map), 필터링(filter), 결합(combine) 및 변환(transform)을 위한 100개가 넘는 연산자가 있습니다.

 

---

 

여기까지 수고하셨습니다.

Observable을 처음 접하신 분들에게는 다소 생소할 수도 있었을 것 같습니다.

다음 포스트에서는 이번에 익힌 기초를 바탕으로 앵귤러에서 Http Service를 만들며 Observable을 이용하는 방법을 알아보겠습니다.