[8팀 최준만] [Chapter 2-1] 클린코드와 리팩토링

[junman95]

과제 체크포인트

기본과제

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

심화과제

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

과제 셀프회고

과제에서 좋았던 부분

• 바닐라js 에서의 렌더링 방식에 대해 코딩을 많이 해볼 수 있어서 좋았습니다.
• 의존성이 엮여있는 코드가 얼마나 위험한지 체감했으며, 신규로 코드를 작성할 때 이러한 이슈를 최소하 하기 위해 노력하려 합니다.
• 그럼에도 이렇게 가독성과 로직이 엉망인 경우에는 작은 단위의 로직부터 단일책임 원칙에 의거해 함수 모듈화를 시도해 봐야 함을 배웠습니다.
• 진행하면서 컨벤션을 팀원들과 확립해 나갔는데, 대표적인 것들에 대해서는 하나의 뷰 컴포넌트에서 설명이 가능한 수준으로 나타내 보았습니다. (제출 전날 정해진 컨벤션이어서 당장 100% 적용은 아니지만 다음주부터 이렇게 가져갈 예정입니다.)

import { Product } from '../../../shared/entity/model/Product';

// !rule : interface
// !rule : ComponentName + Props
interface NewCartItemProps {
  item: Product;
}

// !rule : ComponentName
// !rule : function, not arrow function
// !rule : object parameter
function NewCartItem({ item }: NewCartItemProps) {
  return '
        <span>${item.name} - ${item.price}원 x 1</span>
        <div>
          <button class="quantity-change bg-blue-500 text-white px-2 py-1 rounded mr-1" 
                  data-product-id="${item.id}" data-change="-1">-</button>
          <button class="quantity-change bg-blue-500 text-white px-2 py-1 rounded mr-1" 
                  data-product-id="${item.id}" data-change="1">+</button>
          <button class="remove-item bg-red-500 text-white px-2 py-1 rounded" 
                  data-product-id="${item.id}">삭제</button>
        </div>
      ';
}

// !rule : export specific function
export { NewCartItem };

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

• 새로 회사에 출근하게 되면서 시간을 쓰기가 어려운 상황이어서 아쉬움이 많이 남는다.
• appendChild -> innerHTML 방식으로 교체하면서 의존성을 끊어내는 작업을 후반부에 했는데, 이부분을 선행해서 했으면 좀더 좋은 결과물을 냈을까 하는 생각이 든다.

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

• 이정도로 의존성이 뒤죽박죽 섞여있다면 어떤 부분부터 손을 봐야 할까요? 예제는 억지로 섞어놓은 느낌이라면, 회사에서 마주하는 코드는 진짜 리팩토링시 나비효과가 크게 날 것 같다고 생각이 드네요.

[wonjung-jang]

오오.. view를 나누신 거랑 렌더링 하는 방식이 특이한 것 같아요! 어떻게 이렇게 작성하실 생각을 한 거고, 사용하면서 겪은 점들 한 번 공유해주셨으면 좋겠습니다!