클린코드 북클럽 TIL #04

클린코드 북클럽 - Day 3

🏷️ 오늘 읽은 범위: 3장 함수

책에서 기억하고 싶은 내용

• 함수를 만드는 첫째 규칙은 ‘작게!’다. 함수를 만드는 둘째 규칙은 ‘더 작게!’다 (p.42)

• 함수가 확실히 ‘한 가지’ 작업만 하려면 함수 내 모든 문장의 추상화 수준이 동일해야 한다 (p.45)

  • 예시) 리액트 컴포넌트 추상화 단계

    • // 높은 추상화
      <Title>별점을 매겨주세요</Title>
      // 낮은 추상화
      <div>
        {STARS.map(() => <Star />)}
      </div>
      // 높은 추상화
      <Reviews />
      // 중간 추상화
      {rating !== 0 && (
        <>
          <Agreement />
          <Button rating={rating}
        </>
      )}
      

    • // 비슷한 추상화 단계
      <Title>별점을 매겨주세요</Title>
      <Stars />
      <Reviews />
      <AgreementButton show={rating !== 0} />
      

• 함수는 뭔가를 수행하거나 뭔가에 답하거나 둘 중 하나만 해야 한다. 둘 다 하면 안 된다. 객체 상태를 변경하거나 아니면 객체 정보를 반환하거나 둘 중 하나다. (p.56)

• 소프트웨어를 짜는 행위는 여느 글짓기와 비슷하다. (중략) 내가 함수를 짤 때도 마찬가지다. 처음에는 길고 복잡하다. 들여쓰기 단계도 많고 중복된 루프도 많다. 인수 목록도 아주 길다. 이름은 즉흥적이고 코드는 중복된다. 하지만 나는 그 서투른 코드를 빠짐없이 테스트하는 단위 테스트 케이스도 만든다. (p.61)

오늘 읽은 소감

• 함수는 작게 만들어야 한다. 한가지 역할을 하는 함수는 작다.
• 내가 작성한 리액트 컴포넌트를 볼 때면 항상 스크롤을 해가며 코드 파악을 하는 불편함이 있었는데 그 이유를 알 것 같다. 너무 많은 일들을 하고 있고 추상화 수준이 제각기여서. 컴포넌트를 작고 단순하게 유지하고 각 컴포넌트의 역할을 명확히 하도록 애써야겠다.
• 처음에 코드를 작성할 때부터 잘 작성해야 하나? 라는 생각이 들면서 코드 작성에 부담이 생겼다. 하지만 저자는 글짓기 과정에 비유하며 초안을 작성하고 수정하여 코드를 완성한다고 하였다. 겁먹지 말고 현재의 최선으로 코드를 작성하고 수정하도록 하자.

궁금한 내용이 있거나, 잘 이해되지 않는 내용

• 함수의 인자가 늘어날수록 이해하기 어렵다고 했다. 리액트에서는 컴포넌트를 props로 데이터를 전달하면 종종 많은 인자를 넘겨준다. props로 객체를 전달할 때는, 객체가 매번 새로운 참조로 전달되면 컴포넌트가 리렌더링될 수 있다. 효율적인 props 전달은 어떻게 해야할까?
• 함수가 상태를 변경하는 경우 어떻게 관리하고 최소화할 수 있을까?

(추가 학습) 토스 | SLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code

원하는 로직을 빠르게 찾으려면

• 하나의 목적을 가진 코드가 흩뿌려져 있을 때 응집도를 높여서 뭉쳐두어야 하고

• 함수가 여러 코드 응집 Tip: 핵심 데이터와 세부 구현 나누기

• 당장 몰라도 되는 디테일은 뭉치고 코드 파악에 필수적인 핵심 정보는 바깥에서 전달한다.
• 선언적 프로그래밍 - 핵심 데이터만 전달 받고 세부 구현은 뭉쳐 숨겨 두는 개발 스타일

단일책임 - 하나의 일을 하는 뚜렷한 이름의 함수를 만들자

• 한 가지 일만 하는, 명확한 이름의 함수를 만들자
  • 중요 포인트가 모두 담겨 있는 함수명을 지어야 한다
  • 이미 있는 함수에 기능을 추가하게 되면 잡탕이 된다
  • -> 함수로 분리해서 필요한 상황에 호출하자
• 한 가지 일만 하는, 기능성 컴포넌트

추상화 - 핵심 개념을 뽑아내자

• 추상화 수준이 섞여 있으면 전체적인 코드가 어느 수준으로, 구체적으로 기술된 지 파악할 수 없다

  // 높은 추상화
   <Title>별점을 매겨주세요</Title>
   // 낮은 추상화
   <div>
     {STARS.map(() => <Star />)}
   </div>
   // 높은 추상화
   <Reviews />
   // 중간 추상화
   {rating !== 0 && (
     <>
       <Agreement />
       <Button rating={rating}
     </>
   )}
  

  • 아래는 추상화 수준이 높은 것끼리, 또 낮은 것끼리 모아 추상화 단계를 비슷하게 정리하였다.

   <Title>별점을 매겨주세요</Title>
   <Stars />
   <Reviews />
   <AgreementButton show={rating !== 0} />
  

#노개북 #노마드코더 #개발자북클럽