wldnswldnswl / IknowJS

You Don't Know JS 스터디
1 stars 1 forks source link

[쏙쏙] 8장. 계층형 설계1 #152

Closed wldnswldnswl closed 1 year ago

wldnswldnswl commented 1 year ago

도입

소프트 웨어 설계란?

계층형 설계란?

계층형 설계 패턴 (4가지)

여러 방향에서 계층형 설계를 살펴볼 수 있지만 그 중 중요한 네 가지 패턴을 소개하겠다.

패턴1. 직접 구현

패턴2. 추상화 벽

패턴 3. 작은 인터페이스 시스템이 커질수록 비지니스 개념을 나타내는 중요한 인터페이스는 작고 강력한 동작으로 구성하는 것이 좋다. 다른 동작도 직간접적으로 최소한의 인터페이스를 유지하면서 정의해야 한다.

패턴 4. 편리한 계층 계층형 설계 패턴과 실천 방법은 개발자의 요구를 만족시키면서 비지니스 문제를 잘 풀수있어야한다. 소프트웨어를 더 빠르고 고품질로 제공하는데 도움이 되는 계층에 시간을 투자해야한다.

-> 말들이 너무 추상적... 구체적인 예시를 보고 이해해보자. 이번장은 패턴1까지만 소개한다.

패턴1. 직접 구현

어떻게 하면 구현된 코드를 잘 읽을 수 있을까? 예시1) 넥타이를 사면 무료로 넥타이 클립을 주는 코드

image

장바구니를 돌면서 넥타이나 넥타이 클립이 있는지 확인하고, 타이가 있으면서 클립이 없으면 클립을 추가한다.

-> 많은 기능이 들어있다. 코드를 설계하지 않고 그냥 기능을 추가한것! (뜨끔!) 이 코드느 직접 구현을 따르고 있지 않다. freeTieClip()함수가 알아야할 필요없는 내용들을 담고있다. 장바구니가 배열이라는 사실을 알아야 할까? 장바구니 배열을 돌다가 off-by-one에러가 생기면 실패할까? *off-by-one: 주로 배열을 반복 처리할때 "크다","크거나 같다"와 같은 비교문을 잘못 선택해 의도하지 않게 마지막 항목을 잘못처리하는 오류. (포함되어야할게 포함 안되거나 그 반대)

장바구니가 해야할 동작

장바구니 설계 개선을 위해 장바구니가 해야할 동작을 정리해보았다.

-> 장바구니에 제품이 있는지 확인하는 메서드를 만들면 freeTieClip에서도 사용할 수 있다.

image

위 처럼 isInCart로 메서드를 빼면, 함수가 짧고 명확하다. 또 비슷한 구체화 수준에서 작동하기 떄문에 읽기 쉽다!

호출 그래프를 만들어 함수 호출을 시각화하기.

다른 관점으로 freeTIeClip메서드를 살펴보자. 함수에서 사용하는 다른 함수와 언어 기능을 구분하여 그래프로 그려보았다. (아래) 이때 언어 기능은 더 하위 계층, 직접 구현한 메서드는 더 상위 계층으로 추상화 수준을 다르게 표현할수있다.

image

개선 후 다이어그램은 추상화 단계가 같아진다.

image

정확히 같으나 추상화단계인지는 알수없지만 비슷한 추상화 단계(직접구현)이다.
개선된 함수에서는 장바구니가 배열인지 알필요없다.!

같은 계층에 있는 함수는 같은 목적을 가져야 한다.

image

3단계 줌 레벨

다이어그램에서 문제를 찾을수도 있다. 다이어그램에는 많은 정보가 있어 어느곳에 문제가 있는지 찾기 까다롭다. 계층형 설계에서는 세 가지 다른 영역에서 문제를 찾아볼수있다.

  1. 계층 사이에 상호관계
  2. 특정 계층의 구현
  3. 특정 함수의 구현

문제를 찾기 위해 알맞은 줌레벨을 사용해 하나의 영역을 살펴볼수있다.

1. 전역 줌 레벨

image
  1. 계층 줌 레벨 한 계층과 연결된 바로 아래 계층을 볼수있다. 계층이 어떻게 구현되어있는지 볼수있다. image

계층 줌레벨로 보면, 함수가 가리키는 화살표를 계층 간 비교할 수 있다.

image

-> 화살표 길이가 다름 = 다른 계층을 가리킨다라는것은 구체화 수준이 같지 않다는 것을 뜻한다.

  1. 함수 줌 레벨 함수 하나와 바로 아래 연결된 함수들을 볼수있다. 함수 구현의 문제를 찾을 수 있다. image

함수가 가리키는 모든 화살표를 볼 수 있다.

image

직접 구현 패턴을 이용하려면 모든 하위 함수가 같은 계층이여야 한다. (= 화살표 길이가 같아야한다)

위 예시를 어떻게 같은 길이로 만들수있을까? 가장 일반적인 방법은 중간에 함수를 두는 것이다.

반복문 빼내기

아래처럼 아이템의 인덱스를 구하는 부분을 함수로 빼면 removeItem과 같은 계층의 메서드를 가리키게된다.

image

remove_item_by_name이 더 읽기 쉬어졌고, 다이어그램에서도 보기 쉬워졌다.

image

함수는 배열에 있는 항목이 name속성을 가지고 있다는 것은 알지만, 배열에 들어있는 항목이 어떻게 생겼는지까지는 알필요없다는 것을 의미하기도 한다!

직접 구현 패턴 리뷰