더 좋은 코드를 위한 노력 - 코드 가독성 개선하기 (2)

 

위 내용은 카카오 엔터테인먼트의 FE개발팀 coze님의 <섬세한 ISFP의 코드 가독성 개선 경험>을 보고 정리한 글 입니다.

목차

 

1. 정확한 단어 고르기

  1-1. 다른 뜻을 가진 단어와 구분하기    

  1-2. 보다 구체적인 단어로 바꾸기        

  1-3. 정확하지 않아도 좋은 경우   

2. 잘 보이는 형태로 작성해보기          <

3. 정리                                                 <

 

 

1. 정확한 단어 고르기 

 

더 좋은 코드를 위한 노력 - 코드 가독성 개선하기 (1)

 

---

2. 잘 보이는 형태로 작성해 보기

 

 

시각적으로 한눈에 잘 들어오게 작성하려면 어떻게 해야할까? 

사람을 어떠한것을 이해할 때 친숙하고 이해하기 쉬운 형태로 변환하여 이해하곤 한다.

 

 

이해를 돕기위해 우리는 실생활에서 그림,표,차트,목차등으로 조금 더 시각적으로 잘 나타내는 모델들을 사용하곤 한다.

코드로 예를 들어서 시각적으로 잘인지가 되는 모델을 살펴보겠습니다.

 

 

 

1) 표

 

다음 코드는 삼항연산자를 이용해서 조건문을 작성한 것이다.

이 코드를 찬찬히 따라가보면 어떤결과가 나올지 할 수 있다.(보자 마자 숨이 막혔다.)

코드를 따라가다보면 플로우차트가 쉽게 연상이된다.

플로우차트는 시작부터 끝까지 순차적으로 플로우를 따라가보아야 결과를 알 수 있다.

조금 더 결과가 한 눈에 들어오게 하려면 어떻게 하면 될까?

 

 

한 눈에 관계를 보여주고 싶으면 표를 사용하면 된다.

순차적으로보지 않아도 원하는 행과 열에 시선을 두면 인과관계를 파악할 수 있다.

 

 

플로우차트처럼 작성된 코드를 표 형태처럼 코드를 바꾸면 아래와 같다.

표와 가까운 형태가 되어서 인과관계가 비교적 잘 들어난다.

 

 

 

즉시 실행함수와 early return을 사용해서 개별조건을 먼저 보여주도록 작성해보았다.

이로서 중요한 정보 순서대로 배치할 수 있어서 조금 더 인과관계가 한 눈에 잘 들어온다.

(와 즉시 실행함수로 진짜 깔끔해졌다.)

 

 

표 형태로 나타낸 또 다른 예시를 살펴보자

 

 

타입에 따라 과일이름을 str에 저장하는 코드이다.

직관적으로 이해는 되지만 형태를 개선해보면 어떠할까?

 

 

 

각 항목에 대응하는 값을 일직성상의 표 형태와 대응되도록 하였다.

표와같은 형태로 map을 작성하니 key와 value가 일직선상에 위치하여 시각적으로 대응관계가 쉽게 눈에들어온다.

 

 

 

2) 목차

목차는 높은 곳에서 숲을 조망하듯 전체적인 구조를 요약해서 볼 수 있다.

코드에 사용된 Z 인덱스를 관리할 때 

목차를 작성하듯 코드를 작성하였더니 가독성을 좋아졌던 예시에대해 살펴보자

 

 

 

z-index를 수정하여 파란색보다 앞으로 오게 할려고 3000으로 노란색을 수정하였다.

 

하지만 그로인해 보라색 모달을 가리게 되면서 문제가 생겨버렸다.

 

이를 해결하기위해 목차형태로 작성해보았다.

 

목차형태로 코드 곳곳에 작성된 모든 z-index를 한 눈에 볼 수 있도록 작성해두면 관리가 쉬워질 것이고

그러면 앞선예시처럼 순서가 꼬이는 사례는 줄어들 것이다.

 

 

 

 

앱에서 사용하는 모든 z-index 오브젝트를 ZINDEX_USAGES로 작성해보았다.

덕분에 책에서 목차를 보고 한눈에 위치를 파악하듯 앱에사용된 모든 z-index를 한곳에서 확인할 수 있어서 가독성이 좋아졌다.

 

 

 

3) 용어정리

 

 

자기소개를 쓰기 전에 서두에 용어정리를 먼저하고 작성해보았다.

코드를 작성할 때에도 이런 용어정리가 있다면 이해가 한결 쉽지않을까?

 

 

이런코드는 어떻게 동작할지는 쉽게 예측할 수 있다.

하지만 발표자인 저는 이렇게 코드를 작성하고나면 다른 개발자가 의도를 몰라 혼란을 겪을까봐 걱정이된다.

 

 

 

용어를 정리하듯 if문안에 비교한 조건문이 실은 보여줘야할지를 판단하는 shouldDisplay이였다던가

data는 실은 foods를 의미하는 것이었고

5000이라는 숫자와 비교하는 것은 실은 건강하지 못한 것의 척도였다는 것을 코드주식에 표식으로 삽입하였다.

 

이로인해 코드는 더 길어졌지만 의도를 명확히알 수 있어 가독성을 높여주었다.

 

 

 

 

4) 각주

 

다음의 글을 한눈에 잘 작성하려면 어떻게하는 것이 좋을까?

 

 

각주를 활용하면 아래처럼 정리가 가능하다.

 

이렇게 중요한 핵심만 먼저 말하고 위첨자로 자세한 설명은 따로 배치해두면 아래에 위치한 각주에서 찾아볼 수 있다.

 

코드 가독성을 높이기 위해 이러한 사례를 적용한 것을 살펴보자.

 

소설 로그를 전송할 때 각 하위의 챕터를 누르면 전송하는 코드이다.

 

이 코드의 핵심은 소설과 챕터를 어떻게 그려주는지 이다.

로그 정보는 이에 비하면 부차적인 정보이다.

 

 

중요한 정보만 표시하고 부차적인 정보는 흐릿하게 하면 이렇게  된다.

 

하지만 로그전송을 위해서는 중간에 부피를 차지하는 코드를 작성할 수 밖에 없다.

 

이를 각주를 남기는 형태로 개선해보면 어떨까?

 

다음과 같이 클릭이벤트를 모아서 처리하는 하이오더컴포넌트를 작성해보았다.

그리고 이벤트 전파를 이용하여 앱의 최상단에 위치시켜두었다.

 

 

로그 전송을 담당하는 하이오더 컴포넌트를 별도로 작성해 두었더니 더 이상 로그 전송 코드를 코드사이에 길게 쓸 필요가 없어졌다.

 

하지만 이것으로는 부족하다.

 

로그 전송을 할때 novel이나 chapter 파라미터도 함께 전달해줘야 한다.

파라미터도넘겨줄려면 어떻게하면 좋을까?

 

 

각주에 정보를 더 기입하는 방법을 활용했다.

 

 

 

 

---

정리

 

 

표, 목차, 용어, 각주 각각 너무 좋은 방법인 것 같다. 

정말 사소한 것 같지만  많은 도움이 되었다. 

특히 예를 들어서 설명을 해주셔서 정말 이해하기 쉬웠던 것 같다. 

 

정말 클린코드 즉 가독성이 좋은 코드를 만들기 위해 끊임없이 노력해야할 것 같다. 

오늘 이렇게 정리만 하고 끝이아니라 주기적으로

보고 또 보고 해야 체화가 될 것 같다. 

 

 

함수, 변수명등 이름에 대해 고민하면 아래 영상도 도움이 될 것이다.

https://www.youtube.com/watch?v=71ecM6p5eqc