클린 코드: 왜 필요한가?

가독성 좋은 코드란 무엇일까요?

코드 퀄리티가 낮으면 비즈니스적으로 많은 악영향을 미친다는 것을 알게 되었습니다. 협업하는 다른 개발자들과 함께 개발을 진행할 때, 문제가 없던 코드에 몇 가지 변경만 가했는데도 에러가 빈번하게 발생하는 경우가 있습니다. 이러한 에러들을 분석해보면, 결국 원인이 되는 코드에서 문제가 발생하는 것을 알게 됩니다.

하지만 그 문제점을 분석하는 과정에서 많은 시간이 소비되고, 이에 따른 대응이 필요합니다.
최근 저는 회사의 디지털 트윈 플랫폼을 개발하면서 예상치 못한 부분에서 전혀 관련 없는 코드 한 줄이 문제가 되는 상황을 경험했습니다.
문제점을 찾고 해결하는 과정에서 여러 단계가 겹치는 코드를 보면서, 가독성이 단순히 코드를 보기 좋게 만드는 것이 아니라 코드의 효율성을 높인다는 것을 깨달았습니다.

이전에는 단순히 보기 쉽고 클린 코드만 생각했지만, 이제는 협업 과정에서 효율적이고 쉽게 문제를 파악할 수 있는 가독성 좋은 코드를 작성해야겠다고 생각하고 실천하고 있습니다.
현재 프로젝트뿐만 아니라, 다른 프로젝트에서도 재사용 가능한 컴포넌트를 구성하면 유연하게 적용할 수 있어 좋은 경험을 하게 되었습니다.

저희 팀은 시니어 개발자가 없는 상황에서 ChatGPT-4를 사용하여 코드 리뷰도 받아보고, 팀원들 간의 코드 리뷰를 통해 더 나은 코드와 효율적이고 재사용성이 뛰어난 코드를 작성하고자 노력하고 있습니다.

클린 코드는 단순히 짧게 작성하고 컴포넌트를 분리하는 것에 그치지 않습니다. 클린 코드의 진정한 목적은 코드 로직을 신속하게 파악하고, 팀원들이 쉽게 이해할 수 있으며, 에러 발생 시 빠르게 대응하여 비즈니스 가치를 극대화하는 데 있습니다.

클린 코드를 작성하는 중요성을 이해하기 위해, 예시 이미지와 함께 살펴보겠습니다.

처음에는 단순하게 input만 존재하던 component에서, input의 입력값에 따라 추가된 코드들이 들어가면서 관련이 없는 코드들이 하나의 component에 묶이게 되었습니다.
그 결과 하나의 함수에 여러 기능이 포함되는 복잡성이 생겼습니다.

handleCheckMember 함수를 보면 setMember에 value를 설정하고, 다시 if문을 사용해서 setShowConsulting의 boolean 상태값을 조정하는 두 가지 기능이 추가되어 복잡해졌습니다.

예시 사진을 보면, 초록색으로 구성된 부분은 멤버 여부 확인을 위한 구간이며, 멤버 확인을 마친 후의 구간은 보라색으로 표시되어 있습니다. 팝업을 보여줄지 여부에 따라 진행되는 노란색 구간에는 회원가입 로직이 포함되어 있어 정렬되지 않은 코드 구성을 볼 수 있습니다.

이러한 복잡성은 규모가 커질수록 유지보수가 어려워지고, 협업 과정에서 무해하다고 생각했던 함수들이 오히려 에러를 발생시키는 상황을 초래할 수 있습니다.
따라서, 가독성이 좋은 코드를 구성하는 것이 매우 중요합니다.

이제 기능별로 구성하고, 가독성이 좋은 코드로 만들어 보겠습니다.

먼저, 가독성이 좋은 코드를 작성하려면 기능을 명확하게 정의하고 단순히 줄이는 것이 아니라 재사용 가능하게 구성하는 것이 중요합니다.

Popup 컴포넌트는 event와 title을 커스텀할 수 있도록 설계하여 재사용성을 높였습니다. 또한, 기능적으로 많은 부분을 포함하지 않고 간단한 구조로 구성하여 이해하기 쉽도록 분리하였습니다.

const Popup = ({ title, children, onClose }) => (
  <div className="popup">
    <h2>{title}</h2>
    {children}
    <button onClick={onClose}>닫기</button>
  </div>
);

회원가입은 다른 기능과는 완전히 별개이기 때문에, 기능적인 부분을 명확히 구분하여 구성하였습니다. 이렇게 함으로써 코드의 가독성을 높이고 유지보수가 용이하도록 하였습니다.

const SignUpForm = ({ onClose }) => (
  <Popup title="회원가입" onClose={onClose}>
    <form>
      <input type="text" placeholder="이름" />
      <input type="email" placeholder="이메일" />
      <input type="password" placeholder="비밀번호" />
      <button type="submit">가입하기</button>
    </form>
  </Popup>
);

ConsultantView 컴포넌트는 member로 인증된 회원에게 팝업을 보여줄지 판단하는 기능을 명확히 구분하였습니다. 이 과정에서 Popup 컴포넌트를 사용하여 재사용성을 잘 활용한 것을 확인할 수 있습니다.

const ConsultantView = ({ showPopup, onTogglePopup }) => (
  <>
    <button onClick={onTogglePopup}>상담사 보기</button>
    {showPopup && (
      <Popup title="상담사 이미지" onClose={onTogglePopup}>
        <img src="/path/to/consultant-image.jpg" alt="상담사" />
      </Popup>
    )}
  </>
);

InputCom은 input 부분을 따로 분리하여, 특정 기능에서만 사용하는 것이 아니라 다른 곳에서도 재사용할 수 있도록 구성되었습니다.

const InputCom = ({ value, onChange }) => (
  <input 
    value={value} 
    onChange={onChange} 
    placeholder="입력하세요" 
  />
);

종합적으로 코드를 구성한 부분을 import하여, 위에 보여준 사진과는 다르게 여기에서는 사용자 회원 여부를 확인하고 컨트롤하는 컴포넌트로 기능을 구현하였습니다. 이렇게 구성함으로써 추후 유지보수도 간단하게 할 수 있음을 확인할 수 있습니다.

const UserTypeButton = () => {
  const [member, setMember] = useState('');
  const [showPopup, setShowPopup] = useState(false);

  const isMember = member === 'ok';

  const handleMemberInput = (event) => {
    const value = event.target.value;
    setMember(value);
  };

  const togglePopup = () => {
    setShowPopup(!showPopup);
  };

  return (
    <>
      <InputCom value={member} onChange={handleMemberInput} />
      {isMember ? (
        <ConsultantView showPopup={showPopup} onTogglePopup={togglePopup} />
      ) : (
        <SignUpForm onClose={togglePopup} />
      )}
    </>
  );
};

추천영상
https://www.youtube.com/watch?v=edWbHp_k_9Y

간략 내용정리

1. 가독성 향상: 명확하고 일관된 코드 스타일을 유지하면 다른 개발자들이 코드를 쉽게 읽고 이해할 수 있습니다.

2. 유지보수 용이: 잘 구조화된 코드는 수정과 업데이트가 쉽습니다. 이는 버그 수정이나 새로운 기능 추가 시 큰 도움이 됩니다.

3. 재사용성 증가: 모듈화된 코드와 재사용 가능한 컴포넌트는 개발 시간을 단축시키고 일관성을 유지하는 데 기여합니다.

4. 협업 효율성: 클린코드는 팀원 간의 협업을 원활하게 하여 프로젝트의 전반적인 생산성을 높입니다.

5. 디버깅 용이: 명확한 코드 구조는 오류를 찾고 해결하는 데 걸리는 시간을 줄여줍니다.

6. 비즈니스 가치 향상: 코드 품질이 높아지면 제품의 신뢰성과 안정성이 증가하여 비즈니스 가치를 높일 수 있습니다.