9회차

• 기진맥진한
• 자랑스러운

• 안락한
• 짜릿한

• 피곤한
• 슬픈
  • 마지막이라니 🥲🥲🥲

• 재미있는
• 차분한

반응형 아키텍처

• 특징
  • 코드에 나타난 순차적 액션의 순서를 뒤집는다.
  • 효과와 그 효과에 대한 원인을 분리해서 코드에 복잡하게 꼬인 부분을 풀 수 있다.
• 유용한 경우
  • n x m문제가 발생하였을 때 유용하다.

반응형 아키텍처가 바꾼 시스템의 결과

• 원인과 효과가 결합한 것을 분리한다.
  • 코드가 더 유연하고 하려는 것을 정확하게 표현할 수 있다.
• 여러 단계를 파이프라인으로 처리한다.
• 타임라인이 유연해진다.

감시자 개념을 적용한 ValueCell 함수

const ValueCell = (initialValue) => {
  let value = initialValue
  const subscribers = new Set([])
 
  const val = () => {
    return value
  }
 
  const update = (fn) => {
    const oldValue = value
    const newValue = fn(oldValue)
 
    if (oldValue !== newValue) {
      value = newValue
      subscribers.forEach(subscriber => subscriber(newValue))
    }
  }
 
  const subscribe = (fn) => {
    subscribers.add(fn)
  }
 
  return {
    val,
    update,
    subscribe
  }
 
}

결합의 분리는 원인과 효과의 중심을 관리합니다

• 원인과 결과가 모두 연결되어 있기 때문에 관리해야할 것이 바꾸는 방법(원인) X 할 일 (효과)개라고 할 수 있다.
• 원인이나 효과가 늘어나면 관리해야 할 것도 늘어난다. ⇒ 원인과 효과를 분리하면 해결!
• 문제가 없는데 이 방법으로 분리하는 것은 좋지 않음

어니언 아키텍처

• 특징
  • 웹 서비스나 온도 조절 장치 같은 현실 세계와 상호작용하기 위한 서비스 구조를 만든다.
  • 인터랙션 계층을 바꾸기 쉽다. ⇒ 도메인 계층을 재사용하기 좋다.
• 구조
  • 인터랙션 > 도메인 > 언어

인터랙션 계층

• 바깥세상에 영향을 주거나 받는 액션

도메인 계층

• 비즈니스 규칙을 정의하는 계산

언어 계층

• 언어 유틸리티와 라이브러리

어니언 아키텍처 규칙

• 현실 세계와 상호작용은 인터랙션 계층에서 해야한다.
• 계층에서 호출하는 방향은 중심 방향이다.
• 계층은 외부에 어떤 계층이 있는지 모른다.

계층형 설계

• 함수 호출 관계를 기반으로 함수를 배치하는 방법

전통적인 계층형 아키텍처

Ex. 웹 서버를 만들 때 사용하는 전형적인 계층

데이터 베이스 계층이 최하단에 있다면 그 위에 모든 것이 액션이 되기 때문에 함수형 스타일이 아니다.

• 웹 인터페이스 계층
  • 웹 요청을 도메인으로 바꾸고 도메인을 웹 응답으로 바꾼다.
• 도메인 계층
  • 애플리케이션 핵심 로직으로 도메인 개념에 DB 쿼리나 명령이 들어간다.
• 데이터베이스 계층
  • 시간에 따라 바뀌는 정보를 저장한다.

꼭 기억해야 할 것 (p.544)

어떤 경우에는 액션에 계산이 숨어있다.

• 액션과 계산, 데이터를 구분하는 것은 함수형 프로그래밍 기술의 기본이다.

고차 함수를 사용하면 추상화에 대한 개념이 넓어진다.

• 똑같은 저수준의 코드를 반복적으로 만들지 않아도 된다.

코드에서 시간의 의미는 마음대로 바꿀 수 있다.

• 코드가 실행되는 순서를 이해하는 것은 매우 중요하다.

투 트랙으로 마스터가 되기

트랙 1. 샌드박스

즐겁게 기술을 연습하고 실험하는 것

• 연습 문제로 연습
• 사이드 프로젝트
• 제품 코드에서 버려진 브랜치

트랙 2. 제품

조심스럽게 실제 코드에 기술을 적용하는 것

• 이미 있는 코드를 리팩터링
• 이미 있는 프로젝트에 새로운 기능
• 새로 만드는 깨끗한 제품
• 다른 사람들을 가르치기

비동기 Queue를 보고나서 이게 너무 해보고 이 내용을 공유하고 싶었어요. 오늘 오지는 못했지만 코드랑 결과물 공유하고 갑니당. 아직 부족한 점이 많지만 뭔가 더 잘 다듬고 싶군용

• 생각난 인터페이스

   
  type Item = { text: string fn: (date: Date) => void}
  const initialItems: Item[] = []
   
  const queue = useQueue(initialItems,
      {
        select: (item) => item.fn,
        worker: (fn) => setTimeout(() => fn(new Date()), 1500),
      }
    )
   
  queue.add({ text: 'hi', fn: (date) => {
    console.log(`invoked at ${date}`)
  }})
   
  queue.clear()
  queue.items //

• 소스코드 (opens in a new tab)

• 배포된 소스 (사용해봐용)

  https://use-queue.vercel.app/react/queue (opens in a new tab)

반응형 아키텍처

• 원인과 효과 분리: 원인과 효과를 명확히 분리하여 설계함으로써 예측 가능한 시스템을 구축한다. 특정 입력에 대해 동일한 출력이 보장되어야 하며 순수 함수와 같은 개념을 반영.
• 데이터 변환의 파이프라인: 데이터는 파이프라인을 통해 변환되며, 함수형 프로그래밍에서의 함수 조합을 반영한다. 각 변환 단계는 재사용 가능하고, 순수한 함수로 구성되어야 한다.
• 복잡한 동작의 구현: 반응형 아키텍처는 다양한 계산을 조합하여 복잡한 동작을 구현한다. 고차 함수와 맵, 리듀스, 필터 같은 함수형 연산을 활용.

어니언 아키텍처

• 결합도와 응집도 관리: 어니언 아키텍처는 코드의 결합도를 낮추고 응집도를 높임으로써 모듈 간의 독립성을 강화한다.

• RX(반응형 확장 라이브러리) 활용: RX는 반응형 프로그래밍을 위한 라이브러리로, 데이터 스트림의 변화에 따라 자동으로 반응하게 해준다. 함수형 프로그래밍의 지연 평가(lazy evaluation)와 연관(?)

  const _ = require('lodash');
   
  const data = _.range(1000); // 0부터 999까지의 배열 생성
   
  const result = _.chain(data)
    .filter(n => n % 2 === 0)  // 짝수만 선택
    .map(n => n * n)           // 제곱 연산
    .take(5)                   // 처음 5개의 요소만 선택
    .value();                  // 지연 평가를 통해 연산을 실행하고 결과 값을 얻음
   
  console.log(result); // [0, 4, 16, 36, 64]

• 외부 스트림 서비스 연동: 메시지 브로커와의 연동을 통해 실시간 데이터 스트림 처리가 가능하다.

  *프랙털(fractal) : 일부 조각이 전체화 비슷한 구조, 소프트웨어 전체에 적용할 수 있지만 작은 부분에서도 적용 가능

  

Cell

• ValueCell: 기본적인 데이터 저장 단위로, 순수한 값을 저장한다. 함수형 프로그래밍에서의 불변성(immutability) 개념을 반영할 수 있다.
• 감시자 기능: Observable 패턴을 활용하여 값의 변화를 감지하고, 그에 따른 반응형 동작을 수행한다.
• FormulaCell: 다른 Cell의 값을 참조하여 새로운 값을 파생한다. 함수형 프로그래밍에서의 고차 함수와 맵(map) 연산을 생각해볼 수 있다.

반응형 아키텍쳐

• 반응형 아키텍쳐를 쓰지 않았을 때, 원인이나 효과가 바뀔 때마다 변경점이 늘어난다고 하였는데, 이게 얼마나 힘든건지 반응형을 쓰고 있지 않은 서비스를 개발하면서 뼈저리게 느끼고 있습니다 😢. JS로 ValueCell과 같은 것만 만들어도 훨씬 편하게 개발할 수 있을텐데…!

• 책에서 소개한, ValueCell, FormulaCell 같은 것이 함수형 언어 에도 있다는게 신기했습니다. 프론트엔드에서 주로 쓰는 렌더링 라이브러리나 전역 상태 관리 라이브러리에만 있을 줄 알았는데, 언어 자체에서도 지원이 된다니…!

• ValueCell, FormulaCell을 직접 구현한 코드를 잘 이해하면, 반응형을 제공하는 라이브러리의 api들이 내부적으로 어떻게 동작하는지 더 잘 이해할 수 있을 것 같네요 bb

• Svelte 5가 Runes라는 반응형을 제공할 계획 이라고 하네요 👀

  • https://svelte-5-preview.vercel.app/docs/introduction (opens in a new tab)
  • https://www.youtube.com/watch?v=RVnxF3j3N8U (opens in a new tab)

  // ValueCell
  let count = $state(0);
  // FormulaCell
  let double = $derived(count * 2);
  // ValueCell의 addWatcher
  $effect(() => {
  		// runs when the component is mounted, and again
  		// whenever `count` or `double` change,
  		// after the DOM has been updated
  		console.log({ count, double });
   
  		return () => {
  			// if a callback is provided, it will run
  			// a) immediately before the effect re-runs
  			// b) when the component is destroyed
  			console.log('cleanup');
  		};
  	});

어니언 아키텍쳐

• 어니언 아키텍쳐에서는 ‘도메인 계층’이 계산으로 만들 수 있는 부분이고, 최대한 도메인 계층을 많이 만들고, 거기에 테스트를 잘 붙여서 애플리케이션을 견고하게 설계할 수 있다는 것으로 이해했습니다.

좋았던 점

• 리액트 같은 반응형 아키텍처를 많이 사용하고 있었음에도 반응형 하면 아키텍처보다는 pub/sub 같은 디자인패턴정도로 먼저 생각이 들었었는데, 하나의 앱을 관리하는 아키텍처 규모로 생각할 수 있는 사고의 확장이 된 것 같아서 좋았습니다.
• 함수형 아키텍처라는 용어가 생소했는데, 예시로 들어준 전통형 웹 아키텍처에서 디비 부분을 액션으로 보고 계산과 분리한다는 접근이 신기했습니다. 분명 많이 써오고 있었을텐데 논리적으로 책에 기술이 되어있으니 정리하기 좋았습니다.