search

Taehyeon-Kim / Taehyeon-Kim.github.io

The life of recording is unbreakable
https://taehyeon-kim.github.io
MIT License
1 stars 0 forks source link

프로그래밍 패러다임과 반응형 프로그래밍 #4

Open Taehyeon-Kim opened 10 months ago

Taehyeon-Kim commented 10 months ago

키워드

패러다임

패러다임을 알고 있어야 하는 이유

반응형 프로그래밍 패러다임

[!note]

  • 반응형 프로그래밍도 객체지향, 함수형 프로그래밍과 같이 프로그래밍을 바라보는 관점이자 결정을 하는 역할을 하는 하나의 방법론이다.
  • 반응형 프로그래밍이란 데이터의 흐름과 변경사항의 전파에 중점을 둔 선언적 프로그래밍 패러다임이다.

스프레드 시트

- A B C D
1열 1 2 =A1+B1 =A1+B1+C1

패러다임의 전환

1. 선언적 프로그래밍

명령형 vs 선언적

명령형 선언적
어떻게 하는지 알고리즘을 묘사 무엇을 해야 하는지 묘사
시간 순서대로 작성 언제 어떻게 실행되는지는 내부에서 결정
가장 일반적인 스크립트 코드 CSS, HTML, SQL, JSON, Template
컴퓨터가 이해하기 좋은 코드 기획문서에 가까운 코드

2. 변경사항의 전파(Pull -> Push)

Pull Push
관련 데이터가 필요한 시점에 데이터를 요청하는 방식 값이 변경될때마다 변경된 값을 전파해서 사용
레거시 데이터가 있거나 중복 요청이 있을 수 있음 언제나 변경된 최신의 데이터를 가지고 있음

웹을 기준으로 생각해보면 기존에는 DOM 조작을 통해 화면을 구현하는 것이 중심이기 때문에 Render를 해야 하는 시점에 필요한 데이터를 모두 불러와서 화면을 출력하는 Pull 관점에서 UI 개발을 했다. 새로운 반응형 프로그래밍의 패러다임에서는 미리 선언이 되어 있는 구조에서 값이 변화할 때마다 템플릿으로 데이터 전달하는 Push의 관점으로 설계가 되도록 변화했다.

3. 반응형 프로그래밍 패러다임으로의 전환

웹 프로그래밍은 데이터를 가져와서 화면을 만드는 방향에서 무엇을 할지 선언을 하고 변경된 데이터를 감지하고 전파하는 방향으로 패러다임이 변해왔다. 초기에는 반응형 프로그래밍 패러다임이 뷰에 집중되었다면 이후에는 뷰를 넘어 비즈니스 로직을 포함한 모든 스크립트에서 사용할 수 있도록 개념이 확장된다. 상태 관리라고 하는 것들도 데이터의 변경을 감지하고 변경을 전파하고 선언적으로 값을 만들어내는 반응형 프로그래밍 패러다임에 속하게 된다.

비동기 프로그래밍

비동기 프로그래밍이 어려운 이유

JS의 Callback

다시 반응형 프로그래밍

제어의 역전(Inversion of Control)

[ Foo ] -> [ Bar ]
// Foo.js
import Bar
function onNetworkRequest() {
  // do something
  Bar.incrementCounter(value)
}


위와 같은 문제를 해결하기 위해서 화살표의 방향을 반전시키지는 안되 화살표의 소유권을 반전시키는 식으로 해결할 수 있다.

모듈과 모듈 간의 결합 시에 참조의 주체를 바꾸어 사용하는 방법을 제어의 역전이라고 부른다. 

// Bar.js
import Foo
const incrementCounter = () => { ... }
Foo.onNetworkRequest((event) => {
  incrementCounter(event.value);
})
const p = new Promise(resolve => {
  resolve(value)
})
p.then(() => {})

제어의 역전 방식은 DOM의 Event나 Observer 패턴, Pub/Sub 패턴과 같이 오래전부터 사용해오던 방식이다. 미들웨어나 플러그인과 같은 방식에서도 이미 자주 쓰이던 방식이다. 여러 개의 모듈 간의 결합이 많아질수록 더 유리하다.

ReactiveX(Rx)

정리

Event + 선언적 = 반응형 프로그래밍
반응형 프로그래밍이란 이벤트를 선언적으로 작성하는 프로그래밍 패러다임

선언적

Stream(스트림)

// [클릭] 할 때 마다 숫자를 받아서 짝수를 2개 출력하기
Observable.fromEvent(window, "click") // [... click, ... click, ... click]
  .map(x => parseInt(Math.random() * 10))
  .filter(x => x % 2)
  .take(2)
  .forEach(x => console.log(x))
Observable.timer(1000) // [1 ... , 2 ... , 3 ... , 4 ... ]
  .map(x => parseInt(Math.random() * 10))
  .filter(x => x % 2)
  .take(2)
  .forEach(x => console.log(x))

스트림을 여러 개로 연결한다면?

Data flow 프로그래밍

함수형 프로그래밍

ReactiveX(Rx)

Operator

반응형 프로그래밍이란, 데이터의 흐름과 변경사항의 전파에 중점을 둔 선언적 프로그래밍 패러다임이다.
= 모든 것을 스트림으로 간주하고 선언적으로 개발하는 것이다.
= e.g. Array, Iterator, Promise, Callback, Event ... => 스트림이라고 하는 하나의 관점으로 간주

결론