Clean Code Study - 2

• 작년 말에 진행한 클린코드 세션 내용 복습.
• 범위는 내 세션 이후 (Formatting) Convention 관련.

---

Formatting

Function callers and callees should be close

• 간단히 Caller와 Callee란 :
  • Caller : 특정 함수를 호출하는 애.
  • Callee : 호출 당한 함수.
• 즉, Caller와 Callee는 서로 가까이 위치해야 한다는 내용.
  • 특히 Clean Code에서는 Caller를 Callee 바로 위에 위치시키는 것이 이상적이라고 하는데, 이는 위 → 아래 방향으로 글을 읽듯이 코드를 읽을 수 있어서 가독성에 도움이 되기 때문.

// Bad Example

class PerformanceReview {
  constructor(employee) {
    this.employee = employee;
  }

  lookupPeers() {
    return db.lookup(this.employee, "peers");
  }

  lookupManager() {
    return db.lookup(this.employee, "manager");
  }

  getPeerReviews() {
    const peers = this.lookupPeers();
    // ...
  }

  perfReview() {
    this.getPeerReviews();
    this.getManagerReview();
    this.getSelfReview();
  }

  getManagerReview() {
    const manager = this.lookupManager();
  }

  getSelfReview() {
    // ...
  }
}

const review = new PerformanceReview(employee);
review.perfReview();

→ perfReview에서 getPeerReviews, getManagerReview, getSelfReview 3개의 함수를 호출하고 있음.

→ 3개의 함수를 호출하는 Caller 함수 perfReview가 자신이 호출하는 다른 함수들 사이에 껴있음.

 

// Good Example

class PerformanceReview {
  constructor(employee) {
    this.employee = employee;
  }

  perfReview() {
    this.getPeerReviews();
    this.getManagerReview();
    this.getSelfReview();
  }

  getPeerReviews() {
    const peers = this.lookupPeers();
    // ...
  }

  lookupPeers() {
    return db.lookup(this.employee, "peers");
  }

  getManagerReview() {
    const manager = this.lookupManager();
  }

  lookupManager() {
    return db.lookup(this.employee, "manager");
  }

  getSelfReview() {
    // ...
  }
}

const review = new PerformanceReview(employee);
review.perfReview();

→ Caller 함수 perfReview가 가장 앞에 위치, Callee 함수들은 밑에 위치한 구성.

 

 

Comments

Only comment things that have business logic complexity.

• Clean code 왈 : "좋은 코드는 그 자체로 스스로를 설명한다" == 좋은 코드는 주석이 달려있지 않아도 이해가 쉽다는 뜻이다.
• 그러므로 꼭 필요한 주석만 남기는 것이 바람직함.

// Bad Example

function hashIt(data) {
  // The hash
  let hash = 0;

  // Length of string
  const length = data.length;

  // Loop through every character in data
  for (let i = 0; i < length; i++) {
    // Get character code.
    const char = data.charCodeAt(i);
    // Make the hash
    hash = (hash << 5) - hash + char;
    // Convert to 32-bit integer
    hash &= hash;
  }
}

→ 코드의 내용을 불필요하게 한줄 한줄 설명하는 주석이 多

 

// Good Example

function hashIt(data) {
  let hash = 0;
  const length = data.length;

  for (let i = 0; i < length; i++) {
    const char = data.charCodeAt(i);
    hash = (hash << 5) - hash + char;

    // Convert to 32-bit integer
    hash &= hash;
  }
}

→ 필요한 내용에만 주석을 달아 설명.

 

 

Don't leave commented out code in your codebase.

• 오래 된 코드는 주석으로 남기지 말고 지우기.
  • 과거의 코드는 Version control로 확인하면 됨.

// Bad Example

doStuff();
// doOtherStuff();
// doSomeMoreStuff();
// doSoMuchStuff();

 

 

Don't have journal comments.

• 위쪽과 마찬가지로 코드의 변천사에 대해서 하나하나 주석으로 남기지 말기. 코드의 히스토리는 다른 방법으로 충분히 확인할 수 있음.

// Bad Example

/**
 * 2016-12-20: Removed monads, didn't understand them (RM)
 * 2016-10-01: Improved using special monads (JP)
 * 2016-02-03: Removed type-checking (LI)
 * 2015-03-14: Added combine with type-checking (JR)
 */
function combine(a, b) {
  return a + b;
}

 

 

Avoid positional markers

• 특수문자나 기호 등을 사용해서 코드 내 특정 부분의 위치를 표시하는 행위를 지양하라는 의미.
  • 가리킬 내용이 있다면 변수 및 함수 이름으로 그 내용을 명확히 표시할 것.
  • 들여쓰기 및 formatting 또한 적절히 활용하기.

// Bad Example

////////////////////////////////////////////////////////////////////////////////
// Scope Model Instantiation
////////////////////////////////////////////////////////////////////////////////
$scope.model = {
  menu: "foo",
  nav: "bar"
};

////////////////////////////////////////////////////////////////////////////////
// Action setup
////////////////////////////////////////////////////////////////////////////////
const actions = function() {
  // ...
};

---

아래는 스터디 당시 나눈 이야기 관련 짧은 사담.

  이 세션 당시 개발자들끼리 의견을 공유했는데, 함수 선언에 위치에 대해서는 개개인마다 생각이 갈리는 모습을 보였다. Clean Code에서 강조한대로 위 → 아래로 코드를 읽는 수직적인 구조를 편하게 생각하는 사람도 있는 반면, 함수 위치를 크게 개의치 않아하는 사람도 있었다. 나의 경우 C언어를 배운 여파로 함수 선언이 앞쪽에 있는 것이 익숙하긴 하지만, 대체로 함수 위치에 대해서는 어떻게 하든 상관 없다는 입장. 서로 의견을 공유한 끝에 함수 선언에 대해선 별다른 조건을 두지 않기로 컨벤션을 유지하기로 했다. 아무래도 코딩 컨벤션의 영역은 주관적인 만큼, Clean Code에서 강조하는 내용을 억지로 지키는 것이 정답은 아닐 수 있겠다는 생각이 들었었던.

---

→ 코드는 결국 남도 읽는 거란 걸 잊어먹을 때가 많은 것 같음.

→ 개인적으로 주석 처리 부분에서 찔리는 점 엄청 많았음...ㅋㅋㅋ 예전에 플젝할 때나 뭐 메모할 때 특수기호 많이 쓰고 버려야 할 코드도 아깝다고 남겨놨었는데, 이제 그러지 않기.

→ 또 이 세션 때 평소 사용하는 컨벤션에 대해 논의할 기회가 있었는데, 이런 시간은 일부로 만들지 않는 이상 갖기 힘들어서 특히 좋았던 것 같다.