[RxJS] RxJs가 나온 이유???
회사에서 Vue.js를 사용하고 있는데, 상태관리와 비동기 처리를 위해 vuex를 사용하지 않고 RxJS를 쓰고 있어서 어쩔 수 없이 스터디를 해야 하는 상황이다. 사실 다른 공부를 하기에도 벅찬데... 코드를 보면 RxJS가 빠져있는 곳이 없어서 모르면 코드를 이해하지 못한다. 입사한지는 좀 됐고, 사실 어느정도 대충 이해를 하고 사용하고 있는 중인데 정확하게 공부를 하기 위해서 동기들이랑 스터디를 진행하려고 한다. RxJS 퀵 스타트라는 책을 추천받아 읽으면서 책의 내용에 대해 정리를 해볼 생각이다.
RxJS가 나온 이유??
책의 전반부를 살펴보면 다짜고짜 RxJS에 대해 설명하지 않고, 웹 애플리케이션에서 어떤 문제들이 생겼는지, 그 문제들을 해결하기 위해 RxJS는 어떤 방법을 사용해서 해결하는지에 대해 먼저 설명해준다.
책을 살펴보면 모든 웹 애플리케이션은 위의 그림과 같이 상태머신이라고 한다. 입력 값이 들어가면 로직에 따라 상태 값이 변할 수도 있고, 그 상태 값을 출력할 수도 있다. 이러한 상태머신들의 집합으로 웹 애플리케이션이 만들어지기 때문에 웹 애플리케이션은 크게 하나의 상태머신이라고 볼 수 있다. 이러한 웹 애플리케이션을 만드는데 에러가 발생할 수 있는데, 크게 3가지 경우에 의해 에러가 발생한다.
- 입력에 대한 오류 : 서버로부터 전달받은 데이터를 입력값으로 사용할 때, 입력값이 에러가 왔거나 비정상적인 데이터가 전달되어 발생하는 에러
- 상태에 대한 오류 : 의존 관계에 있거나 호출 순서가 중요한 상태머신에서 상태변화가 제대로 이뤄지지 못했을 시에 일어나는 에러
- 로직에 대한 오류 : 분기문, 변수에 따른 개발 실수로 인해 발생하는 에러
RxJS는 흔히 비동기처리에 대한 해결법을 위해 나온 라이브러리라고 알고 있었는데, 근본적으로는 위의 저 3가지 문제에 대해 원할하게 데이터를 처리하고자 나온 데이터 흐름 제어 솔루션이라고 한다. 이 책의 1부에서는 위의 3가지 문제에 대해 RxJS가 어떤 해결책을 사용해서 해결하고자 했는지에 대한 이야기를 서술하고 있다.
입력 데이터 오류
입력 상태게시판을 예를 들어 생각을 해보자. 게시판에는 게시판 글 목록을 보여주는 화면이 있고, 또 글을 작성하는 페이지가 있을 것이다. 데이터가 흐르는 관점에서 본다면,
- 목록화면, 조회화면은 데이터를 서버로부터 받아와서 브라우저에 전달한다.
- 브라우저에 전달된 정보를 브라우저의 UI 객체에 전달한다.
- 글쓰기 화면에서는 UI 객체를 통해 입력한 정보를 전달받아, 브라우저에 객체로 저장한다.
- 저장한 객체를 이용하여 서버로 정보를 전달한다.
1 -> 2번 상황을 먼저 살펴보면 서버로부터 데이터가 넘어오는 경우는 비동기로 넘어올 것이다. 그리고 브라우저에 전달되어 저장된 데이터는 동기적으로 UI 객체에 전달되어 화면에 렌더링 될 것이다. 3 -> 4번 상황도 비슷하다. 사용자가 UI 객체를 통해 데이터를 입력하는 것이 비동기로 처리되고, 브라우저 객체에는 데이터가 동기적으로 저장될 것이다. 그 후에는 서버로 비동기로 데이터를 전달할 것이다.
이렇듯 데이터가 같을지라도 전달되는 시점이 다르다. 어떤 상황은 동기방식으로, 어떤 상황에서는 비동기 방식으로 데이터를 전달한다. 비동기와 동기는 각자 장단점이 있다. 동기로만 개발을 한다면 순차적으로 코드가 실행되다보니 순서를 보장할 필요도 없다. 하지만 왜 비동기를 사용하고, 동기와 섞어서 사용하는가? 그 이유는 만약 웹 페이지가 동기 방식으로만 만들어진다면, 페이지의 상단에서부터 하나씩 로딩이 될것이며, 중간에 물릴 수도 없고 다른 동작을 수행할 수도 없을 것이다. 그럼 사용자들의 복장이 터져나가기 쉽상일 것이다.
그럼 비동기를 사용하는 이유는 알겠다. 근데 비동기, 동기를 사용하면 순서를 보장하는 것을 고려하며 개발을 해야하고, 또 순서가 꼬이면 에러가 나기 십상이다. 그래서 다양한 해결방법들이 생겨나기 시작했다. 콜백함수, Promise, Observer 패턴, aysnc/await 등등... RxJS는 이러한 문제를 해결하기 위해서 단 하나의 방식을 사용할 수 있는 구조를 제공한다. RxJS는 동기와 비동기의 차이점을 시간이라는 개념을 도입함으로써 같은 형태로 처리할 수 있도록 했다. 만약 버튼에 클릭이벤트를 바인딩하고 클릭을 한다고 생각해보자. 동기든 비동기든 시간축을 기준으로 다음과 같이 동일하게 보일 것이다. 이런 형태는 시간을 인덱스로 둔 컬렉션을 볼 수 있는데, RxJS에서는 이를 스트림이라고 표현한다.
RxJS에서 스트림을 표현하는 Observable 클래스를 제공하는데, 이는 시간을 인덱스로 둔 컬렉션을 추상화한 클래스이다. 이 클래스는 동기나, 비동기방식으로 전달된 데이터를 하나의 컬렉션으로 바라볼 수 있게 해준다. 이로 데이터가 어떤 형태로 전달되는지 신경쓸 필요가 없어진다. Observable을 만들기 위해 다양한 함수를 제공한다. 이벤트를 Observable로 만들 때는 fromEvent를 이용한다. 배열 같은 iterable, promise 데이터는 from을 이용한다. 단일 데이터를 연속으로 전달하는 경우에는 of를 이용한다.
cf) Observable 객체명은 주로 접미사 $를 붙인다.
=> Stream을 뜻하는 S와 유사한 $을 약어로 사용한다고 합니다.