if (kakao)2022-〈섬세한 ISFP의 코드 가독성 개선 경험〉후기

Ⅰ. 요약

우리가 눈을 떴을 때, 추락하고 있는 우주선에 있다고 가정해보자. 빨리 메뉴얼을 읽고 탈출해야 하겠지만 메뉴얼이 복잡하게 쓰여져 있다면 결국 탈출하지 못하고 추락하고 말 것이다. 프로그래밍도 마찬가지이다. 1인 개발자가 아닌 이상, 개발은 팀 단위로 이루어지기 때문에 발코딩을 하면 팀원에게 욕을 먹을 것이다. 그렇다면 가독성을 높이는 방법에는 무엇이 있을까?

 

정확한 단어 고르기

📌 다른 뜻을 가진 단어와 구분하기

1. load vs fetch

let data = await loadData();

💡 loadData에 이미 '가져와서 실었다'는 완결된 동작이 포함된 상태에서 data라는 변수에 다시한번 싣고 있으므로 이는 적절하지 못한 코드이다.

/* 
load : 가져와서 싣다.
fetch : 가져오다.
load 대신 fetch를 사용한다면?
*/

let data = await fetchData();
// 혹은
let success = await loadData();

✅️ 함수명을 가져오는 행위 자체를 뜻하는 단어로 바꾸거나 함수(동작)에 대한 결과를 저장하는 변수명을 바꾼다.

 

 

2. get vs query

// 화면에 "UserName"이라는 text가 없을 경우,

screen.getByText("UserName");
// => Error : No Instances found

screen.queryByText("UserName");
// => null

💡 React Testing 라이브러리에서 제공하는, 화면에 텍스트가 제대로 출력 되었는지 확인하는 테스트코드인 getByText(str)와 queryByText(str)중 어느 함수를 사용해야 하는 가?

 

✅️ get은 가져오다, query는 질문하다라는 의미를 갖고있다. 즉 get은 결과를 당연히 가져올 것으로 기대될 때, query는 결과가 없을 수도 있을 때 사용하면 적절한 사용이라고 할 수 있다.

 

 

📌 보다 구체적인 단어로 바꾸기

"짜증난다" 라는 말은 다양한 감정(억울하다, 서운하다, 등)을 뭉뚱그려 얘기하기 때문에 좋지 못하다고 한다. 이처럼 코드에서도 두루뭉술한 표현보다는 조금 더 자세한 단어를 사용하는 것이 좋다.

 

[예시]

get	extract, parse, ...
number	limit, count, ...
change	convert, filter, override, ...

 

 

 

📌 정확하지 않아도 좋은 경우

case 1.

// 분, 시, 일을 초로 환산
let convert_to_sec = (m=0, h=0, d=0) => {
    const MIN_TO_SEC = 60;
    const HOUR_TO_SEC = MIN_TO_SEC * 60;
    const DAY_TO_SEC = HOUR_TO_SEC * 24;
    
    return m * MIN_TO_SEC + h * HOUR_TO_SEC + d * DAY_TO_SEC;
}

💡  분, 시, 일을 매개변수로 받아 초로 환산해주는 함수이다. 어색한 부분은 없지만 한 눈에 들어오지 않아, 다음과 같이 바꾸어봤다.

// 분, 시, 일을 초로 환산
let convert_to_sec = (m=0, h=0, d=0) => {
    const MIN = 60;
    const HOUR = MIN * 60;
    const DAY = HOUR * 24;
    
    return m * MIN + h * HOUR + d * DAY;
}

✅️ 목적이 되는 단위(_TO_SEC)를 모두 제거하여 부정확한 표기임에도 오히려 가독성이 좋아진다. 정확한 단어를 쫒는 것 보다는 맥락에 맞춰 가독성을 고려하는 것이 더욱 효과적이었다.

 

 

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

📌 표

case 1.

const type = 
exception
    ? undefined
    : condA
    ? 'A'
    : condB
    ? condC
        ? 'BC'
        : 'BD'
    : 'A';

💡 삼항 연산자

 

exception	condA	condB	condC	type
True				undefined
	True			'A'
		True	True	'BC'
		True	False	'BD'
				'A'

const type = () => {
    if (exception) return undefined;
    if (condA) return 'A';
    if (condB && condC) return 'BC';
    if (condB && !condC) return 'BD';
    return 'A';
};

✅️ 삼항연산자 코드를 표로 나타내고 이를 참고하여 표와 비슷한 형태로 바꾼다.

 

 

case 2.

let str = '';
switch (type) {
    case 'apple' :
        str = 사과";
        break;
    case 'banana' :
        str = 바나나";
        break;
    default :
        str = "포도";
}

💡 switch - case문

const FRUIT_MAP = {
    apple: "사과",
    banana: "바나나",
    DEFAULT: "포도"
};

let str = FRUIT_MAP[type] || FRUIT_MAP.DEFAULT;

✅️ Map을 사용하여 표와 비슷한 형태로 바꾼다.

 

📌 목차

case 1.

default.CSS

.box {
    position: relative;
    width: 100px;
    height: 100px;
    border: solid 1px black;
}

.box > * {
    position: absolute;
    width: 50px;
    height: 50px;
}

.elem1 {
    background-color: tomato;
    z-index: 1;
}

.elem2 {
    left: 15px;
    top: 25px;
    background-color: aquamarine;
    z-index: 9999;
}

1

2

 

💡 CSS가 다음과 같이 작성되어있다. 코드가 짧을 때는 큰 문제가 없지만 만약 매우 긴 코드로 구성이 되어있다고 생각해보자. 새로운 요소를 하나 만들었을 때 해당 요소에 부여할 적절한 z-index를 찾는 일은 코드를 오고가며 찾아야하므로 꽤 번거로울 것이다. 이러한 문제를 피하기 위해 z-index를 목차형식으로 만든다.

 

default.CSS

.box {
    position: relative;
    width: 100px;
    height: 100px;
    border: solid 1px black;
}

.box > * {
    position: absolute;
    width: 50px;
    height: 50px;
}

.elem1 {
    background-color: tomato;
}

.elem2 {
    left: 15px;
    top: 25px;
    background-color: aquamarine;
}

 

Z_Index.CSS

.elem1 {
    z-index: 1;
}

.elem2 {
    z-index: 9999;
}

✅️ z-index를 따로 분류해놓은 CSS를 따로 만들어 import 한다면 더욱 한 눈에 보기 수월해진다.

 

 

📌 용어정리

case 1.

if (accessType === 'kakao') {
    return Array.from(data)
    .filter(item => !(item.sugar > 5000))
    .sort((a, b) => a.energy - b.energy);
}

💡 코드 동작 자체는 쉽게 예측할 수 있지만 의도는 파악하기 쉽지 않다. (=이게 뭐하는 코드지)

const shouldDisplay = accessType === 'kakao';
if (shouldDisplay) {
    const foods = Array.from(data);
    const healthyFoods = foods.filter(menu => {
        const isUnhealthy = food.sugar > 5000;
        return !isUnhealthy;
    });
    const calorieOrderedFoods = healthyFoods.sort((a, b) => a.energy - b.energy);
    return calorieOrderedFoods;
}

✅️ 두 코드는 동일하게 동작하는 코드이지만 후자의 경우 더욱 의도 파악이 간결하다. 물론 코드의 길이는 더 길어졌지만 가독성을 더욱 높여주는 효과를 보였다.

 

📌 각주

<div style="display: flex; width: 100px; height: 100px; background-color: tomato; z-index: 1;">저는 HTML로 프로그래밍해요.</div>

💡 

#bullshit {
    display: flex;
    width: 100px;
    height: 100px;
    background-color: tomato;
    z-index: 1;
}

<div id="bullshit">저는 HTML로 프로그래밍해요.</div>

✅️ 

 

 

Ⅱ. 후기

기존에는 마인크래프트 플러그인 개발을 혼자서 진행했었다. 그러던중 코딩 봉사활동을 통해 ZEP 개발을 시작하며 나의 코드를 다른 개발자가 본다는 부담감에 코드 리팩토링, 가독성에 관심을 갖게 되었다. 그럼에도 가독성과 같이 남들에게 보여지는 부분(디자인)에 대해서는 여전히 모르겠다. 가독성을 논하고있는 글임에도 이 글의 가독성은 별로 좋지 않은 것 같다..

 

Ⅲ. 참고

https://if.kakao.com/2022/session/80

if(kakao)dev2022