클린 코드

클린 코드란 무엇일까? 글쓰기로 예를 들어보겠습니다. 누군가 써놓은 글이 의미를 알 수 없고 난잡한 글일 때 그 글을 이해하기 어려울 것이다. 코드도 결국엔 글이다. 이해하기 어려운 글(코드)은 사람들에게 오해를 불러 일으킬 수 있다. 난잡하고 요상한 코드는 이 코드가 무엇을 의미하고 뭘 하고 싶은지 알 수 없게 한다.
그렇기에 우리는 코드를 작성할 때 읽기 쉬운 방향으로 변경하도록 노력해야한다.

도서 Clean Code에 이런 말이 있다.

지금 나에게만 정리되어 보이고, 내 눈에만 잘 읽히는 코드는 아무 의미가 없다.

우리는 코드를 단순히 동작하게 작성하는 것에서 남이 봐도 이해할 수 있도록 작성하는 것으로 코드를 바라보는 관점을 변경해야 한다.

표기법 컨벤션

const thisIsVariable = true;
const goToHome = () => {
    return;
}

    pages
    ㄴ todo-list
        ㄴTodoList.tsx
    ㄴ todo-detail
        ㄴTodoDetail.tsx

    class-name, .item-id

    TodoList.tsx
    Detail.tsx

이러한 코드 표기법은 꼭 컨벤션으로 정해두고 작성하는 것을 권장한다. 이유는 다음과 같다.

• 일관성: 팀원 모두 같은 코드를 작성할 수 있게 된다.
• 가독성: 규칙적인 코드를 작성할 수 있으므로 가독성이 증가한다.

이 외에도 여러가지 이점들이 있기 때문에 표기법 뿐만 아니라 컨벤션을 잘 정해두고 프로젝트를 시작하는 것이다.

의미 있는 변수명 짓기

1. 변수명은 명사로 시작

변수명을 지을 때는 명사로 먼저 시작할 수 있도록 한다.

// bad
var goToHome = 1;
 
// good
let variable = 1;
let phoneNumber = '010-1234-5678'

2. 명확한 의미를 담아서 작성하기 / 길더라도 (국룰이 아닌) 줄임말은 쓰지 않기

6개월 뒤에 내가 봐도 이해할 수 있는 작명을 하는 것이 좋다. 그리고 정말 많이 사용되는 줄임말이 아닌 경우 줄이지 않는 것이 좋다.

// bad
let a = 1;
let b = 86400;
 
const g = 13;
const s = 2;
const b = 5;
 
// good
let itemId = 1;
let ONE_DAY_SECONDS = 86400;
 
const gold = 13;
const silver = 2;
const bronze = 5;

3. boolean은 is, has, thisIs, -ing 를 활용하자.

//bad
const good = true;
const girlFriend = true;
 
//good
const isGood = true;
const thisIsGood = true;
const hasGirlFriend = false;
 
//mz 채신 유행
const loading = true;
 
if(isGood)

4. 복수형에는 복수 표현 사용

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

함수명 짓기

1. 함수명은 동사로 시작

//bad
const home = () => {}
const eventHandler = () => {}
 
//good
const goToHome = () => {}
const handleEvent = () => {}

클린코드

#1 현재 글 - [클린코드 - 의미 있는 변수명]
#2 [클린코드 - 조건과 탈출]
#3 [클린코드 - 코드 가독성]