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
  • 리팩토링할 코드 식별하기
  • 코드의 네 가지 유형
  • 지나치게 복잡한 코드 리팩토링하기
  • 험블 객체 패턴
  • 단계 별로 리팩토링하기
  • 1. 암시적 의존성을 명시적으로 만들기
  • 2. 애플리케이션 서비스 계층 도입
  1. DEV_NOTE
  2. Testing

가치 있는 단위 테스트를 위한 리팩토링

제품 코드와 테스트 코드는 본질적으로 관련돼 있기 때문에 테스트 스위트를 개선시키기 위해서는 제품 코드를 리팩토링해야 한다. 다른 방도는 없다.

좋지 않은 테스트를 작성하는 것보다는 테스트를 작성하지 않는 것이 더 좋다. 가치가 별로 없는 테스트는 좋지 않은 테스트이다.

리팩토링할 코드 식별하기

  • 코드 복잡도와 도메인 유의성

    • 코드 복잡도 → 코드 내 분기(결정) 지점 수로 정의하고, 클수록 복잡도가 더 높아짐 (복잡한 코드는 보통 도메인 유의성이 높다.)

    • 도메인 유의성 → 도메인에 대해 얼마나 의미있는지를 나타냄. 즉, 최종 사용자의 목표와 직접적인 연관성이 있으면 유의성이 높다.

  • 코드 내의 협력자 수

    • 프로세스 외부 의존성 → 외부 애플리케이션 또는 서비스와 상호작용하는 경우

    • 가변 의존성 → 의존하는 객체가 시간에 따라 다른 요소로 변경되는 경우

    • 협력자가 많은 테스트는 의존성을 목킹하고 준비하는 코드가 필요하므로 테스트 크기가 늘어나 유지보수성이 낮아진다.

코드의 네 가지 유형

  • 도메인 모델과 알고리즘

    • 협력자가 거의 없으며, 도메인 모델이거나 도메인과 관련 없지만 복잡한 알고리즘을 가진 코드

    • 단위 테스트를 수행하기 가장 적절한 유형, 복잡하거나 중요한 로직은 회귀방지가 뛰어나기 때문에 가치가 있다.

    • 도메인 유의성이 높은 코드는 프로세스 외부 협력자를 사용해선 안된다.

  • 간단한 코드

    • 간단한 코드는 대부분 협력자가 없고 복잡도와 도메인 유의성이 거의 없는 편이라 테스트를 작성할 필요가 없다.

  • 컨트롤러

    • 비즈니스에 중요한 작업을 하지 않고, 분리된 도메인 로직과 외부 의존성을 컨트롤하는 부분

    • 통합 테스트로 간단히 테스트

  • 지나치게 복잡한 코드

    • 테스트가 필요하지만 가장 작성하기 어려운 유형 (협력자가 많고, 복잡성이 높은 유형)

    • 좋지 않은 테스트를 작성하는 것보다 전혀 작성하지 않는 편이 낫다.

    • 복잡한 코드와 컨트롤러로 분리하는 리팩토링이 필요하다.

코드에 중요한 로직이 포함되있거나 복잡성이 증가할수록 반비례해서 협력자 수가 적어져야 한다.

지나치게 복잡한 코드 리팩토링하기

지나치게 복잡한 코드를 도메인 모델과 알고리즘과 컨트롤러 두 부분으로 쪼개보자.

험블 객체 패턴

테스트하기 쉬운 비즈니스 로직과 테스트하기 어려운 프로세스 외부 의존성을 분리하는 디자인 패턴

테스트하기 어려운 부분이 험블 객체(컨트롤러)가 된다.

  • 헥사고날 아키텍처, 함수형 아키텍처는 험블 객체 패턴을 구현한다.

  • 지나치게 복잡한 코드에서 로직을 추출해 코드를 테스트할 필요가 없도록 만든다.

  • 험블 객체 패턴은 단일 책임 원칙을 따라 비즈니스 로직과 오케스트레이션으로 분리한다.

    • 코드의 깊이와 너비 관점으로 책임을 나눌 수 있다. 깊을수록 복잡하고 넓을수록 협력자가 많다. 둘 다는 없다.

  • 코드가 복잡하고 중요한 경우 도메인 모델과 알고리즘 유형으로, 협력자와 상호작용하는 코드를 컨트롤러 유형으로 옮긴다.

오케스트레이션이란 애플리케이션을 관리하고 실행하는 컨트롤러의 역할을 의미한다.

단계 별로 리팩토링하기

1. 암시적 의존성을 명시적으로 만들기

  • 관심사를 분리해서 의존성을 명시적으로 주입하는 형태로 리팩토링한다.

  • 테스트에서 의존성을 목으로 처리할 수 있게 된다.

  • 단, 도메인 모델은 직접적이든, 간접적이든 프로세스 외부 협력자에게 의존하지 않는 것이 좋다.

2. 애플리케이션 서비스 계층 도입

  • 도메인 모델은 일반적으로 내부 의존성에만 의존해야하기 때문에 외부 시스템과 직접 상호작용하는 것을 피해야 한다.

  • 도메인 모델이 외부 시스템과 직접 상호작용하는 문제를 해결하기 위해 험블 객체(컨트롤러)로 책임을 옮겨야 한다.

  • 애플리케이션 서비스 계층의 역할은 복잡도나 도메인 유의성과 관련된 로직이 아니라 오케스트레이션만 해당된다.

Previous단위 테스트 스타일Next통합 테스트

Last updated 1 year ago