jtwjs Dev Wiki
  • DEV_ROAD
    • 💪🏻 생존하기
    • Week 1
      • 개발 환경 세팅
      • 타입스크립트
      • 리엑트
      • Testing Library
      • Parcel & ESLint
    • Week 2
      • JSX
      • Virtual DOM
    • Week 3
      • React Component
      • React State
    • Week 4
      • Express
      • Fetch API & CORS
      • React Hook
      • useRef & Custom Hook
    • Week 5
      • TDD
      • React Testing Library
      • MSW
      • Playwrite
      • Snapshot
    • Week 6
      • Separtion of Concerns
      • Principle
      • DI, (Dependency Injection)
      • Reflect-metadata
      • TSyringe
      • External Store
      • Follow Redux
      • usestore-ts
      • useSyncExternalStore
    • Week 7
      • Routing
      • Routes
      • Router
      • Navigation
    • Week 8
      • Design System
      • Style Basics
      • CSS-in-JS
      • Styled-Components
      • Global Style & Theme
    • Week 9
      • 개발하기 전 준비
      • 상품 목록 페이지
      • 상품 상세 페이지
      • 장바구니 페이지
    • Week 10
      • 로그인
      • 로그아웃
      • 회원가입
      • 주문 목록 & 주문 상세
    • Week 11
      • 배송 정보 입력
      • 포트원 결제 요청
      • 배송 및 결제 정보 전달
    • Week 12
      • 관리자 웹사이트개발시작
  • DEV_NOTE
    • TypeScript
      • 기본적 문법
        • Enum
        • 다형성
          • Untitled
        • 구조적 타이핑
        • 제너릭 타입
        • 컨디셔널 타입
        • 함수 메서드 타이핑
        • infer로 타입스크립트의 추론 직접 활용
        • 재귀 타입
        • 템플릿 리터럴 타입
        • 추가적인 타입 검사 satisfies 연산자
        • 타입스크립트 건망증
        • 원시 자료형에도 브랜딩 기법 사용 가능
        • 타입 좁히기
        • 유용한 타입 만들기
        • 데코레이터 함수
        • 앰비언트 선언도 선언 병합이 된다.
        • 앰비언트 선언도 선언병합이 된다.
    • Testing
      • Unit Testing
      • 단위 테스트의 두 분파
      • 좋은 단위 테스트를 구성하는 4대 요소
      • 테스트 대역과 식별할 수 있는 동작
      • 단위 테스트 스타일
      • 가치 있는 단위 테스트를 위한 리팩토링
      • 통합 테스트
      • Cross Browsing Testing
      • 기능 테스트 종류
      • React Testing Pattern
      • 프론트엔드 테스트 입문
        • 테스트 범위
        • 단위 테스트 검증
        • Mock
        • UI 컴포넌트 테스트
        • 테스트 커버리지
        • 웹 통합 테스트
        • MSW
        • 스토리북
        • 시각적 회귀 테스트
        • E2E 테스트
        • Github Actions 설정
        • 깃허브 액션에서 E2E
      • 시프트 레프트
        • 테스트 기본중의 기본
        • 단위 테스트
        • 코드 복잡도
        • 리팩터링
        • 코드 리뷰
        • 통합 테스트 패턴
        • 시스템 테스트의 자동화
        • 탐색적 테스트
      • Test Tip
      • vitest
      • playwright
      • Test Data Generator
      • MSW
    • Algorithm
      • coding test
      • Data Structure
    • Next.js
      • Data Fetching
      • Hydration
      • Next 13
      • Optimization
      • Next 15
    • Tailwind
      • Tailwind CSS
      • Theme
      • Directives
      • Tool
      • Design System
    • Storybook
      • Storybook
      • CSF3
      • CDD
      • Headless Component
    • Funtional Programming
      • 함수형 프로그래밍
      • 참조 투명성
      • 부수효과
      • 함수 합성
      • 제너릭 타입 활용하기
      • 암묵적 입출력
      • 액션과 계산, 데이터
      • 계층형 설계
      • 호출 그래프
      • 함수형 설계
      • 불변성
      • 일급 함수
      • 함수형 도구
    • Git
      • Github Actions
      • Conflict
      • Branch 전략
    • Contents Format
      • Audio
    • 3D Graphic
      • 3D keyword
      • Three.js
      • Geometry
      • Material
      • Light
      • Camera
      • Decal
      • Rotation
      • Text
      • Shadow
      • Fog
      • Post Processing
      • Animation
      • Math
        • Vector Space
        • 벡터의 연산
        • 회전 계산
      • 3D 컨텐츠가 만들어지는 과정
      • R3F
      • Env
      • Scene
      • Transform
      • R3F
      • Interaction & Raycast
      • Rendering Algorithnm
      • Blender
      • Blender
    • Accessibility
      • 접근성이란
    • Interactive Web
      • Parallax
      • Canvas
      • requestAnimationFrame
      • Effect
      • HSL
      • React.js + Canvas
      • Matter.js
    • AWS
      • DevOps
      • Amplify
      • S3
      • 클라우드 컴퓨팅
        • 온프레미스와 클라우드
        • 클라우드 도입효과
        • 클라우드 컴퓨팅의 범위
        • 컴퓨팅 옵션
          • EC2 - Virtual Machin
          • ECS, EKS - Container
          • Lambda - Serverless
        • 네트워크 가상화
        • 스토리지
        • 데이터베이스
        • 데이터 수집
        • 머신 러닝 영역
        • IoT 영역
        • 블록체인 영역
      • 클라우드 아키텍처 설계
    • Network
      • Web Server & WAS
    • System Design
      • System Design
      • Component
      • 의존성을 배제한 개발
      • Error Handling
      • Architecture
        • 모노로틱 아키텍처
        • Clean Architecture
        • Layered Architecture
        • 이벤트 기반 아키텍처
      • 상황을 파악하는 메타인지
      • 중복 문제 해결하기
      • Monorepo Arhitecture
        • 모노레포 운영과 트러블슈팅
        • Module Federation
      • 코드 병목지점
      • API 대응
      • 공통 코드
      • Infra 구축
      • 모듈 기반의 개발 방식
      • Design System
        • 최소 수준의 아키텍처 설정
        • 더 효율적인 디자인시스템 만들기
        • 디자인 시스템과 UI 라이브러리 목적
        • 디자인 토큰
      • 효율적인 업무
        • 업무 프로세스 병목 파악
      • Clean Code
      • Design Pattern
        • CQRS Pattern
        • Strangler Fig Pattern
        • 데코레이터 패턴
        • 커맨드 패턴
        • 전략 패턴
        • 옵저버 패턴
      • A/B 테스팅
      • 대규모 리엑트 웹앱 개발
        • 복잡성 관리
        • 모듈성
        • 성능
        • 디자인 시스템
        • 데이터 패칭
        • 상태 관리
        • 국제화
        • 코드 조직화하기
        • 개인화 A/B 테스팅
        • 확장 가능한 웹 아키텍처
        • 테스팅
        • 툴링
        • 기술적 마이그레이션
        • 타입스크립트
        • 라우팅
        • 사용자 중심 API 디자인
        • 리액트 미래
    • Performance
      • React DevTools
      • Component 최적화
      • Page Load
      • API
    • MFA
      • MSA
      • MFA 도입하기
      • Monorepo
        • Monorepo Tool
        • Yarn Berry Workspace
        • Turborepo
      • MFA Composition
      • SPA 통합
      • Design System
      • Package Manager
        • Yarn
        • pnpm
      • Transpiler & Bundler
        • Babel
        • Rollup
        • esbuild
        • swc
        • Webpack
        • Vite
      • 분해와 통합을 위한 여러 기술 비교
    • State Management
      • Zustand
    • React v18
      • Automatic batching
      • Suspense
      • Transition
    • SEO
      • Search Engine Optimization
      • Open Graph Element
      • Metadata
    • FE Develop
      • Scrubbing
      • Clipboard
    • Refactoring
      • 리팩토링 깊게 들여다보기
      • 긴 코드 조각내기
      • 타입 코드 처리하기
      • 유사한 코드 융합하기
      • 데이터 보호
      • 코드 추가 및 제거
    • OAuth 2.0
    • Analytics
      • Mixpanel
    • ETC
      • VSCode
    • React Hook In Action
      • useContext & Provider
      • 커스텀 훅
      • 코드 분할하기 with Suspense, lazy
      • Suspense와 이미지 적재하기
      • useTransition, uesDeferredValue
      • SuspenseList
Powered by GitBook
On this page
  • 액션
  • 액션 유형
  • 액션을 잘 사용하는 방법
  • 계산
  • 계산의 장점
  • 계산의 단점
  • 데이터
  • 불변성(immutable)
  • 데이터 단점
  1. DEV_NOTE
  2. Funtional Programming

액션과 계산, 데이터

함수형 프로그래밍 기술에서 코드를 액션, 계산, 데이터로 구분하는 것은 중요한 개념이다.

함수형 프로그래밍 개발자는 액션 << 계산 << 데이터 순으로 선호한다.

액션

외부 세계에 영향을 주거나 받는 것

  • 실행 시점과 횟수에 의존한다.

  • 액션은 코드 전체로 퍼져나가는 특성이 있다.

    • 액션을 부르는 함수, 또 그 함수를 부르는 함수역시 액션이 된다.

    • 이런식으로 내부의 액션이 코드 전체로 퍼져나가기 때문에 가장 바깥쪽으로 격리시키는 것이 핵심

  • 부수 효과가 있는 함수, 순수하지 않은 함수 라고 부르기도 한다.

  • 액션에서 모든 암묵적 입력과 출력을 없애지 않더라도 가능한 줄이면 좋다.

  • 액션 안에는 계산과 데이터, 또 다른 액션이 숨어있을 수 있다.

  • 코드의 많은 부분을 액션에서 계산으로 옮기면 결과적으로 액션도 다루기 쉬워진다.

액션 유형

  • 외부 동작을 제어하는 함수 ex:) alert('hello world)

  • 호출 시점에 의존적인 생성자 ex): new Date()

  • 참조 표현식 ex:) 변수 참조, 속성 참조, 배열 참조 등, 불변값이 아니란면 호출 읽는 시점에 달라질 수 있다.

  • 상태 ex:) 공유하기 위해 값을 할당했고 변경 가능하다면 다른 코드에 영향을 주기 때문에 액션이된다.

언제 호출하는지, 몇번을 호출하는지에 따라 결과가 달라진다면 액션이라고 보자.

액션을 잘 사용하는 방법

  1. 우리가 만드려는 제품은 외부와의 상호작용이 필수이므로 액션을 배제할 수 없다. 가능한 액션을 적게 사용하고 액션 대신 계산을 사용할 수 없는지 고민해보자.

  2. 액션에서 액션과 관련없는 코드는 모두 제거해서 가능한 작게 만들어야 한다. 계획과 관련된 부분은 계산으로 추출하자.

  3. 내부에 계산과 데이터들로 이루고, 바깥 쪽에 액션만 있는 구조로 분리시키자. 어니언 아키텍처

  4. 액션이 호출시점과 횟수에 덜 의존적이게 만들어야 한다.

계산

입력값으로 출력값을 만드는 행위

  • 실행 시점과 횟수에 관계없이 항상 같은 입력값에 대해 같은 출력값을 반환한다.

  • 외부에 영향을 끼치지 않는다.

  • 순수 함수, 수학 함수라고도 불린다.

  • 함수형 프로그래밍의 대부분은 계산을 가지고 작업을 한다.

  • 계산은 일반적으로 외부에 있는 액션을 통해 수행된다.

  • 계산의 정의에 따르면 암묵적 입출력이 없어야 한다.

  • 계산은 더 작은 계산과 데이터로 나누고, 연결할 수 있다.

    • 계산을 나누면 첫번째 계산의 결과가 두 번째 계산의 입력값이 된다.

계산은 우리 머릿속에서 일어나고, 사고 과정에 녹아있기 때문에 계산 단계가 잘 보이지 않을 수 있다.

계산의 장점

  • 입력에 따른 결과가 명확하기 때문에 테스트하기 용이하다.

  • 계산을 조합해 더 큰 계산을 만드는 식으로 재사용성과 확장성이 좋다.

  • 실행 시점이나, 횟수를 신경쓰지 않아도 된다.

계산의 단점

  • 계산과 액션은 실행하기전에 어떤 일이 발생할지 알 수 없다는 단점이 있다.

  • 코드를 읽어나가면서 예측은 할 수 있겠지만 결국 입력값을 넣고 실행해야 결과를 알 수 있다.

  • 이런 단점이 싫다면 데이터를 사용하자.

계산과 데이터의 차이는 실행 여부에 있다. 계산은 함수로 실행 가능하지만 데이터는 보이는 그대로 정적이므로 실행할 수 없다. 단, 계산은 실행하기 전까지 어떻게 동작할지 알 수 없다.

데이터

데이터는 이벤트의 대한 사실이다. 즉, 일어난 일의 결과를 기록한 것

  • 정적이고 데이터 자체로 의미가 있기 때문에 해석이 필요하다.

  • 실행이 필요한 코드만큼 복잡하지 않기 때문에 다른것(액션, 계산)과 구분된다.

  • 데이터를 언제나 쉽게 해석할 수 있도록 표현하는 것이 함수형 프로그래밍의 핵심 기술

  • 계산과 액션은 서로 비교하기 어렵지만, 데이터는 그 자체이므로 비교할 수 있다.

  • 데이터는 여러가지 의미로 해석될 수 있다.

불변성(immutable)

함수형 프로그래머는 불변 데이터 구조를 만들기 위해 두 가지 원칙을 사용한다.

  1. 카피-온-라이트(copy-on-write)

  2. 방어적 복사(defensive copy)

카피-온-라이트

  • 데이터를 변경하기 전 복사본을 만들어 원본 대신 복사본을 변경하고 반환

  • 무엇이 바뀌는지 알기 때문에 무엇을 복사해야 할지 예상 가능

  • 얕은 복사(shallow copy)이기 때문에 최상위 객체만 복사되고, 중첩된 객체는 복사되지 않고 같은 데이터를 참조하게 된다. 이것을 구조적 공유(structual sharing)이라 한다.

방어적 복사

  • 네이밍 그대로 외부에서 변경될 가능성이 있어 예측할 수 없는 데이터를 방어적으로 관리하고 사용하기 위함

  • 신뢰할 수 없는 코드와 데이터를 주고 받을 때 사용

  • 깊은 복사(deep copy)를 사용하여 외부에서 들어올 때, 외부로 나갈 때 모두 깊은 복사본을 만들어야 한다.

데이터 단점

  • 유연하게 해석될 수 있는 부분은 장점이지만, 해석이 반드시 필요하다는 점은 단점이다.

  • 계산은 해석하지 않아도 실행할 수 있다.

  • 해석하지 않은 데이터는 쓸모가 없다.

함수형 프로그래밍의 일반적인 구현순서

  1. 데이터

  2. 계산

  3. 액션

Previous암묵적 입출력Next계층형 설계

Last updated 1 year ago