Rxjs를 배워봅시다.
원문 링크입니다 : https://www.thisdot.co/blog/getting-started-with-rxjs
프론트엔드 분야에서 일해 본 적이 있다면 RxJS를 듣거나 보거나 사용한 적이 있을 것입니다.
RxJS는 정확히 뭔가요?
간단하게 말하면 이벤트를 위한 lodash 입니다.
우리는 그 정의를 확장하여 다음과 같이 말할 수 있습니다.
"이것은 Observer Pattern을 따르는 Observable을 사용하는 반응형 프로그래밍을 위한 라이브러리입니다."
그러나 이것이 RxJS가 무엇이며 실제로 사용하는 방법을 이해하는 데 정말 도움이 될까요?
아마 그렇지 않을 것입니다.
"RxJS가 유용한가요?"라고 물을 수도 있습니다.
비동기 코드를 작성하고 유지 관리하고 추론하기가 더 쉬워집니다.
하지만 이것이 가장 도움이 되는 설명인지 의심스럽습니다.
그러나 RxJS는 많은 개발자가 어려움을 겪는 두 가지 프로그래밍 패러다임의 구현이라는 점에 유의해야 합니다.
따라서 RxJS로 작업할 때 길을 잃거나 혼란스럽다고 느끼더라도 초조해하지 마십시오.
우리 모두 한때 그랬습니다.
먼저, RxJS의 몇 가지 간단한 사용 사례를 설정하는 방법을 자세히 설명하기 전에
Reactive Programming과 Observer Pattern에 대한 기본 개요를 다룰 것입니다.
Reactive Programming
반응형 프로그래밍은
마우스 클릭과 같은 이벤트 이미터 또는 데이터 소스에서 생성된 이벤트에 반응하도록 코드를 작성하는
프로그래밍 패러다임입니다.
JavaScript를 이용해 DOM을 작업한 적이 있다면 이벤트에 대해 들어본 적이 있을 것입니다.
일반적인 이벤트는 onClick 이벤트 핸들러로 처리할 클릭 이벤트입니다.
<div onClick="handleClick()"></div>이것은 프론트엔드 개발을 위한 이상적인 후보입니다.
그러나 이벤트에 응답하는 애플리케이션을 작성하고 관리하는 것은 적절한 패턴이 없으면 빠르게 번거로워질 수 있습니다.
Observer Pattern
옵저버 패턴은 이벤트 처리 시스템 또는 애플리케이션 수명 주기 전반에 걸쳐
이벤트에 반응해야 하는 시스템을 구현할 때 일반적으로 사용되는 패턴입니다.
가장 기본적인 형태로 subjects와 observers로 구성되며, publishers와 subscribers라고도 합니다.
subjects는 일련의 이벤트와 종속 항목 목록으로 구성된 개체입니다. 이러한 종속자(dependents)는 observers입니다.
사용자가 클릭한 횟수를 기록하고, 사용자가 클릭할 때마다 경과한 시간을 기록하여
애플리케이션 내에서 사용자 참여를 추적하는 일부 기능을 구현해야 한다고 가정해 보겠습니다.
Observer 패턴을 사용하면
- 이 작업을 매우 쉽게 수행할 수 있을 뿐만 아니라
- 문제를 분리하여 테스트 및 유지 관리가 훨씬 쉬워지고
- 사용자 클릭을 기반으로 메트릭을 기록하는 새로운 방법을 쉽게 추가하거나 제거할 수 있습니다.
사용자가 애플리케이션 내에서 클릭할 때마다 이벤트를 수신하는 subject가 있습니다.
- 사용자가 애플리케이션 내에서 클릭한 횟수에 대한 기록을 업데이트하는 Observer와
- 각 클릭 사이의 시간을 기록하는 Observer 입니다.
Creating and Using an Event Stream with RxJS
이제 RxJS를 사용하여 위의 사용 사례를 구현하는 방법을 살펴보겠습니다.Subjects
- Subjects는 모든 Observer와 단일 실행 경로를 공유합니다.
- 일반적으로 수동으로 설정하고 API를 사용하여 모든 Observer에게 메시지로 보낼 값을 지정합니다.
- 이것은 다음 아티클에서 더 자세히 다룰 것입니다!
Creation Operators
- 생성 연산자 이들은 거의 모든 것을 이벤트 스트림으로 변환하는 데 도움이 되는 특수 기능으로, 이를 비동기 방식으로 처리할 수 있습니다.
const userClick$ = fromEvent(document, 'click');let numberOfClicks = 0;
const trackNumberClicksSubscription = userClick$.subscribe((event) => {
numberOfClicks++;
console.log(`User has clicked ${numberOfClicks} times!`);
});User has clicked 1 times!
User has clicked 2 times!
User has clicked 3 times!let numberOfClicks = 0;
const trackNumberClicksSubscription = userClick$.subscribe((event) => {
numberOfClicks++;
console.log(`User has clicked ${numberOfClicks} times!`);
if(numberOfClicks === 10) {
// 반환된 구독을 취소함
trackNumberClicksSubscription.unsubscribe();
console.log(`No longer tracking number of user clicks!`);
}
});User has clicked 9 times!
User has clicked 10 times!
No longer tracking number of user clicks!이제 각 사용자 클릭 사이의 시간을 추적하는 다른 사용 사례는 어떻습니까?
userClick$ 이벤트 스트림에 대한 새 Subscription을 설정해 보겠습니다.
let lastClickTime = -1;
const trackTimeBetweenClicksSubscription = userClick$.subscribe((event) => {
// Wait until the first click has been received before we start tracking
// the time between each click
if (lastClickTime === -1) {
lastClickTime = Date.now();
return;
}
const difference = (Date.now() - lastClickTime) / 1000;
console.log(`Time between user clicks: ${difference}s`);
lastClickTime = Date.now();
});사용자가 마지막으로 클릭한 시간을 기록하고 그 시간과 새로운 클릭 이벤트를 수신한 시간의 차이를 확인하기만 하면 됩니다.
Date.now()는 epoch(클릭간 간격)을 밀리초 단위로 반환하므로
초 단위로 결과를 얻으려면 1000으로 나누어야 합니다.
여기서 직접 동작하는 예시를 확인하세요! here
getting-started-with-rxjs - CodeSandbox
getting-started-with-rxjs by Coly010 using rxjs
codesandbox.io
결론
RxJS의 맛만 봤지만 비동기 이벤트 기반 코드를 작성하고 유지하는 데 RxJS가 제공하는 기능을 확인하셨길 바랍니다.
RxJS의 진정한 힘은 기능과 사용 사례를 더욱 확장할 수 있는 많은 Operators에서 나옵니다.
다른 기사에서 다룰 예정이니 계속 지켜봐 주세요!
'FrontEnd' 카테고리의 다른 글
| RxJS로 옵저버블을 만드는 방법 (0) | 2022.10.08 |
|---|---|
| RxJS 기본 Operator와 사용방법 (0) | 2022.10.08 |
| 리믹스와 엣지 컴퓨팅[Remix and “The Edge”] (0) | 2022.10.08 |
| 리액트 서버 컴포넌트와 리믹스[React Server Components and Remix] (0) | 2022.10.07 |
| Remix의 데이터 플로우[Data Flow in Remix] (0) | 2022.10.07 |
