클린 코드

참조 : https://ardodeardo.medium.com/clean-code-4de6b19e84e2

Clean Code

 

순수하게 유지보수를 위한 개발이면 기존 스타일을 따라서 작성하겠지만,

그렇지 않은 경우 코드 작성에 따라 그 개발자의 평가가 달라질 수 있다.

아무리 남들보다 개발 속도가 빠르고 당장 기능이 정상 동작 한다고 하더라도,

알 수 없는 / 오해를 줄 수 있는 변수명, 코드 작성 방식이 더럽다면,

차후 해당 코드를 참고/수정 해야하는 다른 개발자들은 몇배의 리소스를 소모하게 될지 모른다.

 

medium 에서 여러 글들을 보다가 그냥 몇줄 작성한다.

참조 글과 동일하게 모든 번호를 작성하지는 않았다.

 

## 변수명은 의미 있는 이름들로 지어라.

1. 변수의 의도가 드러나는 이름을 지어라

2. 오해의 소지가 있는 이름을 피해라

3. 검색에 용이한 이름을 지어라

4. Avoid Mental Mapping

  아래는 예시인데,,,어떻게 변수명 지으라는 건지는 알겠는데 한글 번역이 애매해서 그냥 그대로 작성한다.

// bad
for (let x = 0; x < 10; x++) {
  // ...
}
items.forEach(i => {
  // ...
});

// good
for (let index = 0; index < 10; index++) {
  // ...
}
items.forEach(index => {
  // ...
});

5. 쓸데 없이 귀여운 척 이름 짓지 마라..ㅋㅋㅋ (아래 예시 참고)

// bad
thanosSnapHisFingers(id);

// good
deleteItem(id);

 

## 함수들(메소드들)

1. 함수 하나에는 하나의 기능을 담당하도록 작성하자.

한줄만 작성하라는 것이 아니라 같은 추상화 단계에 있는 기능들을 묶어서 사용할 수 있도록 구성하자.

아래 예시 참고..

// bad
function popup() {
  const parentElement = document.querySelector('.c-popup');
  
  const showButton = parentElement.querySelector('.c-popup__btn--show');
  showButton.addEventListener('click', () => {
    parentElement.classList.remove('d-none');
  });
    
  const hideButton = parentElement.querySelector('.c-popup__btn--hide');
  closeButton.addEventListener('click', () => {
    parentElement.classList.add('d-none');
  });

  // ... 
}


// good
function Popup() {
  const parentElement = document.querySelector('.c-popup');

  const show = () => {
    const showButton = parentElement.querySelector('.c-popup__btn--show');
    showButton.addEventListener('click', () => {
      parentElement.classList.remove('d-none');
    });
  }
    
  const hide = () => {
    const hideButton = parentElement.querySelector('.c-popup__btn--hide');
    closeButton.addEventListener('click', () => {
      parentElement.classList.add('d-none');
        });
  }
    
  init = () => {
    show();
    hide();
  }

  init();
}

2. 함수의 기능을 이름에 표현해라.

3. 함수의 인수들(arguments)은 적절하게 사용해라.

  0 개 = 이상적임

  1 ~ 2 개 = 가능하면 이정도

  3 개 = 안돼 (?!)

  - 하나의 함수에서 두 가지 기능을 위해서 인수를 굳이 사용하지 말고 두개의 함수로 나누자

  - 여러 인수를 다 넘기지 말고 하나의 객체로 넘기자

4. 반복해서 사용하지 말아라.

 

## 주석

1. 주석으로 모든 것을 설명하려 하기보다는 함수명,변수명 등을 잘 작성하여 주석을 줄여라

2. 좋은 주석들 : 법적인내용, 정보/의도 전달

3. 별로인 주석들 : 코드보다 긴 불필요하게 긴 내용, 수정 이력 같은 내용, 굳이 작성할 필요 없는 뻔한 내용, 위치를 나타내는 주석들

 

### 서식

1. 비교 연산자 & 등호 : ==, != 대신에 ===, !== 사용하자

2. 블록들

  - 여러 줄에 적절하게 괄호 사용하자

  - if 닫는 괄호와 else는 같은 줄에 작성하자

3. 주석들

  - 여러 줄에는 /** ... */ 을 사용하자

  - 같은 줄 끝에 작성하지 말고 위에 작성하되 다른 줄과 윗줄과 분리되도록 한줄 띄어서 작성하자

  - 주석은 한 칸 띄고 작성하자 (읽기 편하도록)

4. 공백들

  - 1탭 = 2스페이스(2칸)로 작성하자

  - 시작하는 괄호 앞에 한칸 (함수와 인수들 사이에는 X)

  - 연산자 앞뒤에 한칸

5. 콤마들(쉼표들) (,)

  - 줄 분리할 때 맨 앞에 콤마 사용하지 말고, 이전 줄 맨뒤에 콤마를 사용하자

6. 세미콜론 : 써라. (안쓰는 사람들도 많다는데 ,,, 왜 그러는지 잘 모르겠음)

7. 이름 짓는 규칙

  - 객체, 함수, 인스턴스는 카멜 케이스를 사용하자

  - 생성자,클래스에는 파스칼케이스 사용하자

 

 

*********************

그 이후로 내용이 더 있는데 그냥 이거 한글로 작성하는 것보다 직접 링크 들어가서 보는게 나을듯하여 줄입니다.

medium에 있는 윗글도 책 '클린코드'와 Airbnb의 JS 스타일 가이드를 참조 했다고 한다.