RxJS 입문자를 위한 사내 발표용. 최대한 복잡한 예제 코드와 설명들을 제외(일단 써봐요, 좋아요 같이 스터디 하시죠! 의 목적^^)

1. Do you know
RxJS? Front-end Developer
Jacob

2. TABLEOFCONTENTS
FIRST
SECTION
RxJS 등장배경
SECOND
SECTION
Rx란
무엇인가
THIRD
SECTION
주요 개념 및
간단한 라이브 코딩
FOURTH
SECTION
그럼 도입할까?

3. RxJS 등장 배경
왜 RxJS가 등장했을까?
기존 로직으로는 처리가 어려울까?
01

4. 여러 이벤트를
비동기로
처리하고 싶어요!

5. 응?
이미 방법이 있지 않나?
Callback, Eventemitter, Promise ...

6. RxJS등장배경
Callback
중첩 구성시 콜백헬 발생
Promise
단일 값만 처리 가능.
불변이기 때문에 취소 불가.
RxJS
복잡한 여러 이벤트 처리를
간결한 코드로 처리 가능.

7. Rx란 무엇인가?
Observable을 사용하는
반응형 프로그래밍을 위한
라이브러리
02

8. “Reactive Extensions for JavaScript”
An API for asynchronous
programming with observable
streams

9. 최고의 아이디어 조합.
● Observer pattern
● Iterator pattern
● Functional programming
비동기 또는 콜백 기반의 코드를 더 쉽게 작성할 수 있게 해준다
Rx란무엇인가?

10. Rx란무엇인가? FRONTEND
Web 또는 Mobile에서 UI
이벤트 및 API 응답 조작
CROSS-PLATFORM
Javascript, Java, Python, C#
등에서도 사용 가능
BACKEND
Rx의 비동기성을 이용하여
동시성과 구현 독립성 지원

11. 주요 개념
주요 개념 및 간단한 라이브 코딩
03

12. Stream

13. Observable

14. Observer

15. Operator

16. Live
Coding!

17. 그럼 도입할까?
왜 RxJS가 등장했을까?
기존 로직으로는 처리가 어려울까?
04

18. 그럼도입할까?
이미 많은 사람들이 사용하고 있다!

19. Microsoft, Netflix, Github, Soundcloud, Trello, Airbnb, Kakao
….
그럼도입할까?

20. “Think of RxJS as Lodash for events”

21. 그럼도입할까?
Functional
관찰 가능한 스트림에 순수
함수를 사용하여 복잡한
상태 저장을 피할 수 있다
Less is more
몇 줄의 코드로
코드베이스가 깔끔해
질 수 있다
Async error handling
전통적인 try / catch는 비동기 계산의 오류에
무력하지만 Rx는 적절한 오류처리 방법을
가지고 있다
Concurrency made easy
Observable 및 Scheduler를
사용하면 개발자가 더 낮은 수준의
스레딩, 동기화, 동시성 문제를
추상화 할 수 있다

22. 하지만….
러닝 커브가 만만치 않다!

23. 처음 접하는 개발자에게는 난해한 코드
메모리 누수도 신경써야 한다.

24. 처음볼때 난해한 코드와 디자인 패턴만
이해한다면 충분히 멋지고 효율적인 코드를
작성할 수 있다!
메모리 누수 등에는 이미 많은 대안들이
존재하고
방법 또한 많이 있다.

25. THANKS!
작성자: 정규현(JACOB) | 블로그: https://code-masterjung.tistory.com | Front-end Developer