[클린코드] 5. 형식 맞추기

읽은 날짜 : 2024.08.29
지은이 : 로버트 C. 마틴
출판사 : 인사이트 

 

✔️ 기억하고 싶은 내용

왜 형식을 맞춰야 하는가?

• 코드 형식은 의사소통의 일환이다.
• 코드는 바뀔지라도 처음 잡아놓은 구현 스타일과 가독성 수준은 사라지지 않는다.
• 앞으로 바뀔 코드의 품질에 지대한 영향을 미친다.

 

소통을 원활하게 하는 코드 형식 1 : 세로 형식 맞추기

1. 적절한 세로 길이

• 일반적으로 큰 파일보다는 작은 파일이 이해하기 쉽다.
• 엄격하게 지킬 필요는 없지만 200줄 정도가 적당하다.

2. 빈 행으로 분리하기

• 빈 행은 새로운 개념을 시작한다는 시각적 단서이다.
• 일련의 행 묶음은 완결된 생각 하나를 표현한다. 생각 사이에는 빈 행을 넣어 분리한다.
• 패키지 선언부, import 문, 각 함수 사이에 빈 행을 넣어서 가독성을 높이자.

3. 세로 밀집도 : 서로 밀접한 코드 행은 세로로 가까이 놓기 

• 같은 파일 안에 위치한다.
• 변수는 사용하는 위치에 최대한 가까이 선언한다.
• 인스턴스 변수는 클래스 맨 처음에 선언한다. 여러 클래스 메서드가 사용하기 때문에 한 곳으로 모은다.
• 한 함수가 다른 함수를 호출한다면 두 함수는 세로로 가까이 배치한다. ➡️ 개념적 유사성
  • 가능하다면 호출하는 함수를 호출되는 함수보다 위에 배치한다. (고차원 ➡️ 저차원)
  • 호출하는 함수 바로 아래에 호출되는 순서대로 배치하면 가독성이 좋아진다.
• 종속성이 없더라도 기능이 유사한 함수도 가까이 배치한다.

 

소통을 원활하게 하는 코드 형식 2 : 가로 형식 맞추기

1. 한 행의 길이를 짧게 유지하기

• 100~120자 정도로 제한할 것을 권장한다.

2. 가로 밀집도 : 적절한 공백을 두기

• 할당문 공백 : int lineSize = line.length();
• 함수 인수 공백 : function f1(a, b, c) { }
• 연산자 우선순위 공백 : reutrn b*b - 4*a*c

3. 가로 밀집도 : 정렬과 들여쓰기

• 간단한 if 문이라도 들여쓰기를 권장한다.

// Bad ❌
if (a) return true;

// Good ✅
if (a) {
  return true;
}

 

 

✔️ 오늘 읽은 소감

코드 형시에 있어서 '적절함'의 기준이 항상 애매하게 느껴졌었는데, 이번 챕터를 통해 구체적으로 정리할 수 있었다.

코드의 연관성, 밀집도를 위해 코드의 배치, 공백을 적절히 활용해야 한다는 것을 알게 되었다.

추가적으로 JavaScript Standard Style도 활용해서 eslint 규칙을 커스텀 해봐도 좋겠다는 생각이 들었다.

 

✔️ 궁금한 내용 & 잘 이해되지 않는 내용

p.103

• C++ 가위 규칙(scissors-rule)
  • 모든 인스턴스 변수를 클래스 마지막에 선언한다. 

p.105

• 저차원 함수에서 상수를 사용할 때, 상수를 알아야 마땅한 함수에서 실제로 사용하는 함수로 상수로 넘겨주는 방법이 더 좋다.
  • 고차원 함수 : 더 추상화된 레벨의 함수. 주로 비즈니스 로직이나 높은 수준의 기능을 다룬다.
  • 저차원 함수 : 구체적이고 상세한 구현을 담당하는 함수. 주로 세부적인 기능을 처리한다.
  • 고차원 함수에서 저차원 함수로 상수를 전달함으로써, 고차원 함수가 세부적인 로직을 신경 쓰지 않고 저차원 함수에게 특정한 작업을 위임할 수 있다.

// 고차원 함수
function calculateTotalPrice(price, quantity) {
  const taxRate = 0.1; // 세율 상수

  // 저차원 함수 호출
  const totalPrice = calculatePriceWithTax(price, quantity, taxRate);

  console.log(`Total Price: $${totalPrice}`);
}

// 저차원 함수
function calculatePriceWithTax(price, quantity, taxRate) {
  // 세금을 고려한 총 가격 계산
  const totalPrice = price * quantity * (1 + taxRate);
  return totalPrice;
}

// 고차원 함수 호출
calculateTotalPrice(20, 3);