시작하기

RxJS에 대한 명확한 예제, 설명, 자료.

@btroncone 님이 작성하신 Learn RxJS 문서의 한국어 번역본입니다.

RxJS 소개

RxJS 는 최근 웹 개발에서 핫한 라이브러리 중 하나입니다. 이벤트 처리에 대해 강력하고 기능적인 접근법을 제공하여 다양한 프레임워크, 라이브러리, 유틸리티들로 활용되고 있죠. Rx를 배우는 것은 그 어느 때보다 매력적입니다. Rx는 거의 모든 언어 에서 활용할 수 있기 때문에, 반응형 프로그래밍을 확실하게 파악할 수 있으며, 쉽게 이해할 수 있습니다.

그러나...

RxJS와 반응형 프로그래밍은 어렵습니다. 다양한 개념들, 방대한 API들이 존재하며 사고 방식을 명령형에서 선언적 스타일로 전환해야 합니다. 이 문서는 이러한 개념을 쉽게 접근할 수 있게 하는 데 초점을 두고 있으며, 명확하고 찾아보기 쉬운 예제를 제공하고, 좋은 자료들을 참조해 두었습니다.

최종 목표는 공식 문서 와 기존 학습 자료를 보완하면서, 쉽게 해결할 수 있는 새롭고 신선한 관점을 제공하는 것입니다. Rx를 배우는 것은 어렵겠지만, 충분히 배울 가치가 있습니다!

RxJS를 처음 접하셨나요?

RxJS 입문 문서를 통해 핵심 개념들에 익숙해져 보세요!

목차

Operators(연산자)

연산자는 observable(옵저버블)의 복잡한 비동기 작업에 우아하고 선언적인 해결책을 제공하는 강력한 도구입니다. 이 섹션에서는 모든 RxJS 연산자와 명확하고 실행 가능한 예제 코드, 추가 자료를 제공합니다.

연산자 분류

• Combination

• Conditional

• Creation

• Error Handling

• Multicasting

• Filtering

• Transformation

• Utility

또는...

전체 목록

Subjects

Subject는 하나의 실행 경로를 여러 observer(옵저버)들이 공유하는 특별한 옵저버블입니다.

• 개요
• AsyncSubject
• BehaviorSubject
• ReplaySubject
• Subject

RxJS 개념

옵저버블의 내부 동작에 대한 기초적인 지식 없이는 RxJS가 그저 마술처럼 느껴질 수 있습니다. 이 섹션에서는 반응형 프로그래밍과 옵저버블에 익숙해지는 데 필요한 주요 개념들을 다루고 있습니다.

• RxJS 입문
• map, pluck, mapTo를 이용해 stream 변형하기
• 시간 기반의 operator 비교

레시피

• 영어 타자 연습 게임
• Battleship 게임
• 버블 게임
• 카레이싱 게임
• 점을 잡아라!
• 클릭좌 게임
• 날아라 새 게임
• 게임 루프
• 가로 스크롤 표시 바
• HTTP 폴링
• 잠금화면
• 매트릭스 디지털 비 효과
• 기억력 게임
• 지뢰 찾기
• 점프 게임
• Progress 바
• 저장 표시
• 똑똑한 카운터
• 스톱워치
• 스페이스 인베이더
• 새로고침하려면 스와이프하세요
• 2인용 탱크 게임
• 테트리스
• 미리 입력
• 이미지 덮기 게임

입문자를 위한 자료

RxJS와 반응형 프로그래밍이 처음이신가요? 여러분의 학습 경험에 도움이 될 좋은 자료들을 첨부해 두었습니다.

컨퍼런스

• RxJS Live

문서

• RxJS Introduction - 공식 문서
• The Introduction to Reactive Programming You've Been Missing - André Staltz
• RxJS: Observables, Observers and Operators Introduction - Todd Motto

동영상

• Ultimate RxJS 💵 - Brian Troncone
• Asynchronous Programming: The End of The Loop - Jafar Husain
• What is RxJS? - Ben Lesh
• Creating Observable from Scratch - Ben Lesh
• Introduction to RxJS Marble Testing 💵 - Brian Troncone
• Introduction to Reactive Programming 💵 - André Staltz
• Reactive Programming using Observables - Jeremy Lund

연습문제

• Functional Programming in JavaScript - Jafar Husain

툴

• Rx Marbles - Observable 다이어그램 모음 - André Staltz
• Rx Visualizer - Observable Playground - Misha Moroshko
• Reactive.how - 반응형 프로그래밍 학습용 사이트 - Cédric Soulas
• Rx Visualization - RxJS 프로그래밍 시각화 도구 - Mojtaba Zarei

RxJS 4가 궁금하신가요? Denis Stoyanov 의 멋진 eBook 을 확인해보세요!

원문/번역

• English - 원문
• 简体中文 - 중국어 번역본

번역 오류 제보

번역 및 내용 오류 시 상단의 Edit on GitHub 버튼을 통해 Pull Request로 제보해주시면 감사하겠습니다 ☺️