Rxjs를 시작하기전에...

JavascriptRxJS
, , , , , ,

RxJS

RxJS
RxJS 시리즈 포스팅은 Quick Start RxJS를 읽으면서 공부하고 정리한 내용입니다.

Rxjs를 시작하기전에…

개발 트랜드

최근 많은 개발자들이 사용하고 있는 SPA(Single Page Application)를 웹 어플리케이션 개발은 상태에 따라 변화하는 상태머신으로 보아도 무방합니다.
과거 개발시 각 기능별로 모든 페이지가 존재했었습니다.

하지만 최근 SPA개발 방법은 하나의 index페이지를 가지고 있고, 나머지는 각 페이지에 맞는 컴포넌트를 JavaScript로 가지고 있습니다.
예를 들어 과거에 게시판같은 경우 리스트의 기능의 페이지인 List.jsp파일을 시작으로 상세페이지인 View.jsp 그리고 쓰기페이지인 Write.jsp까지 각 기능별로 모든 페이지들이 각각 존재했습니다.
그러므로 각 페이지에 Gnb라던가 Footer등의 중복된 부분을 모두 가지고 있는 내용이 중복되는 코드를 가지고 있었습니다.

중복된 내용을 코드까지 요청을 하며, 리소스의 낭비가 많이 발생하는 문제점을 컴포넌트의 형태로 필요한 부분만 갈아 끼우는 개발 방식을 통해 자원의 효율적으로 사용하도록 개발을 진행합니다.
어떠한 input을 통해 변화된 상태를 감지하여, 컴포넌트를 갈아끼우는 형태의 개발 방식을 사용하고 있습니다.

이처럼 최근 웹 어플리케이션은 상태체크를 통해 컴포넌트의 변화 또는 데이터를 변화시키는 상태머신이라고 볼 수 있습니다.
상태머신의 동작 순서는 아래와 같습니다.

1
2
3
4
1. 시스템에서 input이 발생
2. 프로그램 로직은 input과 현재 프로그램 상태에 따라 행위를 결정
3. 프로그램 로직에 결정 따라 프로그램 상태를 변경
4. 경우에 따라서 프로그램 로직에서는 output을 발생

위 순서를 레이어의 토글 기능에 적용한다면 아래와 같습니다.

1
2
3
4
1. 사용자가 버튼을 클릭
2. 웹어플리케이션은 현재 레이어의 상태를 체크
3. 현제 레이어의 상태가 열림 이라면 레이어를 닫힘 상태로 변경, 닫힘 상태라면 열림으로 상태변경
4. 레이어의 DOMD에 상태에 적용

state machine

따라서 크게보면 웹 어플리케이션도 하나의 큰 상태 머신으로 볼 수 있습니다.

오류의 발생원인

사용자의 입력에 따라 프로그램이 예상하는 결과를 얻지 못하는 부분을 우리는 프로그램 오류라고 합니다.
상태 머신인 웹어플리케이션은 정확한 입력과 로직으로 상태를 관리에 따라 오류의 발생여부가 결정됩니다.
오류가 발생하는 원인을 크게 정리하면3가지로 볼 수 있습니다..

  1. 입력오류
  2. 상태오류
  3. 로직오류

1. 입력오류

각 구성요소에게 정확한 입력값을 전달하는 부분은 단순 전달하는 것이라 생각하면 쉬울 수도 있으나, 결코 쉽게 볼 수 없습니다.
예를들어 서버로부터 전달받은 데이터를 입력값으로 사용하는 경우 응답값이 정상적인 값일 경우에만 입력값을 전달해야합니다. 또한 사용자로부터 입력을 받았을때 또한 옳바른 값을 전달받아야합니다.
비정상적인 값을 데이터로 사용하여 전달한다면, 이는 오류가 발생하는 원인이 될 수 있습니다.
그렇기에 외부로 부터 전달받는 경우에 값을 체크해 미리 오류에 대한 처리도 해야 합니다.

2. 상태오류

상태 오류가 발생하는 원인은 상태변화를 정확하게 전달하지 못하는 경우 오류가 발생합니다.
구성요소간 의존도가 있는경우 B가 A데이터를 기반으로 하는경우 A의 데이터가 변경될때 B의 상태 또는 데이터도 변경되어야합니다.
또한 호출 순서가 A의 작업 이후 B 작업 이루어져야한다면 A와 B사이에 상태가 변경되는 어떠한 작업이 진행될때 오류가 발생할 수 있습니다.
위의 상황처럼 의존도 또는 호출순서에 따른 상태변경시 오류가 발생 할 수 있습니다.

3. 로직오류

개발자가 구현하고자하는 비지니스의 대한 이해도가 떨어지거나 실수로 인해 오류가 발생할 수 있습니다.
로직에 관련해 오류가 생기는 문제는 개발자의 개인역량에 의해 발생하는 문제로 TDD(Test Driven Development)를 통해 이러한 문제를 방지 할 수 있습니다.
또한 가장 빈번히 발생하는 로직오류는 분기문(if…else if…else, 삼항연산자, switch문) 또는 변수에 따른 오류가 가장 많이 발생합니다.
분기가 많을수록 로직에 대한 복잡도가 올라가고, 변수가 많을 수록 의도치 않게 변경해야하는 부분도 많고 제 3자에 의해 변경될 수 있는 오류 발생률이 높아집니다.

RxJS를 사용하는 원인과 관계

RxJS는 ReactiveX의 자바스크립트 버전의 라이브러리입니다. RxJS는 앞서 살펴본 입력오류, 상태오류, 로직오류로 인해 발생하는 오류들을 효과적으로 처리하기 위한 최적의 라이브러리 입니다.
궁극적으로 일관된 방식으로 안전하게 데이터의 흐름을 처리를 도와주는 라이브러리입니다.
한마디로 정리하자면 범용데이터의 흐름을 제어하는 솔루션입니다.
상태 전파를 하기 위해 리액티브 프로그래밍의 패러다임도 녹아있고, 로직오류를 방지하기 위한 함수형 프로그래밍의 패러다임 기법도 사용하고 있습니다.

지금까지 RxJS를 사용하기전 간단하게 RXJS를 도입하게 되는 배경에 대해 설명드렸습니다.
다음 포스팅에서부터 RxJS의 오류방지 흐름등 RxJS의 대해 추가적으로 알아보도록 하겠습니다.

댓글