clean code 작성법

clean code에 대해 간단히 적용가능한 것들에 대해서 알아보도록 하겠습니다.

검색이 가능한 이름을 씁니다.

랜덤하게 값을 추가하거나 고정된 값을 사용하는 경우에는 변수로 선언하여 다른 사람들도 알아보기 쉽게 합니다.

handleKeydown(e) {
	// enter 를 누른 경우
	if (e.keycode === 13) {
	}
}

다른 사람이 13이라는 숫자를 보면 무엇을 의미하는지 명확히 알 수 없습니다.
아래 코드와 같이 변수 이름에 해당 값이 어떤 것을 의미하는지 지정을 해주면 쉽게 코드를 확인할 수 있습니다.

const ENTER = 13;
handleKeydown(e) {
	// enter 를 누른 경우
	if (e.keycode === ENTER) {
	}
}

함수명은 반드시 동사로 사용한다.

동사가 아닌 이름으로 사용을 할 경우 function 내에 여러가지 기능들을 작성하는 실수를 하기 쉽습니다.
실무를 하면서도 하나의 function 에 여러가지 기능들을 담지 않기 위해 노력하는 편인인데 생각보다 어렵습니다.
함수명을 동사로 지으면 생각보다 함수의 기능이 명확해져 개발하는데 큰 도움이 될 것 같습니다.

 // user 정보를 가지고 어떤 작업을 하는지 알기 어려움
 function userData() {

}

// userData 를 가져오는 함수라는 것을 확인할 수 있음
function getUserData() {

}

arguments의 갯수는 3개 이하로 정한다.

arguments가 3개 이상이 되거나 하면 코드의 가독성이 떨어집니다. 만약 여러개의 arguments를 사용할 때에는 Object 형태로 작업합니다.

function handleData({prodNo, ProdNm, id, channelId}) {

}

또한 arguments에 boolean값을 넘겨 분기를 태워서 작업을 하는 경우 arguments에 boolean값을 넘기지 않고 함수를 분할합니다.

function sendMessage(isFirst) {
    if(isFirst) {
		
	} else {
    	
	}
}
sendMessage(true);
sendMessage(false);

if/else 문을 함수안에서 사용하지 않고 if/else를 다른 함수로 분리합니다. 앞에서도 언급한것과 마찬가지로 함수는 한가지 기능을 해야하기 때문입니다.

function initMessage(){
}
function severalMessage() {
}

짧은 변수명이나 축약을 지양합니다.

과거에 제가 많이 저질렀던 실수였습니다.
이전 회사에서는 코드리뷰를 크게 하지 않아 기능개발에만 몰두하며 변수 축약을 많이 했습니다. (반성..ㅎ)

// v가 어떤값을 나타내는지 명확히 알 수 없음
items.map((v,i) => v);

items.map((item,i) => item);

클린 코드에 대해 알아봤지만 실제로 개발을 할때에는 기능구현이 우선입니다. 그러므로 기능 구현까지는 클린 코드를 꼭 작성해야한다라는 마음가짐보다는 기능 구현 후 코드를 수정하는 시간을 통해서 클린코드를 작성하기 위해 노력하는 것이 좋다고 합니다.
실제로 개발을 할때도 먼저 기능구현부터 하고서 코드점검시간을 가지며 작업하고 있습니다.