🧼 클린코드란?

왜 클린코드가 중요할까?

---

좋은 코드는 읽기만 해도 이해가 되는 코드다. 

6개월 후에 코드를 봐도 코드만 봐도 이해가 될 수 있는 코드가 그것이다. 

 

검색이 가능한 이름을 써라 

코딩을 하다가 보면 램덤하게 값을 추출할 때가 있음

해당 숫자를 변수처리하는 것이 좋음

setInterval(eatKimchi, 86400) ❌

SECONDS_IN_A_DAY = 86400
const setInterval(eatkimchi, SECONDS_IN_A_DAY) ✅

그 숫자가 무엇을 의미하는지 모르기 때문이다. 

 

 

함수명은 반드시 동사로 쓰자

유저데이터는 함수명이 좋은 함수명이 아님

function userData(){
 //...
}

const data = userData(); ❌

유저 데이터 불러오기가 좋은 이름이다.

function loaduserData() {
 // ...
}

const userData = loadUserData(); ✅

왜 그럼 동사로 지을까? 

함수가 너무 많은 역할을 하는지 아닌지를 알 수 있음

함수는 딱 한개만 잘해야하는데 함수명을 그들이 하는 역할, 동사로 짓기 시작한다면, 구분의 필요성을 느끼게됨

 

유저 데이터를 불러오는 함수는 유저만 불러와야함 

만약에 한 함수에 두가지 기능을 수행하고 있다면 쪼개야함

 

 

인수(argument)는 3개 혹은 그 이하로!

function makePayment(price, productId, size, quantity, userId){
 // process ...
}

makePayment(35,5,"xl",2,"니코:) ❌

혼란스러울수 있음 어떤 인수가 무엇을 하는지

만약에 함수가 여러가지 인자가 필요로 한다면!!

한개의 configuration object를 보내는 것을 추천함

function makePayment({price, productId, size, quantiy, userId}){
//process. . . 
}

makePayment({
	price : 35,
    productId : 5,
    size : "xl",
    quantity : 2,
    userId: "니코",
 })); ✅

함수의 역할을 파악하기 좋고

또한 총 몇개의 인수를 필요로하는지 파악하기 좋음

 

 

Boolean값을 인수로 함수에 보내느 것을 최대한 방지하도록 하자!

fuction sendMessage(text, isPrivate){
	if(isPrivate){
    // send private
    }else{
    // send public
    }
}

sendMessage("hello", false)
sendMessage("this is a secret", true) ❌

boolean값을 보낸다는 것은 보내는 함수 내에 if와 else가 있는 것임

그냥 따로 if - else값을 다른 함수로 분리하는 것이 좋음

fuction sendPrivateMesage(text){
//...
}

function sendPublictMessage(text){
//...
}

sendPrivateMessage("hello")
sendPublicMessage("this is a secret") ✅

앞에서 말했듯이 함수는 한개지 액션만 해야하기 때문!

 

짧은 변수명이나 (아무도 이해못하는) 축약어를 쓰지말자!

u X → user

e X → email

 

🚨그러나 초기 시작점에서 이러한 고민을 하지말자

첨부터 이런 이쁜 코딩이 나오기 힘듦

첨부터 클린코드 쓰려고 하지말고 마무리 단계에서 할 것

코드 대청소!!라고 생각하자. 

 

 

클린코드를 지향하고 앞서만든 프로젝트를 보면서 클린코드로 대청소해보자.

 

 

 

Reference: 

깨끗한 코드를 위한 5가지 팁

클린코드