리팩터링 #2 기본적인 리팩터링

목차

1. 리팩터링
2. 리팩터링 원칙
3. 코드에서 나는 악취
4. 테스트 구축하기
5. 리팩터링 카탈로그 보는 법
6. 기본적인 리팩터링
7. 캡슐화
8. 기능 이동
9. 조건부 로직 간소화
10. API 리팩터링
11. 상속 다루기

 

6. 1. 함수 추출하기

• 어떤 상황에서 함수 안에 새로운 함수를 추출해 밖으로 끄집어 낼지, 밖에 있는 함수를 안으로 집어 넣어야 할지 고민을 한 저자.
• 이럴 때 추출하자.
  • 가독성: 길이가 길면
  • 재사용성: 두 번 이상 쓰일 거 같으면
  • 목적과 구현을 분리: 코드가 무슨 일을 하는지 잘 모르겠다면
• 그러다보면 한 줄 짜리 함수도 생기고, 이름이 코드보다 길 때도 있지만 괜찮다. 잘하고 있어. 짧을수록 캐싱이 쉬워 컴파일러 최적화에 유리하다.
• 대신 이름을 신경써서 지어야 한다. 이름을 지을 때는 목적을 잘 드러내는 이름을 붙인다. '무엇을' 하는지가 중요.
• ⚠️ 주의할 점: 지역 변수를 사용할 때는 매개변수를 통해 전달한다.
• 절차
  1. 함수를 새로 만들고 목적을 잘 드러내는 이름을 붙인다.
  2. 추출할 코드를 원본 함수에서 복사하여 새 함수에 붙여넣는다.
  3. 추출한 코드 중 원본 함수의 지역 변수를 참조하거나 추출한 함수의 유효범위를 벗어나는 변수는 없는지 검사한다. 있다면 매개변수로 전달한다.
  4. 변수를 다 처리했다면 컴파일한다.
  5. 원본 함수에서 추출한 코드 부분을 새로 만든 함수를 호출하는 문장으로 바꾼다.
  6. 테스트한다.
  7. 다른 코드에 방금 추출한 것과 똑같거나 비슷한 코드가 없는지 살핀다. 있다면 방금 추출한 새 함수를 호출하도록 바꿀지 검토한다.

/* 함수 추출 전 */
function printOwing(invoice) {
	printBanner();
    let outstanding = calculateOutstanding();
    
    //세부 사항 출력
    console.log(`고객명: ${invoice.customer}`);
    console.log(`채무액: ${outstanding}`);
}

/* 함수 추출 후 */
function printOwing(invoice) {
	printBanner();
    let outstanding = calculateOutstanding();
    printDetails(outstanding);
    
	function prinDetails(outstanding) {
    	console.log(`고객명: ${invoice.customer}`);
    	console.log(`채무액: ${outstanding}`);
    }
}

아주 쉬운 기초 예시

 

6. 2. 함수 인라인하기

• 위의 경우와 반대라고 생각하자.
• 이럴 때 인라인하자.
  • 함수 본문이 이름만큼 명확하면
  • 본문 코드가 이름만큼 깔끔하면
• ⚠️ 주의할 점: 다형 메서드일 경우, 서브클래스에서 오버라이드하는 메서드가 오작동을 일으킬 수 있다.
• 절차
  1. 다형 메서드인지 확인한다.
  2. 인라인할 함수를 호출하는 곳을 모두 찾는다.
  3. 각 호출문을 함수 본문으로 교체한다.
  4. 하나씩 교체할 때마다 테스트한다.
  5. 함수 정의(원래 함수)를 삭제한다.

 

6. 3. 변수 추출하기

• 표현식이 복잡해서 혼란하다. 지역 변수로 정리하자.
• 코드의 목적이 명확해지고, 디버깅에도 도움이 된다니 개이득.
• 특히 덩치가 커지면, 객체 다룰 때 유용하다.
• 절차
  1. 추출하려는 표현식에 부작용은 없는지 확인한다.
  2. 불변 변수를 하나 선언하고 이름을 붙일 표현식의 복제본을 대입한다.
  3. 원본 표현식을 새로 만든 변수로 교체한다.
  4. 테스트한다.
  5. 표현식을 여러 곳에서 사용한다면 각각을 새로 만든 변수로 교체한다. 하나 교체할 때마다 테스트한다.

 

6. 4. 변수 인라인하기

• 변수는 함수 안에서 표현식을 가리키는 이름으로 쓰인다.
• 그러나 방해되면 인라인하는 것이 좋다.
• 절차
  1. 대입문의 우변(표현식)에서 부작용이 생기지는 않는지 확인한다.
  2. 변수가 불변으로 선언되지 않았다면 불변으로 만든 후 테스트한다.
  3. 이 변수를 가장 처음 사용하는 코드를 찾아서 대입문 우변의 코드로 바꾼다.
  4. 테스트한다.
  5. 변수를 사용하는 부분을 모두 교체할 때까지 이 과정을 반복한다.
  6. 변수 선언문과 대입문을 지운다.
  7. 테스트한다.

 

6. 5. 함수 선언 바꾸기

• 함수는 프로그램을 작은 부분으로 나누는 주된 수단이다.
• 매개변수는 함수가 외부 세계와 어우러지는 방식을 정의하며 함수를 사용하는 문맥을 설정한다.
• 이럴 때 바꾸자.
  • 함수 선언과 호출문들을 단번에 고칠 수 있다면 -> 간단한 절차 (IDE의 힘!)
  • 여기저기 다 불려가고 빵셔틀 하고 있고, 복잡하고, IDE 기능도 쓰지 못하면 -> 마이그레이션
• 마이그레이션: 함수를 하나씩 바꾸기 힘들 때 쓴다. 바꿀 함수를 인라인 하고 새로 함수를 만든다. 하나씩 만들면서 모두 바꾸면 기존 함수 삭제하는 방법. 자바스크립트에서는 쓸 일이 없을 듯 하다. 뛰어난 IDE의 모두 바꾸기 기능이 있으니.
• 절차
  1. 매개변수를 제거하려거든 먼저 함수 본문에서 제거 대상 매개변수를 참조하는 곳은 없는지 확인한다.
  2. 메서드 선언을 원하는 형태로 바꾼다.
  3. 기존 메서드 선언을 참조하는 부분을 모두 찾아서 바뀐 형태로 수정한다.
  4. 테스트한다.