[TIL 2023.08.03] 클린코드에 대하여

💻오늘 배운 내용

"유지보수 하기 쉽게 코드를 작성하고 코드에 의도를 담아라.

6개월 뒤에 그 코드를 다시 보는 사람은 아주 높은 확률로 너다."

-로버트 마틴-

---

클린코드?

유지보수와 디버깅에 용이하고 준수한 성능과 명확한 의도를 가진 코드 

코드에 의도를 담고, 그 의도를 다른사람으로 하여금 납득할 수 있게 하는 것

단순히 동작하게 작성하는 것에서 남이 봐도 이해할 수 있도록 작성

 

코드 컨벤션 

팀원 모두 같은 코드를 작성할 수 있게 한다. (한 사람이 짠 코드처럼 느껴지게 하는데에 목적)

사람에 의존적이지 않고 규칙에 의존적인 코드를 짜게 되고 모르는 부분의 코드도 빠르게 파악할 수 있게한다.

코드, 컨벤션만 보고 어떤 의도의 코드인지 파악하기 쉽게 된다.

• camelCase
• kebab-case
• snake_case
• PascalCase

 

기본적인 변수 / 함수 선언법

- 변수는 명사가 먼저 오도록

// bad
var goToHome = 1;

// good
let phoneNumber = '010-1234-5678'

- 명확한 의미를 담아서 작성. (약속되지 않은 줄임말 지양)

//bad
let a = 1;
let b = 86400;
const gf = undefined;

//good
const itemId = 1;
const ONE_DAY_SECONDS = 86400;
let girlFriend = undefined;

- boolean 은 is, has, thisIs, -ing

//bad
const good = true;
const girlFriend = true;

//good
const isGood = true;
const thisIsGood = true;
const hasGirlFriend = false;

- 함수는 동사 먼저

//bad
const home = () => {}
const eventHandler = () => {}

//good
const goToHome = () => {}
const handleEvent = () => {}

- 복수에는 복수 표현 사용하기 

//bad
var todo = [1,2,3,4];

//good
const todos = [1,2,3,4];
const todoList = [1,2,3,4];

 

조건과 탈출

1. 명확한 조건 선택하기

• 긍정조건 사용하기 : ! 표기가 잘보이지 않고 부정의 부정이라 조건문을 잘못 해석할 여지가 다분함
• 조건문에 이름 붙이기 : 조건의 나열X, 어떤 조건인지O
• 함수를 통해서 조건을 사용 :복잡하거나 조건이 변경의 여지가 남아있을 때
• 조건문 압축하지 말기 : 조건문을 최적화하려고 하기보다는 이름을 명확하게 
• 조건, 반복 depth 지옥 : 깊이에 주의
• object mapping : if 문을 효과적으로 줄일 수 있다.

function loginWithKakao() {}
function loginWithGoogle() {}
function loginWithApple() {}

// switch
const socialLogin = (social) => {
  switch (social) {
    case "kakao":
      loginWithKakao();
    case "google":
      loginWithGoogle();
    case "apple":
      loginWithApple();
  }
};

//obj mapping
const socialMapper = {
  kakao: loginWithKakao,
  google: loginWithGoogle,
  apple: loginWithApple,
};

const socialLogin = (social) => {
  socialMapper[social]();
};

 

2. 정확하게 탈출하기 (early return의 주의할 점)

함수의 일관성이 떨어질 수 있다.

: 먼저 리턴을 시켜버림으로써 함수의 흐름을 분산시킬 수 있다.

어떤 조건에서 반환이 일어나는지를 정확히 이해하고 추적할 수 있어야 한다.

 

명확하게 종료되지 않는다는 의미를 내포한다.

단순히 return; 만 작성할 경우 함수는 원하는 값이 아닌 undefined 을 반환한다.

반환값이 없는 void 함수일때는 문제가 없겠지만 필요한 반환값이 존재할 경우 원치 않는 undefined 을 반환하게 될 수 있다.

 

추상화와 구체화

추상적이다 - 구체적이지 않아 막연하고 일반적인 것

알 필요 없는 정보 숨기기 / 필요한 정보만 노출하기

 

코드 퀄리티 & 가독성 올리기

- 함수의 분리 (역할과 책임이 다른 것을 명확히 파악하기) : 한가지 일만 하게 하기 (단일 책임 원칙)

• 함수는 명확하게 한가지 동작만을 해야하고 이름도 그에 맞게 지어져야 한다.
• arguments (함수 인수) : 함수인수의 이상적인 개수는 0개, 최대한 두개를 넘지 않게 조절해주는 것이 좋다.
• 함수 인수로 boolean 을 넘기지 않도록 해야한다. : boolean을 넘기면 내부에 if 문이 존재한다는 뜻이고 이는 두가지 일을 하고있다는 것

- custom hook 사용하기 ( 비지니스 로직 분리하기 )

 

- 파일 분리하고 파일 이름 명확하게 짓기

• 파일분리 : 기능이나 목적에 따라 분리 (컴포넌트나 서비스, 훅 등)
• 파일의 이름은 해당 파일이 무슨 역할을 하는지 바로 알 수 있도록 직관적
• 일관된 네이밍 컨벤션을 사용
• 프로젝트가 커지고 복잡해질 경우, 폴더를 여러 단계로 중첩하여 구조를 만드는 것이 유용

- 비슷한 것은 곁에 두기 ( 응집도 높이기 )

 : 비슷한 코드가 모여있어서 파악하기 용이한 것을 응집도가 높다라고 표현한다.