[6팀 김봉준] [Chapter 2-1] 클린코드와 리팩토링

[BongjoonKim]

심화과제 : React로 리팩토링

과제 체크포인트

기본과제

• 코드가 Prettier를 통해 일관된 포맷팅이 적용되어 있는가?
• 적절한 줄바꿈과 주석을 사용하여 코드의 논리적 단위를 명확히 구분했는가?
• 변수명과 함수명이 그 역할을 명확히 나타내며, 일관된 네이밍 규칙을 따르는가?
• 매직 넘버와 문자열을 의미 있는 상수로 추출했는가?
• 중복 코드를 제거하고 재사용 가능한 형태로 리팩토링했는가?
• 함수가 단일 책임 원칙을 따르며, 한 가지 작업만 수행하는가?
• 조건문과 반복문이 간결하고 명확한가? 복잡한 조건을 함수로 추출했는가?
• 코드의 배치가 의존성과 실행 흐름에 따라 논리적으로 구성되어 있는가?
• 연관된 코드를 의미 있는 함수나 모듈로 그룹화했는가?
• ES6+ 문법을 활용하여 코드를 더 간결하고 명확하게 작성했는가?
• 전역 상태와 부수 효과(side effects)를 최소화했는가?
• 에러 처리와 예외 상황을 명확히 고려하고 처리했는가?
• 코드 자체가 자기 문서화되어 있어, 주석 없이도 의도를 파악할 수 있는가?
• 비즈니스 로직과 UI 로직이 적절히 분리되어 있는가?
• 코드의 각 부분이 테스트 가능하도록 구조화되어 있는가?
• 성능 개선을 위해 불필요한 연산이나 렌더링을 제거했는가?
• 새로운 기능 추가나 변경이 기존 코드에 미치는 영향을 최소화했는가?
• 리팩토링 시 기존 기능을 그대로 유지하면서 점진적으로 개선했는가?
• 코드 리뷰를 통해 다른 개발자들의 피드백을 반영하고 개선했는가?

심화과제

• 변경한 구조와 코드가 기존의 코드보다 가독성이 높고 이해하기 쉬운가?
• 변경한 구조와 코드가 기존의 코드보다 기능을 수정하거나 확장하기에 용이한가?
• 변경한 구조와 코드가 기존의 코드보다 테스트를 하기에 더 용이한가?
• 변경한 구조와 코드가 기존의 모든 기능은 그대로 유지했는가?
• 변경한 구조와 코드를 새로운 한번에 새로만들지 않고 점진적으로 개선했는가?

과제 셀프회고

과제에서 좋았던 부분

1. 채용 일정과 겹쳐 많은 시간을 할애하지는 못 했지만 ㅠ 코드 구조와 변수 명에 시간을 투자해 고민을 해봤다는 것에 만족하였습니다.
2. 솔직히 저희 조는 컨벤션을 정하는 것을 포함하는 클린 코드를 위한 규칙 논의를 별로 하지 못했습니다. 그래도 코어타임 시간에 저와 몇 분은 개발 화면을 공유해서 과제를 수행했는데, 학습 메이트분이나 동료 분들이 제 코드를 보고 조금 조금 의견 주시는 것과 제가 다른 분 코드를 보고 참고할 수 있다는 것이 도움이 꽤 되었습니다.

과제를 하면서 새롭게 알게된 점

명령령으로 되어있던 코드를 선언형으로 짜야 리액트로 리팩토링을 할 때 편하다고 학습 메이트 분과 멘토님이 말씀해주셨는데, 선언형에 대한 개념을 정확하게 이해하지 못했던 것 같습니다. 멘토링 시간에 확실히 이해했으나 이미 너무 과제 진행을 많이 해버려서, 이번 주 토요일에 다른 분들 과제 수행한 것들을 보면서 다시 코드를 작성해 볼 생각입니다.

과제를 진행하면서 아직 애매하게 잘 모르겠다 하는 점, 혹은 뭔가 잘 안되서 아쉬운 것들

개념이 이해가 안 되는 건 아닙니다. 함수명 잘 짜고, 함수 단일 원칙이라던가, 조건문 단순화, 부수효과 제거 등은 사실 모르지 않는데, 이게 막상 코드를 짜려고 하면 잘 안 되는게 문제입니다 ㅎㅎㅎㅎㅎㅎㅎㅎㅎ 이건 금방 고쳐지지 않을 것 같고, 꾸준히 의식하고 다른 분들 코드를 보면서 학습하는 수밖에 없을 것 같습니다.

리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문

이전 과제들에 비해 시간 투자를 많이 하지 못 한것이 아쉬운데 ㅜ, 테오의 토요일 과제 리뷰와 best Practice과제 보면서 학습해볼 생각입니다. 궁금한 점은 멘토링 시간에 다른 분들 질문을 포함해서 어느 정도 해결 된 것 같습니다. 다시 복기해보면서 학습하고 있습니다.

[Anne-Hyeyeon]

외부에 선언된 변수(subTot)를 함수가 직접 변환시키고 있는데요, 외부 상태를 건드리지 않고 함수 내에서 같은 입력값에 대해 같은 결과를 반환하는 순수 함수를 이용해 보셨음 좋겠습니다!

function calculateCart(cartItems, itemList) {
  return cartItems.reduce(
    (acc, cartItem) => {
      const curItem = itemList.find(item => item.id === cartItem.id);
      if (!curItem) return acc;

      const qty = parseInt(
        cartItem.querySelector("span").textContent.split("x ")[1]
      );
      const itemTot = curItem.price * qty;

      // 할인율 계산
      const discountRates = {
        p1: 0.1,
        p2: 0.15,
        p3: 0.2,
        p4: 0.05,
        p5: 0.25,
      };
      const disc = qty >= 10 ? discountRates[curItem.id] || 0 : 0;

      // 누적 합산
      acc.subTot += itemTot;
      acc.totalCost += itemTot * (1 - disc);
      acc.tally += qty;

      return acc;
    },
    { subTot: 0, totalCost: 0, tally: 0 } // 초기값
  );
}

// 호출 시
const { subTot, totalCost, tally } = calculateCart(cartItems, itemList);

[jmlee9707]

DISCOUNT_RATE, DISCOUNT_PROBABILITY 와 동일하게 대문자로 ITEM_LIST로 지으면 어땠을까요??
같은 constants 라고 구분할 수 있도록이요! ㅎ

[jmlee9707]

setCart, setInventory 관련해서 반복되는 코드들이 보이는데 공통함수를 만들어서 뺴는 것은 어떨까요??😆