Goodbye .. 가 아니라 HELLO Clean Code !

시작하며

"클린 코드" 의 중요성을 알고있고 코드를 작성할때 적용하려고 노력하고있다. 코드를 작성하는 과정에서도, 작성한 후에도 코드리뷰를 거치며 어떻게 추상화하면 좋을지, 구조를 어떻게 변경하면 좋을지 등 이것저것 변경사항을 적용힌다.

추상화가 잘 된 코드, 독립성을 가지고 있는 코드, 네이밍이 잘 되어있는 코드, 특히 중복이 없는 코드가 좋은 코드 (즉, 클린 코드) 라고 생각했다. 하지만 이 글을 읽으며 클린 코드란 무엇인가에 대해 다시 한 번 생각하게 되었다.

그래서 나는

작성자가 겪은 상황에 내 상황을 빗대어 생각해볼 수 있었다. 여섯개의 타입마다 icon 과 클릭했을때 실행할 onClick 함수를 가지고 있다. 아이템 리스트를 받아서 각 아이템의 상태에 따라 보여줄 아이콘 이미지와, 클릭 함수를 다르게 하여 보여주는 것이 목적이다. 6개의 조건 처리를 위해 각 조건을 객체로 추상화하여 관리하는 것이 코드 중복을 해소할 수 있을 것 같았다.

무작정 if 문을 통해 타입을 확인하는 것보다는 아래처럼 코드를 그룹화 하는 것이 반복된 계산을 줄여줄 것이라고 생각했다.

// 기존 코드
interface StampButtonAttrs {
  icon: string;
  onClick: () => void;
}

interface StampButtonAttrsDatabase {
  [key: string]: StampButtonAttrs;
}

const StampTypeMap: StampButtonAttrsDatabase = {
    OPEN: { icon: 'image-url', onClick: null  },
    PENDING: {
      icon: 'image-url',
      onClick: () =>
        ModalDom.alert({
          closeText: '',
          text: '',
        }),
    },
    REWARD: {
      icon: 'image-url',
      onClick: null,
    },
    CLOSE: { icon: 'image-url', onClick: null },
    DONE: { icon: 'image-url', onClick: null },
    REJECT: {
      icon: 'image-url',
      onClick: () =>
        ModalDom.alert({
          closeText: '',
          text: '',
        }),
    },
  };

특정 아이콘을 추가하거나 동작을 변경하려면 모든 곳에서 메서드를 업데이트하는 대신 한 곳에서 이를 수행할 수 있다. 한 곳에서 그룹으로 관리 되고 있고, map 한번으로 컴포넌트를 그릴 수 있기 때문에 나름 클린 코드라고 생각했는데.....더보기

// 개선된 코드
return (
  ...
  {stamp.status === 'OPEN' && (
         		<StampButton
                  icon="image-url"
                  onClick={handleCameraOpen}
                />
              )}
              {stamp.status === 'PENDING' && (
                <StampButton
                  icon="image-url"
                  onClick={() =>
                    ModalDom.alert({
                      closeText: '',
                      text: '',
                    })
                  }
                />
              )}
              {stamp.status === 'REWARD' && (
                <StampButton icon="image-url" onClick={null} />
              )}
              {stamp.status === 'CLOSE' && (
                <StampButton icon="image-url" onClick={null} />
              )}
              {stamp.status === 'DONE' && (
                <StampButton icon="image-url" onClick={null} />
              )}
              {stamp.status === 'REJECT' && (
                <StampButton
                  icon="image-url"
                  onClick={() =>
                    ModalDom.alert({
                      closeText: '',
                      text: '',
                    })
                  }
                />
              )}
              )

코드 리뷰 이후 위처럼 코드를 바꾸었다. 나는 "클린 코드, 반복적인 계산 제거"에만 집중하다보니, 읽기 쉬운 코드를 만들지 못했던 것이다. 첫번째 코드가 더욱 깔끔해 보일 수는 있지만, 코드를 이해하기 위해 파악해야할 요소들이 많다. (ex. interface 구조 파악 등)

그렇다고 클린 코드를 지양하자는 것은 아니다. 하나의 로직이 여러 곳에서 쓰이고, 중요한 역할을 하고 있다면 추상화를 적절히 활용하여 클린 코드에 집중하는 것이 좋다. 하지만 위와 같은 경우는 한번만 쓰일 기능이며, 그저 아이템들을 보여주는 기능에 불과하기 때문에, 추상화에 집중하기 보다는 한 눈에 보기 쉬운 코드가 나은 것이다.

두번째 코드처럼 작성하게 되면 반복되는 로직이 추가되고, 코드가 길어질 수는 있으나, 코드가 단순하며 이해하기 쉽다.

마치며

물론 클린 코드가 중요하지만....클린 코드 책도 읽었지만.... 때로는 클린 코드에 지나치게 집중하는 것이, 읽기 쉬운 코드(이해하기 쉬운 코드) 생성을 방해하는 것 같다.
또한 복잡한 코드를 단순하게 만들기 위해 클린 코드를 작성하려고 했던 건데, 생각해보니 오히려 더 복잡하게 바뀌었다.

앞으로도 클린 코드를 작성하기 위해 탐구하고, 노력할 것임은 변하지 않지만 이번 경험을 계기로 새로운 관점이 생겼다 !!! 누군가 내 코드를 볼때, 한번 더 생각하지 않아도 되는 코드를 만들고 싶다.