형식 맞추기

Hant·2021년 11월 2일
0

Clean Code

목록 보기
4/13
post-thumbnail
post-custom-banner

1. 형식을 맞추는 목적

코드 형식은 의사소통의 일환입니다. 의사소통은 전문 개발자의 일차적인 의무입니다. 구현한 코드의 가독성은 앞으로 바뀔 코드의 품질에 지대한 영향을 미칩니다. 오랜 시간이 지나 원래 코드의 흔적을 더 이상 찾아보기 어려울 정도로 코드가 바뀌어도 맨 처음 잡아놓은 구현 스타일과 가독성 수준은 유지보수 용이성과 확장성에 계속 영향을 미칩니다. 원래 코드는 사라질지라도 개발자의 스타일과 규율은 사라지지 않습니다.

2. 적절한 행 길이를 유지하라

소스 코드는 세로로 얼마나 길어야 적당할까? 500줄을 넘지 않고 대부분 200줄 정도인 파일로 커다란 시스템을 구축할 수 있습니다. 일반적으로 큰 파일보다 작은 파일이 이해하기 쉽습니다.

2.1. 신문 기사처럼 작성하라

소스 파일도 신문 기사와 비슷하게 작성합니다. 이름은 간단하면서도 설명이 가능헤게 짓습니다. 이름만 보고도 올바른 모듈을 살펴보고 있는지 아닌지를 판단할 정도로 신경 써서 짓습니다. 소스 파일 첫 부분은 고차원 개념과 알고림즘을 설명합니다. 아래로 내려갈수록 의도를 세세하게 묘사합니다. 마지막에는 가장 저차원 함수와 세부 내역이 나옵니다.

신문은 다양한 기사로 이뤄집니다. 대다수 기사가 아주 짧습니다. 어떤 기사는 조금 깁니다. 한 면을 채우느 기사는 거의 없습니다. 신문을 읽을 만한 이유는 여기에 있습니다. 신문이 사실, 날짜, 이름 등을 무작위로 뒤섞은 긴 기사 하나만 싣는다면 아무도 읽지 않습니다.

2.2. 개념은 빈 행으로 분리하라

각 행은 수식이나 절을 나타내고, 일련의 행 묶음은 완결된 생각 하나를 표현합니다. 생각 사이는 빈 행을 넣어 분리해야 마땅합니다. 예를 들어, 패키지 선언부, import 문, 각 함수 사이에 빈 행이 들어갑니다. 너무도 간단한 규칙이지만 코드의 세로 레이아웃에 심오한 영향을 미칩니다. 빈 행은 새로운 개념을 시작한다는 시각적 단서입니다. 코드를 읽어 내려가다 보면 빈 행 바로 다음 줄에 눈길이 멈춥니다.

import { ParentWdiget } from "./widgets.js";

class BoldWidget extends ParentWdiget {
  public static readonly RECEXP = "'''(.+?)''";
  private static readonly pattern = new RegExp(BoldWidget.RECEXP);

  constructor(parent: ParentWdiget, text: string) {
    super(parent);
    const match = text.match(BoldWidget.pattern);
    this.addChildWidgets(match[1]);
  }

  render() {
    return `<b>${this.childHtml()}</b>`;
  }
}

2.3. 세로 밀집도

줄바꿈이 개념을 분리한다면 세로 밀집도는 연관성을 의미합니다. 즉, 서로 밀접한 코드 행은 세로로 가까이 놓여야 한다는 뜻입니다. 아래 코드는 척 보면 변수 2개에 메서드가 1개인 클래스라는 사실이 드러납니다. 머리나 눈을 움직일 필요가 거의 없습니다.

class ReporterConfig {
  private m_className: string;
  private m_properties: Property[] = [];

  public addProperty(property: Property): void {
    this.m_properties.push(property);
  }
}

2.4. 수직 거리

서로 밀접한 개념은 세로로 가까이 둬야 합니다. 물로 두 개념이 서로 다른 파일에 속한다면 규칙이 통하지 않습니다. 하지만 타당한 근거가 없다면 서로 밀접한 개념은 한 파일에 속해야 마땅합니다. 이게 바로 protected 변수를 피해야 하는 이유 중 하나입니다.

같은 파일에 속할 정도로 밀접한 두 개념은 세로 거리로 연관성을 표현합니다. 여기서 연관성이란 한 개념을 이해하는 데 다른 개념이 중요한 정도입니다. 연관성이 깊은 두 개념이 멀리 떨어져 있으면 코드를 읽는 사람이 소스 파일과 클래스를 여기저기 뒤지게 됩니다.

변수 선언

변수는 사용하는 위치에 최대한 가까이 선언합니다. 우리가 만든 함수는 매우 짧으므로 지역 변수는 각 함수 맨 처음에 선언합니다. 루프를 제어하는 변수는 흔히 루프 문 내부에 선언합니다. (예를 들어, for문의 i) 아주 드물지만 다소 긴 함수에서 블록 상단이나 루프 직전에 변수를 선언하는 사례도 있습니다.

인스턴스 변수

인스턴스 변수는 클래스 맨 처음에 선언합니다. 변수 간에 세로로 거리를 두지 않습니다. 잘 설계한 클래스는 많은 (혹은 대다수) 클래스 메서드가 인스턴스 변수를 사용하기 때문입니다.

인스턴스 변수를 선언하는 위치는 아직도 논쟁이 분분합니다. 일반적으로 C++에서는 모든 인스턴스 변수를 클래스 마지막에 선언한다는 소위 가위 규칙(Scissors Rule)을 적용합니다. 하지만 자바에서는 보통 클래스 맨 처음에 인스턴스 변수를 선언합니다. 어느 쪽이든 이의가 없습니다. 잘 알려진 위치에 인스턴스 변수를 모은다는 사실이 중요합니다.

종속 함수

한 함수가 다른 함수를 호출한다면 두 함수는 세로로 가까이 배치합니다. 또한 가능하다면 호출하는 함수를 호출되는 함수보다 먼저 배치합니다. 그러면 프로그램이 자연스럽게 읽힙니다. 규칙을 일관적으로 적용한다면 독자는 방금 호출한 함수가 잠시 후에 정의되리라는 사실을 예측합니다.

class WikiPageResponder implements SecureResponder {
  protected page: WikiPage;
  protected pageData: PageData;
  // ...

  makeResponse(context: FitNesseContext, request: Request): Response {
    const pageName: string = this.getPageNameOrDefault(request, "FrontPage");
    // ...
  }

  private getPageNameOrDefault(request: Request, defaultPageName: string): string {
    let { pageName } = request.body;
    if (!pageName) {
      pageName = defaultPageName;
    }

    return pageName;
  }

  // ...
}

참고로, 위 코드는 상수를 적절한 수준에 두는 좋은 예제입니다. getPageNameOrDefault 함수 안에서 FrontPage 상수를 사용하는 방법도 있습니다. 하지만 그러면 그대와는 달리 잘 알려진 상수가 적절하지 않은 저차원 함수에 묻힙니다. 상수를 알아야 마땅한 함수에서 실제로 사용하는 함수로 상수를 넘겨주는 방법이 더 좋습니다.

개념 유사성

어던 코드는 서로 끌어당깁니다. 개념적인 침화도가 높기 때문입니다. 친화도가 높을수록 코드를 가까이 배치합니다.

친화도가 높은 요인은 여러 가지입니다. 앞서 보았듯이, 한 함수가 다른 함수를 호출해 생기는 직접적인 종속성이 한 예입니다. 변수와 그 변수를 사용하는 함 예입니다. 하지만 그 외에도 친화도를 높이는 요인이 있습니다. 비슷한 동작을 수행하는 일군의 함수가 좋은 예입니다.

3. 가로 형식 맞추기

한 행은 가로로 얼마나 길어야 적당할까? 옛날 홀러러스(Hollerith)가 내놓은 80자 제한은 다소 인위적입니다. 요즘은 모니터가 아주 큽니다. 100자나 120자에 달해도 나쁘지 않습니다. 하지만 그 이상은 솔직히 주의부족입니다.

3.1. 가로 공백과 밀집도

가로로는 공백을 사용해 밀접한 개념과 느슨한 개념을 표현합니다. 다음 함수를 살펴봅니다.

private measureLine(line: string): void {
  this.lineCount += 1;
  const lineSize = line.length;
  this.totalChars += lineSize;
  this.lineWidthHistogram.addLine(this.lineSize, this.lineCount);
  this.recordWidestLine(lineSize);
}

할당 연산자를 강조하려고 앞뒤에 공백을 줬습니다. 할당문은 왼쪽 요소와 오른쪽 요소가 분명히 나뉩니다. 반면, 함수 이름과 이어지는 괄호 사이에는 공백을 넣지 않았습니다. 함수와 인수는 서로 밀접하기 때문입니다. 공백을 넣으면 한 개념이 아니라 별개로 보입니다. 함수를 호출하는 코드에서 괄호 안 인수는 공백으로 분리했습니다. 쉼표를 강조해 인수가 별개라는 사실을 보여주기 위해서입니다.

3.2. 가로 정렬

아래와 같은 정렬은 별로 유용하지 못합니다. 코드가 언뚱한 부분을 강조해 진짜 의도가 가려지기 떄문입니다. 예를 들어, 아래 선언부를 읽다 보면 변수 유형은 무시하고 변수 이름부터 읽게 됩니다. 마찬가지로, 아래 할당문을 훑어보면 할단 연산자는 보이지 않고 오른쪽 피연사자에 눈이 갑니다. 설상가상으로, 코드 형시을 자동으로 맞춰주는 도구는 대다수가 아래와 같은 정렬을 무시합니다.

class FitNesseExpediter implements ResponseSender {
  private   socket:    Socket;
  private   input:     InputStream;
  private   output:    OutputStream;
  // ...

  constructor(s: Socket
              context: FitNessContext)
  {
    this.contxt =   context;
    this.socket =   s;
    // ...
  }
}

3.3. 들여쓰기

소스 파일은 윤곽도와 계층이 비슷합니다. 파일 전체에 적용되는 정보가 있고, 파일 내 개별 클래스에 적용되는 정보가 있고, 클래스 내 각 메서드에 적용되는 정보가 있고, 블록 내 블록에 재귀적으로 적용되는 정보가 있습니다. 계층에서 각 수준은 이름을 선언하는 범위이자 선언문과 실행문을 해석하는 범위입니다.

이렇듯 범위(Scope)로 이뤄진 계층을 표현하기 위해 우리는 코드를 들여씁니다. 들여쓰는 정도는 계층에서 코드가 자리잡은 수준에 비례합니다. 클래스 정의처럼 파일 수준인 문장은 들여쓰지 않습니다. 클래스 내 메서드는 클래스보다 한 수준 들여씁니다. 메서드 코드는 메서드 선언보다 한 수준 들여씁니다. 블록 코드는 블록을 포함하는 코드보다 한 수준 들여씁니다.

프로그래머는 이런 들여쓰기 체계에 크게 의존합니다. 왼쪽으로 코드를 맞춰 코드가 속하는 범위를 시각적으로 표현합니다. 그러면 이 범위에서 저 범위로 재빨리 이동하기 쉬워집니다. 현재 상황과 무관한 if 문/ while 문 코드를 일일이 살펴볼 필요가 없습니다. 소스 파일 왼쪽을 훑으면서 새 메서드, 새 변수, 새 클래스도 찾습니다. 들여쓰기가 없다면 인간이 코드를 읽기란 불가능합니다.

들여쓰기 무시하기

때로는 간단한 if문, 짧은 while 문, 짧은 함수에서 들여쓰기 규칙을 무시하고픈 유혹이 생깁니다. 이런 유혹에 빠질 때마다 나는 항상 원점으로 돌아가 들여쓰기를 넣습니다.

가짜 범위

때로는 빈 while 문이나 for 문을 접합니다. 가능한 피하려고 애씁니다. 피하지 못하 ㄹ때는 빈 블록을 올바로 들여쓰고 괄호로 감쌉니다.

4. 팀 규칙

팀은 한 가지 규칙에 합의해야 합니다. 그리고 모든 팀원은 그 규칙을 따라야 합니다. 그래야 소프트웨어가 일관적이 스타일을 보입니다. 좋은 소프트웨어 시스템은 읽기 쉬운 문서로 이뤄진다느 ㄴ사실을 기억하기 바랍니다. 스타일은 일관적이고 매끄러워야 합니다. 한 소스 파일에서 봤던 형식이 다른 소스 파일에도 쓰이리라는 신뢰감을 독자에게 줘야 합니다. 온갖 스타일을 뒤섞어 소스 코드를 필요 이상으로 복잡하게 만드는 실수는 반드시 피합니다.

5. 출처

  • 제목: 클린 코드 - 애자일 소프트웨어 장인 정신
  • 저자: 로버트 C.마틴
  • 옮긴이: 박재호, 이해영
  • 출판사: 인사이트
profile
끊임없이 도전하는 프론트 개발자가 되고자 노력합니다.
post-custom-banner

0개의 댓글