변수로 설명하면 가독성이 높아진다.

실무에서 코딩을 할 때 당연하게 수행하는, 의미를 변수나 함수로 나타내는 행동을 켄트 벡이 말해줍니다.

어렵게 크고 복잡한 코드의 표현식을 이해했다면 전체에서 일부 표현식을 추출한 후, 표현식의 의도가 드러나도록 변수 이름을 만들어 할당해 보세요. - p.53

가끔 누가 코드를 이렇게 짜논 나 를 발견하기도 하는데요.

제 경험내에서도 설명하는 변수가 가지는 인식의 효율이 크다고 느끼고 있기 때문에 깊은 공감을 합니다.

그리고 당연하게도 커밋을 분리하라는 말을 합니다.

코드 정리에 대한 커밋commit과 동작 변경에 대한 커밋은 분리해야 합니다. - p.54

이를 저는 각각의 커밋이 만들어가는 맥락이 중요하기 때문에 이를 만들어가는 과정으로 받아들입니다.

설명하는 xxx의 어려움

저도 설명하는 변수, 상수, 메서드를 사용하는 것에 반대하는 것은 아닙니다.
오히려 차라리 길어질지언정 다 갖다 넣자! 라고 하는 편에 속합니다.
다만 이 설명이 누구나 알아들을 수 있는 설명이냐 관점에서 어려움을 겪는 상황이 있습니다.
저는 다음과 같은 메서드 명을 본적이 있습니다.

fun sendAlarmQuietly() {
    // 알람 부서에서 제공하는 API 호출
}

Quietly? 처음에 알림을 조용히 보낸다? 알람을 제공하는 곳에서 조용히 보내기 기능이 있나보다. 생각했습니다. ***Quietly 라고 postfix가 붙은 메서드는 심심찮게 보였습니다.
이런 것들은 callee 쪽에서 조용히 처리해주는 기능이 있는걸로 인지하고 있었습니다.

나중에 알게되었습니다.
Quietly는 발생하는 exception을 무시한다는 뜻이라는 것을.
조용히 보내기 기능이 있는 것이 아니라, 그냥 우리가 알람을 보낼 때 문제가 발생해도 무시한다는 것이었습니다.

이런경우, 우리는 예외를 무시하는 메서드에는 **Quietly 라고 명명해야 된다는 규칙을 정해놓고 어딘가 적어놨어야 하는 걸까요?
이런 경우가 참 어려운 것 같습니다.
설명하는건 좋은데... 이 설명이 누구나 다 알아들을 수 있는 설명이야?!

잊지 않으려고 노력하는 말이 있습니다.
그 자체로 설명이 가능하다는 것을 뜻하는 'self-descriptive' 와
'코드 자체가 문서가 되게 하라' 는 말 입니다.
말 자체에 대한 이해는 어렵지 않게 할 수 있지만, 보통 현실은 이론과 다른 경우가 많아 실무에 적용하는 것을 또 다른 문제라고 생각 합니다.

그럼에도 주석 없는 코드와 동화책 처럼 읽히는 코드를 작성하기 위해서는, 약속된 구조에 코드를 작성하는 것도 중요하지만, 늘 함께 있어 소중함을 깜빡하는 변수의 이름을 짓는 일을 소홀히 해서는 안되겠다고 다시 한 번 생각 했습니다.

가끔 주석 없이 표현 해보겠다고 장고 끝에 긴 이름의 변수를 만들면, '이럴 거면 용어 사전에 그럴듯한 이름을 가져다 조합해서 쓰고, 주석에 설명을 잘 남겨놓자' 는 결론에 도달하기도 합니다.

변수 이름을 짓기 어렵다면 다른 문제가 (예를 들면, 모호한 도메인 정의, 풀고자 하는 문제를 해결할 수 없는 구조 등) 있어서는 아닐지 되돌아보고, 더 늦기 전에 개념부터 재설계 하는 것을 고민해보는 것도 좋겠다 생각 했습니다.

---

추가로 짧게 언급 된 '코드 정리에 대한 커밋과 동작 변경에 대한 커밋은 분리' 한다는 부분에서 한 편의 소설을 읽는 느낌을 받을 수 있을까 상상 했습니다.

코드를 찾아보고 AI와 함께 코드 정리하기

먼저 코드를 찾아봅니다.
현재 사이트(tidyfirst.bettercode.kr) React JSX 코드가 눈에 들어옵니다.
댓글 목록 중 자신이 단 댓글이면 수정 버튼이 보이게 하는 코드네요.
조금은(?) 긴 표현식이 눈에 들어 옵니다.

{
    session && session.user.id === comment.createdBy && !editMode &&
    <Button
        size="sm"
        variant="text"
        color="gray"
        className="flex items-center gap-1 flex-shrink-0 ml-auto"
        onClick={toggleEditMode}
    >
        <Pencil className="w-4 text-4 h-4" />
        수정
    </Button>
}

어렵고 크고 복잡한 코드의 표현식을 이해했다면 전체에서 일부 표현식을 추출한 후, 표현식의 의도가 드러나도록 변수 이름을 만들어 할당해 보세요.

JSX 안에서 설명하는 변수를 만들어서 표현하면 좋겠다는 생각이 듭니다.
그런데... 저는 JSX에서 그런식으로 사용해 본 적이 없네요.
저는 Cursor Code Editor 를 쓰고 있습니다.
위의 코드를 블록으로 잡아 AI 에게 말합니다.

표현식을 변수로 리펙토링해줘

아래와 같이 만들어 주네요.

{
    (() => {
        const isCurrentUserComment = session && session.user.id === comment.createdBy;
        const showEditButton = isCurrentUserComment && !editMode;

<br/>

        return showEditButton && (
            <Button
                size="sm"
                variant="text"
                color="gray"
                className="flex items-center gap-1 flex-shrink-0 ml-auto"
                onClick={toggleEditMode}
            >
                <Pencil className="w-4 text-4 h-4" />
                수정
            </Button>
        );
    })()
}

음. 조금 더 나아졌나요? :)

변수명 + 함수명

저는 로직을 쉽게 읽기 위해선 가장 중요한 개념들이 도드라지게 표현 되어야 한다고 생각합니다.
그런면에서 변수명은 무언가 처리된 결과가 그 변수명과 함께 자신을 표현한다고 생각하구요.

그런데 이 과정에서, 변수의 최종 상태를 유도하는 과정들이 지저분하게 나열 되어 있으면
도드라짐이 덜해진다고 생각해요.
그래서 대부분의 로직이 추상화 레벨에 맞춰 private method에 의해 처리 되고, 그 수행 결과가 final 변수로 반환 됩니다.

이 과정의 반복을 통해 각 추상화 레벨에서, 그 수준에 맞게 도드라지는 읽기 쉬운 코드들이 나오는 것 같아요.