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

CLEAN CODE STUDY
author-profile 상 한규
∣
2023년 7월 21일
목록으로 돌아가기
  • 왜 코드 형식을 맞춰야하는가
    • 코드의 가독성을 높이기 위해
    • 유지보수를 원활하게 및 일관성 있게

이번 장에서는 코드를 작성할 때 주의해야 할 형식적인 요소들에 대해 다룹니다. 코드를 작성할 때는 가독성을 높이고 유지보수를 쉽게 하기 위해 일관성 있게 형식을 맞춰야 합니다.

  • 세로 형식
    • 적절한 행 길이 유지 - 짧게 유지해야 이해하기 쉬움. 한 파일 당 40~100줄
    • 신문 기사와 같이 두괄식 - 표제 작성 및 아래로 갈수록 의도 명확히
    • 빈 행 사용 - 생각과 생각 사이에 빈 행을 넣어 분리, 단 연속된 빈 행은 피해야함
    • 밀접한 코드일수록 세로로 가까이 - 연관성 부여
    • 함수 호출 종속성에 따른 순서 유지 - 호출하는 함수가 호출되는 함수보다 먼저 나오는게 자연스러움

  • 가로 형식
    • 화면을 넘지 않게 - 20~60글자 사이. 예전 프로그래밍에서는 화면이 하나이기 때문에 이에 맞게 사용함
    • 공백 및 밀집도 - 피연산자와 연산자 사이의 구분 등 수식 해석에 도움
    • 정렬 - 의도에 맞게 정렬
    • 들여쓰기 - 스코프 및 코드의 계층 수준을 표현

본문에 대한 예시

근래 대부분 가로 및 세로 형식에 대한 규칙은 작성자가 엄격히 대하지 않아도, vscode에서는 확장 프로그램 중 prettier라는 프로그램이 해결해준다. 이는 가로 형식에 대한 부분은 전부 해결해준다. 따라서 세로 형식에서 책과 다른 부분이 많이 존재한다. 이 중 제일 못 지키는 두 가지로, ‘적절한 행 길이 유지’ 및 ‘함수 호출 종속성에 따른 순서 유지’가 있다.

먼저 ‘적절한 행 길이 유지’이다. 책에서는 40 ~ 100줄 사이를 유지하라고 하였지만, 개발을 하다보면 한 파일에 많은 코드를 넣고 있는 나를 볼 수 있다. 특히 함수 등을 많이 생성하면서 이를 파일로 분리하지 않아서 문제가 생긴다.

이러한 문제는 기능 및 동작을 담당하는 파일이 아닌 페이지 및 데이터를 담당하는 파일에서 종종 발생한다.

프론트앤드 특성 상 화면을 그리다보니, 이 화면에서만 필요할 것 같은 함수를 같은 파일에 작성하는 것이다. 가능하면 화면을 그리는 부분 따로 코드를 작성하고, 파일로 분리할 수 있는 함수 등은 따로 분리해야하는 습관을 가져야한다.

두 번째는 ‘함수 호출 종속성에 따른 순서 유지’가 있다. 개발을 막 배우기 시작했을 무렵, 코드도 글이므로 읽기 편하게 짜라는 이야기를 들은 적이 있다. (아마 클린코드를 먼저 읽으신 분일 것이다.) 당시 읽기 쉬운 글을 생각하며 소설처럼 쓸 것을 생각했다. 또한, 책에서도 이와 비슷하게도 신문처럼 작성하라는 이야기를 하였다. 두괄식 구조로, 독자에게 핵심을 먼저 이야기하는 것이다. 이 두 방식처럼 코드를 작성하려면 먼저 하고자하는 이야기를 하고, 이에 대한 설명이 붙어야한다.

아래는 잘못된 예시 및 고친 사례다.

function Button({ text, onClicked, onHovered, className }: TextInputProps) {
  const buttonClicked = () => {
    onClicked()
  }
  return (
    <div
      onClick={buttonClicked}
      onMouseEnter={() => onHovered(true)}
      onMouseLeave={() => onHovered(false)}
      className={className}
    >
      {text}
    </div>
  )
}

export default Button

위의 코드는 버튼 클릭에 대한 함수를 정의하는 부분이 호출하는 부분보다 상단에 존재한다. 이는 책의 내용과는 다르다. 따라서 아래와 같이 수정을 하면 더 좋을 것이다.

function Button({ text, onClicked, onHovered, className }: TextInputProps) {
  return (
    <div
      onClick={() => {
        buttonClicked(onClicked)
      }}
      onMouseEnter={() => onHovered(true)}
      onMouseLeave={() => onHovered(false)}
      className={className}
    >
      {text}
    </div>
  )
}
const buttonClicked = (onClicked: () => void) => {
  onClicked()
}

export default Button

이는 책의 내용을 따랐을 시 만들 수 있는 코드이다. 하지만 정말 아래의 코드가 위의 코드보다 좋은지는 의문이다. 두괄식 구조 및 함수 호출 순서는 지켰지만, 첫 번째로 이 함수에서만 사용 가능하다는 점과 두 번째로 함수의 매개값을 사용하는데, 이를 위해서 따로 뺀 함수의 매개변수가 하나 더 늘었다는 점이다. 이렇듯 자바스크립트를 사용하는 리액트 네이티브에서는 함수 호출 및 매개변수를 사용하는 방법론에 있어서 고민을 해 볼 필요가 있다.

하지만 모든 코드에서 그렇듯, 가독성을 위해 관심사를 분리하는 것이 좋고, 이를 위해서는 두 번째 코드 예시와 같이 함수를 최대한 분리하여 작성하는 것이 좋다. 또한 파일도 분리하면 더 좋을 것이다. 모든 함수를 분리하기는 어렵겠지만, 최대한 분리하여 관심사를 나누는 습관을 들이면 코드가 많이 개선될 것이다.

author-profile
Written by 상 한규
nic6@naver.com

댓글