클린 코드(Clean Code)를 작성하는 5가지 팁

이 글은 노마드 코더의 깨끗한 코드를 위한 5가지 팁을 보고 정리한 글 입니다.

아래의 예제 코드들은 JavaScrpit로 작성되었습니다.

---

클린 코드가 중요한 이유

• 좋은 코드란 돌아가기만 하면 되는 코드가 아니다.
• 좋은 코드란 코드 그 자체로 설명이 다 되는 코드이다.
• 만약 팀으로 일한다면, 좋은 코드는  팀원들이 딱 읽었을 때 읽기만해도 무엇인지 이해가 되고, 코드가 무엇을 하는지 물어볼 필요도 없이 이해가 되는 그런 코드이다.
• 팀이아니고 혼자서 일을 하는 경우에도 나중에 내가 그 코드를 다시 읽을 때(수개월 후) 수개월 전 내가 하던 고민이 뭔지, 코드만으로 이해가 가는, 부연설명없이 코드로 설명이 되는 상태! 이게 바로 훌륭한 코드이다.
• 요약하자면 클린 코드란 코드가 잘 작동되는 것은 물론이고 부연설명이 필요없는 코드이다.

---

첫번째 팁

- 검색이 가능한  이름을 써라.

 코딩을 하다보면 랜덤하게 값을 추가해야할 때가 있다. 예를 들면 하루가 총 몇 초인지... 

SetInterval(eatKimchi, 86400)

 하루가 총 몇 초인지를 요구함수가 있다면 위의 코드와 같이 작성하는 것 보다 해당 숫자를 변수(variable)로 해두는 것이 좋다.

const SECONDS_IN_A_DAY = 86400;
SetInterval(eatKimchi, SECONDS_IN_A_DAY)

 이렇게 코드를 작성하면 다른 팀원이 봤을 때 그 함수가 무엇으로 하는지, 저 변수가 무엇을 나타내는 지 바로 알 수 있기 때문이다. 따라서 첫번째 코드처럼 숫자를 사용하는 것 보다 변수로 지정하여 사용하는 것이 좋다.

---

두번째 팁

- 함수명은 반드시 동사를 써라

예를 들자면 "유저 데이터"(userData)는 함수명으로 좋은 이름이 아니다.

function userData(){
	//...
}

const data = userDate();

 "유저 데이터"말고 "유저 데이터 불러오기"가 좋은 함수명이다.

function loadUserData(){
	//...
}

const data = loadUserData();

 이 규칙은 꽤나 간단하고 중요한 것을 알려준다.

 이렇게 이름을 짓다보면 한 함수가 너무 많은 역할을 하는 것은 아닌지도 알 수 있다. 왜냐하면 함수는 딱 한가지 역할만 잘하는 것이 좋기 때문이다.

 이처럼 함수명을 그들이 하는 역할, 동사로 짓기 시작하면(액션 중심으로 짓다보면) 함수간 역할 구분의 필요성을 느끼게 되기도 할 것이다. 예를 들자면 유저 데이터를 불러오는  함수는 불러오는 역할만 하는 것이 좋다.

function loadUserData(){
  const value = '; ${document.cookie}';
	const parts = value.split('; user_id=');
	if (parts.length === 2) {
		const cookie = parts.pop().split(";").shift();
		// load data using the cookie
	}
}

const userData = loadUserData();

 위의 코드와 같이 불러오는 것 뿐아니라 다른 기능도 하게 된다면

function getCookie(){
  const value = '; ${document.cookie}';
	const parts = value.split('; user_id=');
	if (parts.length === 2) {
		return parts.pop().split(";").shift();
	}
}

function loadUserData(){
	const cookie = getCookie();
		// load data using the cookie

const userData = loadUserData();

 이처럼 해당 함수를 쪼개야(나누어야)할 수도 있다.

따라서 두번째 팁은 2가지 팁이 있다. 

첫번째 : 함수명을 동사로 만들어라

두번째 : 함수는 무조건 단, 한가지 액션만 수행하도록 만들어라

---

세번째 팁

- 인수는 3개 이하가 적당하다(추천)

이번에는 인수(argument)에 대하여 이야기를 해보겠다.

 한 함수가 가지는 인수는 3개 혹은 그 이하가 적당하다.

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

makePayment(35, 5, "xl", 2, "니꼬")

 위의 코드와 같이 함수가 너무 많은 수의 인수를 필요로하면 다른 사람이 보았을 때 혼란스러울 수가 있다. 어떤 인수가 무엇을 하는지에 대하여 잘 모를것이다.

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

makePayment({
	price: 35,
	productId: 5,
	size: "xl",
	quantity: 2,
	userIdL "니꼬",
});

 대신 만약 함수가 많은 숫자의 인수를 요구하면 한 개의 configuration object를 보내는 것을 추천한다. 이렇게 정리하는 것이 함수의 역할을 파악하기 좋고 또한 총 몇개의 인수를 필요로 하는지도 파악하기 좋다. 2~3개의 인수까지는 이해하기 좋지만 그 이상은 너무 복잡하기 때문에 configuration object 사용을 권장하는 바이다.(추천)

---

네번째 팁

- boolean값을 인수로 보내는 것을 최대한 방지하도록 하자!

boolean 값은 참 혹은 거짓을 의미하는 데이터 타입이다.

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

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

boolean 값을 함수에 보낸다는 것은 그 함수 안에 if, else가 있다는 뜻이고

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

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

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

 

추천하는 것은 각각의 if-else값을 다른 함수로 분리하는 것이다.위에서 말했듯이 함수는 단 한개의 액션을 하는 것이 좋다.

boolean 값을 (참/거짓) 인수로 보내는 것이 아니라! 따라서 함수를 분리하는 것을 추천한다.

---

다섯번째 팁

- 짧은 변수명이나(아무도 이해못하는) 축약어쓰는 것을 피하자!

allUsers.forEach((u,i) => {
	sendEmail(u);
	addToCount(i);
});

 예를 들면, 'u'가 아니라 'user'이라고 쓰는 것이다. 

allUsers.forEach((user,currentNumber) => {
	sendEmail(user);
	addToCount(currentNumber);
});

 위에 있는 두 가지 코드중 어느 것이 더 코드를 이해하기 쉽겠는가. 첫번째 코드와 같이 (u, i)로 사용한다면 처음보는 사람들은 이해하지 못하겠지만 두번째 코드처럼 (user currentNumber)로 사용하면 처음보는 사람들도 대충 이해를 할 수 있을 것이다.

---

이렇게 다섯가지 클린 코드 작성을 위한 팁을 정리해보았다.

 주의사항은 처음 코드를 작성할 때부터 클린 코드를 사용하기위해 애를 쓸필요는 없다. 코드를 먼저 작성하고 잘 작동되는지 확인 한 후 클린 코드가 되도록 다듬어 주는 것이 좋다. 처음부터 클린 코드(이쁜 코드)로 쓰는 것은 정말 어렵다.

 뭔가 처음 코드를 작성할 때에는 새롭게 만들고 있는 단계이기 때문에 충분히 힘들 것이다. 클린 코드로 작성한다고 그것을 신경쓰다보면 굉장히 복잡해질 가능성이 있기 때문에 코드를 작성하고 난 후 클린 코드로 다듬는 시간을 써주는 것이 좋다.