[ 좋은 코드, 나쁜 코드 ] 가독성 높은 코드를 작성하라

 

Chapter5. 가독성 높은 코드를 작성하라

 

 

📍 들어가기

중고나라 웹 오픈을 준비하면서, 빠듯한 리뷰시간을 직접 경험했다.

그 안에서 기능 구현에 대한 만족도는 있었지만, 나의 코드 & 팀원들의 코드에 대한 리뷰 실력에 대한 부족함을 느끼게 되었다.

 

따라서 좋은 코드와 나쁜 코드를 구별할 수 있는 능력. 

또, 팀원들과 코드 공유의 깊이를 확장 시키고 싶은 목표가 생겨, 이 책을 읽게 되었다.

 

어느 회사를 가도, 서비스를 온전히 혼자 만들어내는 곳은 없을 것이다.

즉, 내가 맡은 기능이더라도 언젠가는 다른 사람이 이 코드를 보고 버그를 수정해야 할 것이며, 그 과정에서 나쁜 코드가 나오게 된다면, 작업 속도는 느려질 수 밖에 없을 것이다.

 

만약, 퇴사를 한 사람의 코드라면 더더욱 어려움에 빠질 수 있는 가능성이 높아지게 된다.

그래서 코드의 가독성만큼은 항상 중요하게 여기며 개발을 하는 것이 필요하다고 느껴졌다.

 

사실. 가독성의 핵심은 개발자가 코드의 기능을 빠르고 정확하게 이해할 수 있도록 만드는 것이다.

하지만, 다른 사람에게 코드의 세부적인 내용을 명확하게 하는 것은 그에 맞게 합당한 코드가 나와야 한다는 것이다.

 

어떻게 이를 위한 코드를 만들어낼 수 있는걸까?

---

✅ 서술형 명칭

가장 기본 중에 기본이 아닐까 싶다.

우리가 만드는 변수, 함수들의 이름을 단순히 'A'라고만 짓는다면, 대체 누가 이걸 어떤 역할을 하는 객체인지 알 수 있을까?

 

아무도 없을 것 이다.

 

따라서, 이름을 붙일 때에는 정확히 그것이 무엇이고, 무엇을 하는지 설명해주는 명칭이 필요하다.

 

❗️단, 주석으로 이를 대체하는 것은 올바르지 않다 ❗️

주석을 서술형으로 작성한다면, 개발자는 코드를 위아래로 스크롤하면서 해당 코드를 이해해야 한다. 

 

주석을 포함한 코드가 수백만줄이 넘어간다면...? 

이것은 꽤 번거로운 일로 다가오게 될 것이다.

---

✅ 주석문의 적절한 사용

주석은 아래의 3가지 목적으로 수행될 수 있다.

1. 코드가 무엇을 하는지
2. 코드가 왜 그 일을 하는지
3. 기타 정보(ex 사용 지침)를 제공

주석은 큰 단위의 코드가 무엇을 하는지 요약할 때, 용이하다고 말할 수 있다.

반면, 한 줄 한 줄 코드에 대한 설명은 가독성을 떨어뜨리는 방법이 된다.

( 대부분이 그렇다는 것이니 오해하지 않기를 바란다.)

 

더불어, 코드와 중복된 주석문은 차라리 코드의 가독성을 높이는 방향으로 수정하는 것이 좋다.

 

const getGenerateId = (infoData : string[]) => {
	// infoData[0]은 이름, infoData[1]은 성으로
    //{이름}.{성}의 형태로 ID를 생성한다.
	return infoData[0] + '.' + infoData[1];
}

 

위의 상황에서 주석은 코드와 중복되었으며, 진짜 문제는 코드가 읽기 쉽게 작성되지 않았다는 것이다.

그렇다면 여기서는 주석이 아니라 코드를 바꾸는 것이 맞다.

const getGenerateId = (infoData : string[]) => {
	const [ firstName, lastName ] = infoData;
    
	return firstName + '.' + lastName;
}

 

코드 자체로 설명이 되도록 작성하여 유지 및 관리의 과도한 비용을 줄일 수 있게 되었다.

 

따라서, 주석문은 코드만으로는 전달할 수 없는 세부사항 ( ex. 제품 또는 비즈니스 의사 결정, 함수의 반환값이 무엇인지 설명하는 문서)를 요약하는데 유용하다고 볼 수 있다.

---

✅ 코드 줄 수를 고정하지 말라.

일반적으로 코드베이스의 줄 수가 적을수록 좋다. 라는 말들을 들어본 적이 있을 것이다.

 

하지만, 간결함을 위해 이해력을 떨어뜨리는 코드는 피해야 한다.

이해를 할 수 없다면, 다른 개발자들은 이 코드가 무엇을 하는지 알기 위해 많은 시간을 투자할 것이다. 

 

따라서, 더 많은 줄이 사용되더라도 가독성이 높은 코드를 작성하는 것이 중요하다.

 

다만 이제, 코드의 길이가 길어진다면 기존의 코드를 재사용하지 않거나 불필요한 무언가가 계속해서 등장한다는 것이니 해당 문제를 살펴볼 필요는 있다. 

---

✅ 깊이 중첩된 코드를 피하라.

코드의 한 블럭이라고 말하면,

함수 호출  & if문의 조건 블록 & for 루프와 같은 반복문으로 살펴볼 수 있다.

 

많은 코드들이 중첩된 형태를 가진 구조가 있는 반면, 그렇지 않은 구조도 있다.

 

사실, 중첩이 많이 생성될 수록 한 블록에서 너무 많은 일을 수행하게 될 것이다.

따라서 우리는 작은 함수로 분리하여 중첩을 최대한 제거하는 노력을 해야 한다. 

---

✅ 가독성있는 함수 호출

앞서 말한 것처럼, 함수를 작게 분리하는 것은 로직을 나누는 일이다.

때문에, 함수의 이름을 작성할 때는 서술적 유형으로 사용하며, 명명된 매개변수를 사용하는 것이 좋다.

 

예를 들어서 살펴보자.

const sendMessage = (message: string , priority : number, allowRetry : boolean) => {
	
}
// 명명되지 않은 매개변수
sendMessage("happhee", 1, true);

위의 예시는 명명되지 않은 매개변수를 사용한 것이다.

문자열과 숫자, 불리언값이 각각 무엇을 의미하는지는 호출된 함수의 매개변수를 살펴보아야 알 수 있다.

 

물론 코드가 근처에 있으면 이를 파악하기 쉽겠지만, 멀리 떨어져있다면 직관적인 이해는 힘들어보인다.

이를 고쳐보면, 아래와 같다. 

const sendMessage = (message: string , priority : number, allowRetry : boolean) => {
	
}
// 명명된 매개변수 
sendMessage({ message : "happhee", priority : 1, allowRetry : true});

함수의 매개변수 각각에 대한 속성을 알 수 있어, 보다 더 직관적인 호출이 가능해졌다.

---

✅ 설명되지 않은 값을 사용하지 말라.

• 어떤 값은 다른 조건에 의해 변환할 때 사용하는 계수
• 작업이 실패할 경우, 재시도의 최대 횟수와 같이 조정 가능한 파라미터 값

이렇게 하드 코드로 나타난 값의 경우, 해당 값이 어떤 의미를 가지고 있는지 컴퓨터와 개발자가 모두 알고 있어야 한다.

계수에 대한 설명이 없다면, 혼란을 초래하고 이로 인해 버그가 발생할 수 있다.

 

우리는 그 값이 무엇을 의미하는지 다른 개발자들에게 명확하게 해주는 것이 중요하다.

1. 상수를 반환하는 공급자 함수 👉 일반적인 상수 개념이랑 거의 동일
2. 변환을 수행하는 헬퍼 함수 👉 수량의 변환을 하위 문제로 만들어 사용

---

✅ 익명 함수를 적절하게 사용.

프론트엔드 개발자라면, Javascript를 한 번이라도 공부해 본 사람이라면,

익명 함수에 대해 잘 알고 있을 것이다.

 

말 그대로 이름이 없는 함수이며, 일반적으로 코드 내의 필요한 지점에서 인라인으로 정의된다.

간단한 로직에서 유리한 장점을 가진 익명함수.

const getUsefulFeedback = (feedbackList: Feedback[]) => {
	return feedbackList.filter((feedback) => !feedback.comment );
}

 

return 문에서 가독성이 떨어진다고 생각한다면, 명명함수를 인수로 사용하면 된다.

const getUsefulFeedback = (feedbackList: Feedback[]) => {
	return feedbackList.filter(isEmptyComment);
}
const isEmptyComment = (feedback : Feedback ) => {
	return !feedback.comment;
}

 

명명함수를 인수로 사용하는 방법은 익명 함수가 길어질 때에 해결책이 되기도 한다. 

 

---

✅ 프로그래밍 언어의 새로운 기능을 활용하라.

일반적으로 코드 품질을 개선하고자 한다면, 언어가 제공하는 기능을 사용하는 것이 바람직하다.

그러나 팀원들이 해당 기능에 대해 익숙하지 않다면 지양하는 것이 좋을 때도 있다.

 

즉, 해당 기능을 단순히 새롭다는 이유로 사용하는 것이 아니라 

작업에 적합한 도구이기에 사용한다는 점을 분명하게 하며 코드의 퀄리티를 향상시켜야 한다.

---

📝 마무리

가독성과 코드에 대해 다뤄보면서, 어떻게 코드 리팩토링과 리뷰를 진행해야 하는지 방향성을 조금은 잡을 수 있게 된 것 같다.

계속해서 앞선 내용들을 작업에 적용해보면서, 체화를 시키도록 노력해야 비로소 나의 지식으로 나아갈 수 있을 것 같다.