티스토리 뷰

도움받기

RxJS - Daum영화에 적용하다

초딩영웅 2019. 3. 18. 22:05

from RxJS - Daum영화에 적용하다


2016년 개편된 Daum영화 프론트엔드 개발에는 ReactiveX의 JavaScript 라이브러리 RxJS 4를 사용했습니다.

ReactiveX는 ReactiveX Introduction에서 callback의 문제점에 도움을 주는 것으로 소개가 되어 있습니다.

웹에서는 Angular 2에 RxJS 5가 쓰이며 관심을 받았고, Android app개발에서도 RxJava가 여러 곳에 쓰이며 관심을 받고 있습니다.

적용 당시 IE 브라우저 버전 대응 문제와 RxJS 5가 Beta 였던 이유로 RxJS 4를 적용했습니다.

RxJS는 프론트엔드의 여러 이벤트들에 대한 비동기 처리에 도움을 주지만, 수많은 operator들과 함수형 프로그래밍 패러다임에 대한 이해를 해야 해서 어려움이 있었는데요. 예를 들어 함수형 프로그래밍 패러다임에 맞게 외부 변수를 참조하지 않고 적절한 함수의 합성을 생각해야 하는 점이었습니다.

그렇다면 ReactiveX가 무엇인지 간략히 먼저 소개하고, RxJS를 Daum영화에는 어떻게 적용했는지 각 기능별 코드를 중심으로 소개하겠습니다.

이해를 돕기 위해 코드를 간소화 한 점이 있으며, 실제 적용 코드와 큰 흐름에서는 같도록 했음을 알려드립니다.

댓글