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

Serin-B·2023년 7월 2일

클린코드JS

목록 보기

13/15

우리가 작성하는 코드들도 결국은 하나의 문서이다. 좋은 소프트웨어 시스템은 읽기 쉬운 문서로 이루어진다. 따라서 오늘은 일관성있고 매끄러운 문서를 만들기 위해 형식을 맞추는 방법에 대한 이야기를 해보려고 한다.

왜 형식을 맞춰야할까?

개발자는 혼자가 아닌 함께 일해야 한다. 따라서 나와 동료 개발자들이 서로의 코드를 이해하는 시간을 절약하고 코드의 품질을 일관성있게 유지하기 위해서는 팀 규칙, 스타일 가이드 등을 기반으로 형식을 맞춰야 한다. 또한 형식을 맞추면 가독성 및 유지보수성이 높아지기 때문에 클린 코드를 위해서는 형식을 통일하는 것이 중요하다.

네이밍 컨벤션

이름을 지을때는 의도를 분명히 밝히는 명료한 이름 을 지어야 한다. 이름만 잘 지어도 동작 혹은 역할을 유추할 수 있으므로 좋은 이름을 짓는 것은 몹시 중요하다.

그리고 비슷한 역할을 하는 것들은 비슷한 이름으로 통일해주는 것이 좋다. 따라서 팀내에서 네이밍 컨벤션을 정하여 일관성있게 사용하는 것이 좋다. 예를 들어 무언가를 제어하는 함수의 이름에는 handle 을 사용하거나, 상수명은 반드시 Snake case로 작성하기로 약속하는 것이다.

또한 prefix(접두사) 와 suffix(접미사) 를 적절하게 사용하는 것이 좋다. 예를 들어 리엑트에서 Hook은 use 라는 prefix(접두사)를 사용하기로 약속하였다. 덕분에 모든 리엑트 개발자들은 이름 맨 앞에 use가 있으면 Hook임을 유추할 수 있다.

⊕ 워드 커닝햄이 제안하는 의도를 드러내는 이름 짓기

공백 활용하기

공백도 코드의 일부이다. 따라서 아래와 같이 공백을 적절하게 활용하면 가독성을 높여줄 수 있다.

빈행으로 분리하라!
패키지 선언부, import 문, 각 함수 사이에 빈 행을 주어 분리하면 가독성을 높여줄 수 있다. 이외에도 나뉘는 개념 사이에 빈 행을 두어 분리해주는 것이 좋다. 예를 들어 선언, 로직, 반환으로 함수 내부의 코드들을 나누어 공백으로 분리해주면 훨씬 깔끔하고, 파악하기 쉽다.

//before
function loadingElements = () => {
  const el = document.createElement('div');
  el.setAttribute('class', 'loading-1');
  const el2 = document.createElement('div');
  el2.setAttribute('class', 'loading-2');
  const el3 = document.createElement('div');
  el3.setAttribute('class', 'loading-3');
  el.append(el2)
  el2.append(el3)
  return el
}

// after
function loadingElements = () => {
  //선언
  const el = document.createElement('div');
  const el2 = document.createElement('div');
  const el3 = document.createElement('div');
  
  //로직, 문
  el.setAttribute('class', 'loading-1');
  el2.setAttribute('class', 'loading-2');
  el3.setAttribute('class', 'loading-3');
  
  el.append(el2)
  el2.append(el3)
  
  //반환
  return el
}

공백을 활용하라!
연산자 앞뒤로 공백을 주는 등 코드의 가독성을 높이고 구분을 잘 하기 위해 공백을 활용하는 것이 좋다.

const nextLevel=level+1

// better
const nextLevel = level + 1

들여쓰기를 철저하게 하라!
때로 간단한 if문이나 짧은 while문, 짧은 함수에서 들여쓰기 규칙을 무시하고 싶은 유혹이 생기지만 원점으로 다시 돌아가 들여쓰기를 해야한다. 들여쓰기는 범위(SCOPE)를 표현하기 위해 쓰기 때문에 뭉뚱그린 코드를 쓰지 않도록 유의한다.

들여쓰기를 철저하게 해야하지만, 그렇다고 들여쓰기를 많이 하는 것을 권장하는 것은 아니다. 들여쓰기가 많으면 위의 사진처럼 코드가 더 보기 힘들어진다. 그러므로 들여쓰기를 줄일 수 있도록 아래와 같은 방법을 활용하고, 의식적으로 들여쓰기를 줄이는 코드를 작성하는 습관을 들여야 한다.
1. 초기 반환(early return)하기
2. callback 보다는 promise, async&await 쓰기
3. 고차함수 활용하기 (map, filter, reduce)
4. 함수를 나누고 추상화하기
5. 메서드 체이닝 활용하기(.then().then())
⊕ 들여쓰기(depth)를 space 2번으로 할지, 4번으로 할지, tab으로 할지 등등 논쟁이 있으나 팀별로 적적하게 합의 후 정해진 규칙을 따르는 것이 좋다. 규칙을 정했다면, 코드 에디터와 같은 도구의 도움을 받는 것이 좋다. 한 번 설정을 잘 해두면 신경쓰지 않아도 알아서 규칙을 준수하게 도와주기 때문이다.

밀접한 내용은 가까이 배치하기

서로 밀접한 내용은 세로로 가까이 붙이는 것이 좋다. 또한 개념적 유사성이 있는 경우에도 가까이 배치하는 것이 좋다. (예를 들면 변수와 변수를 사용하는 함수, 종속성을 가지는 함수들, 비슷한 동작을 수행하는 함수들)

변수 선언
변수는 사용하는 위치에 최대한 가까이 선언하는 것이 좋다.
종속함수 선언
한 함수가 다른 함수를 호출한다면 두 함수는 세로로 가까이 배치하는 것이 좋다. 일반적으로 호출되는 함수를 호출하는 함수보다 나중에 배치한다.

function a1(){
  a2()
}

function a2(){
  return 'hello'
}

주석

주석에 대한 견해는 사람마다 다르다. 도서 Clean Code(클린 코드) 에서는 가장 좋은 것은 주석을 달지 않고 코드로만 모든 의도를 표현하는 것이라고 말한다.

그럼에도 불구하고 달아도 되는 주석으로는 아래와 같은 경우이다.

앞으로 해야할 일을 남겨두는 To do 주석
정보를 제공하는 주석
결과를 경고하는 주석 ex) // 여유시간이 충분할 경우에만 실행할 것

주석을 달지 말라는 것은 나쁜 코드를 주석으로 설명하려고 하지 말고, 코드를 리펙토링하여 함수나 변수로 의도를 표현하라는 것이다. 요즘은 동료 개발자를 위한 적절한 주석은 필요하다는 의견을 내는 사람들도 있다. 이러한주석에 대한 내용도 팀 내부에서의 합의가 필요할 것 같다.