노트

구성요소 줄이기

Fewest Elements

설계#refactoring · 연결된 개념 14개

쉽게 말하면

구성요소 줄이기는 짐을 쌀 때 물건 하나하나가 다 무게라고 보는 관점이에요. 파일, 함수, 변수, 분기도 하나 늘 때마다 찾고 이해하고 바꾸는 비용이 붙으니, 꼭 필요한 것만 챙겨요.

비유가 깨지는 곳 무조건 덜어 내라는 게 아니라, 이번 변경이 중복을 없애거나 요소를 줄였는지 묻는 거예요. 반대로 테스트할 필요도 없을 만큼 자명한 함수로 잘게 쪼개는 것도 요소만 늘린 거예요.

셀 수 있는 모든 구성요소(파일, 폴더 깊이, 클래스, 함수, 분기, 변수, 테이블, 필드, 테스트 케이스…)는 비용이라는 관점. 심플 디자인의 네 번째 규칙을 실무 기준으로 풀어낸 것이다.

왜 비용인가

  • 찾는 비용: 폴더가 깊고 파일이 많으면 탐색이, 비슷한 이름이 많으면 검색이 어려워진다
  • 이해하는 비용: 분기가 많으면 흐름을, 변수가 많으면 상태를 머리에 담아야 한다(인지 부하). 호출 스택이 깊으면 전체 동작을 그리기 어렵다
  • 바꾸는 비용: 계층과 파일이 많은 구조는 변경할 때도 그만큼 많이 고쳐야 한다. 중복처럼 많은 구성요소도 변경에 저항한다

무엇부터 줄이나

  • 분기: 독립 실행 경로 수(순환 복잡도, Cyclomatic Complexity)는 측정 도구로 셀 수 있다
  • 상태: 재사용되지 않는 지역 변수, 인덱스 변수(반복은 파이프라인으로), 중간 연산용 멤버 변수
  • 예외 처리 코드: 대부분은 잡지 말고 던져서 경계에서 한 번에 처리한다(예외 처리 원칙)
  • 테스트 케이스: 커버리지가 겹치는 테스트가 많으면 한 번 고칠 때 여러 개가 깨져 오히려 변경을 막는다. 커버리지는 유지하며 겹침을 줄인다(테스트 냄새)

함수 크기의 기준(강의의 제안)

위로는 스크롤 없이 한눈에(대략 15줄 안팎), 인자 4개·지역 변수 3개 이내. 아래로는 테스트를 만들 필요도 없을 만큼 자명하거나 바깥에서 쓸 일이 전혀 없다면 너무 작게 쪼갠 것이다. 중복이 없는데 쪼개는 추출은 요소만 늘린다(함수 추출하기).

비즈니스 가치가 없는 일, 예컨대 폴더 깊이 맞추기 같은 과도한 일관성을 위해 요소를 늘리지 않는다. 좋은 점검 질문: 이번 리팩터링이 중복을 없애거나 구성요소를 줄였나? 아니라면 품질을 개선한 게 아니다.

출처: 인프런 『심플 디자인』 박영록

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • 번들 크기 줄이기

    번들 다이어트는 사용자가 내려받는 JavaScript 양을 측정하고 줄이는 작업이다. 같은 용량이라도 JS는 이미지보다 비싸다. 이미지는 다운로드와 디코딩만 하면 되지만, JS는 다운로드·파싱·컴파일·실행을 모두 거친다.

  • 리팩터링 기법 카탈로그

    리팩터링 기법을 무엇을 정리하는지에 따라 묶어 본 지도. 기법마다 거의 항상 반대 방향 기법이 짝으로 있어서(추출↔인라인, 올리기↔내리기) 상황에 따라 양쪽으로 오간다. 아래 묶음은 Refactoring.Guru 카탈로그(1판 기반)의 분류를 따랐고, 기법 이름은 2판 기준으로 적었다.

  • 재귀

    함수가 자기 자신을 다시 호출해 문제를 푸는 방식. 같은 함수를 점점 작은 입력으로 부르다가 더 나눌 필요가 없는 지점(기저 조건, Base Case)에서 멈춘다.

  • 청킹과 코드 읽기

    여러 정보를 의미 있는 덩어리 하나로 묶어 기억하는 것. 아는 것이 많을수록 코드를 큰 덩어리로 읽는다.

  • 변경하기 쉬운 프런트엔드 코드

    Frontend Fundamentals는 "좋은 프런트엔드 코드 = 변경하기 쉬운 코드"라는 관점에서 가독성(Readability)·예측 가능성(Predictability)·응집도(Cohesion)·결합도(Coupling) 네 기준과 구체적인 기법을 정리한 공개 가이드다. 네 기준은 서로 부딪치기도 해서 상황에 맞게 무엇을 우선할지 고르는 것이 핵심이다.

보기 옵션