[Rxjs] 1부 부록

꼬프로

Categories

1부를 마치며

1.1. 입력 데이터 오류

RxJS는 동기와 비동기 입력 데이터들을 시간 축으로 가진 하나의 컬렉션(Observable)으로 보고 단일 방식으로 입력 데이터를 처리

  • 동기와 비동기 데이터를 모두 Observable로 일원화 할 수 있음

1.2. 상태 전파 오류

상태 변경을 효과적으로 즉시 반영하기 위해 기존 옵서버 패턴을 개선하여 상태 전파 문제를 해결

  • Observer는 next, error, complete의 세가지 인퍼테이스를 가짐
  • Observable은 읽기 전용이기 때문에 단방향 데이터 흐름을 가짐

1.3. 로직 처리 오류

로직상에 존재하는 반복문, 분기문, 변수를 제거하기 위해 함수형 프로그래밍 개념을 근간으로 하는 오퍼레이터를 제공

  • Observable이 제공하는 오퍼레이터를 통해 생성, 변환, 병합, 분리와 같은 다양한 연산을 적용
  • Observable에 오퍼레이터를 적용하면 항상 불변 객체를 반환

함수형 프로그래밍(functional programming)

1.1. 함수형 프로그래밍이란?

함수형 프로그래밍은 자료 처리를 수학적 함수의 계산으로 처리하고 상태 변경과 가변 데이터를 피하려는 프로그래밍 패러다임의 하나

주목해야 할 두 가지 키워드

  • 수학적 함수의 계산
  • 상태 변경과 가변 데이터를 피하려는

1.2. 수학적 함수의 계산

함수형 프로그래밍은 수학적인 계산을 이용하여 반복분, 조건문과 같은 로직의 복잡성을 더하는 문제를 쉽게 풀고자 함
함수적 기법을 이용하면 함수의 합성 및 변경을 통해 복잡한 문제를 쉽게 해결

1.3. 상태 변경과 가변 데이터를 피하려는

변수는 누군가에 의해 변경될 가능성이 있기 때문에 이로 인해 오류가 더욱 빈번하게 발생하게 됨
함수형 프로그래밍에서는 이런 변수가 외부에 명확하게 드러나게 하여 통제 가능하게 만드는 것을 지향

1.3.1. 부원인과 부작용

아래 코드는 단순히 value라는 값을 받아서 특정 작업의 결과를 반환하는 함수

function getCurrentValue(value){
	return processAt(value, new Date());
}

단순히 보기에는 getCurrentValue 함수의 입력은 value
하지만 실제로는 반환값에 영향을 미치는 new Date() 입력값이 하나 더 존재
new Date()는 외부 변수로 이 함수가 실행하는 시점에 따라서 결과를 예측하기 어려움
개발자가 함수를 통제하기 힘들며 오류 발생 확률이 높아짐

이렇게 함수의 정의만을 보고 추측하게 어려운 함수를 부원인(side cause)과 부작용(side effect)이 존재하는 함수라고 함

  • 부원인(side cause) : 함수에 드러나지 않는 입력값 또는 출력값
  • 부작용(side effect) : 부원인으로 인해 발생하는 결과

부작용이 부정적인 의미는 아니지만 개발자가 이를 고려하지 않을 경우 오류가 발생됨
함수형 프로그래밍에서는 이러한 상황이 복잡성을 초래하기 때문에 복잡성을 표면에 드러내도록 권장

아래는 개선된 코드

function getCurrentValue(value, time){
	return processAt(value, time);
}

1.3.2. 불변 데이터

function getHtml(user) {
	user.name = user.name + '님';
	return `<li class='card'>
		<dl>
			<dt>${user.name} <i class="fa fa-${user.gender}"></i></dt>
			<dd><span>키 : </span><span>${user.height} cm</span></dd>
			<dd><span>몸무게: </span><span>${user.mass} kg</span></dd>
			<dd><span>BROCA 표준체중 : </span><span>${user.broca} kg</span></dd>
			<dd><span>BROCA 비만도 : ${user.obesityUsingBroca}</span></dd>
			<dd><span>BMI 표준체중 : </span><span>${user.bmi} kg</span></dd>
			<dd><span>BMI 비만도 : ${user.obesityUsingBmi}</span></dd>
		</dl>
	</li>`;
}

user 정보를 바탕으로 html 스트링을 반환하는 함수
입력값 user, 출력값 html 스트링 외에 드러나지 않는 결과값으로 user.name의 값을 변경하고 있음

user.name = user.name + '님';

user은 가변객체이기 때문에 user 내부의 속성값인 name은 “님”이 추가된 형태로 변경
그래서 이 함수는 출력값이 명시적으로 드러나지 않는 함수, 부작용(side effect)이 존재하는 함수
가변객체를 사용하는 곳에서 동시성 작업을 하게 되면 데이터의 변경이 누구에 의해 변경되었는지 파악하기 어려움
따라서 함수형 프로그래밍은 이러한 문제를 제거하기 위해 불변 데이터 사용을 지향

불변 객체
생성 후 그 상태를 바꿀수 없는 객체
number, null, undefined, boolean, string, symbol

가변 객체
생성 후에도 상태를 변경할 수 있는 객체
Object, Array
ES5 Array 고차함수의 반환값인 Array는 가변객체지만 고차함수를 호출할 때마다 새로운 객체를 만들기 때문에 기존 객체의 상태를 변경하지 못함, 따라서 이경우는 불변객체라고 정의할 수 있음

1.4. 순수 함수, 상태가 없다

함수형 프로그래밍은 순수 함수를 지향

  • 같은 입력이 주어지면, 항상 같은 출력을 반환
  • 부작용을 발생시키지 않음
  • 외부의 가변 데이터에 의존하지 않음

순수 함수는 외부의 상태르르 변경하지도 않고 외부의 상태로부터 영향을 받지도 않음
따라서 동시성 작업을 하더라도 문제가 되지 않고 모든 입력을 제어할 수 있음

(예제보기)[https://jhgob9.github.io/rxjs/Rxjs-1%EB%B6%80-Rxjs%EA%B0%80-%ED%95%B4%EA%B2%B0%ED%95%98%EB%A0%A4%EA%B3%A0-%ED%96%88%EB%8D%98-%EB%AC%B8%EC%A0%9C-3-%EB%A1%9C%EC%A7%81%EC%98%A4%EB%A5%98/#132-%EB%B0%98%EB%B3%B5%EB%AC%B8-%EB%B6%84%EA%B8%B0%EB%AC%B8-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%ED%95%A8%EC%88%98%EC%99%80%EC%9D%98-%EC%9D%B4%EB%B3%84]{: target=”_blank” }

1.5. RxJS에 녹아 있는 함수형 프로그래밍

RxJS는
리액티브 프로그래밍 - 상태를 어떻게 전파할 것 인가? 함수형 프로그래밍 - 복잡한 문제를 외부 상태 변화 없이 어떻게 효과적으로 해결 하는가? 이 두가지 패러다임을 모두 적용

RxJS의 Observable은 고차 함수와 같은 다양한 오퍼레이터를 제공
오퍼레이터를 통해 생성된 Observable은 항상 불변 객체를 반환
오퍼레이터의 인자로 순수 함수를 받음으로써 함수형 프로그래밍이 추구하는 부원인과 부작용을 제거

LinkedIn Reddit