[3팀 장루빈] Chapter 2-1. 클린코드와 리팩토링

[JangRuBin2]

https://github.com/hanghae-plus/front_6th_chapter2-1

과제 체크포인트

기본과제

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

심화과제

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

과제 셀프회고

과제를 하면서 내가 제일 신경 쓴 부분은 무엇인가요?

1. 단계적 접근과 안전성
   AI가 다해줬다는 사람들이 있길래 정말 다해주는지 확인하기 위해 모든 것을 한 번에 AI에게 맡겨서 처리하도록 해봤다.
   결과는 당연히 꽝이었다.
   ✅ 하나씩 단계적으로 진행했을 때는 문제가 없었다.

• 컴포넌트 분리 => 처음부터 이름을 바꾸거나 구조를 파악해서 분리하지 않고 일단 떼냈다.
• 이벤트 핸들러 분리
• 전역 변수 제거는 prodList부터 시작 => 문제가 없는것을 확인후 점진적으로 state에 할당하는 식으로 진행
• 각 단계마다 테스트 실행으로 안전성 확보

2. 기존 기능 유지
   핵심 원칙: "기존 기능이 깨지면 리팩토링이 아니다"

• 테스트 코드를 기준으로 기능이 검증되니 수정 => 테스트 순서로 반복
• 사용자 경험 변화 없이 내부 구조만 개선

3. 실용적인 아키텍처 설계
   ❌ 과도한 추상화: 모든 것을 완벽하게 분리
   ✅ 실용적 접근: 필요한 만큼만 분리

• 이벤트 스토어: DOM 요소와 이벤트 관리
• 컴포넌트 분리: 재사용 가능한 UI 요소
• 헬퍼 함수: DOM 접근 안전성 확보

4. 성공한 과정
5. 이벤트 핸들러 분리

// ❌ 기존: 인라인 이벤트
manualToggle.onclick = function () { ... }

// ✅ 개선: 함수 분리
function handleManualToggle() { ... }
manualToggle.addEventListener("click", handleManualToggle);

3. 이벤트 스토어 구현

export class EventStore {
  constructor() {
    this.events = new Map();
    this.elements = new Map();
    this.handlers = {
      addToCart: null,
      cartItemClick: null,
      manualToggle: null,
      manualOverlayClick: null,
    };
  }...

5. 전역 변수 리팩토링

// ❌ 기존: 전역 변수 남용
var prodList, bonusPts, itemCnt, lastSel, totalAmt;

// ✅ 개선: 헬퍼 함수로 캡슐화
function getCartTotalElement() { ... }
function getSummaryDetailsElement() { ... }

DOM 요소 접근 안전성

// ❌ 기존: 직접 DOM 접근
const totalDiv = sum.querySelector(".text-2xl");

// ✅ 개선: null 체크 포함
function getCartTotalElement() {
  return document.querySelector("#cart-total .text-2xl");
}

과제를 다시 해보면 더 잘 할 수 있었겠다 아쉬운 점이 있다면 무엇인가요?

1. 일괄적 변경은 안됨
   모든 전역 변수를 한 번에 스토어로 변경 혹은 모든 DOM요소 랜더링 후 이벤트 리스너를 만들었는데 테스트코드를 통과하지 못했다.
   직접 방향성을 제시해줄 때는 AI가 참 편리하게 일을 대신해줬다.

2. Git 작업의 복잡성
   중간에 detached HEAD상태인지도 모르고 커밋을 했다가 모든 작업 내용을 날릴 뻔 했다.
   cursor와 vsCode를 연결하는 과정에서 문제가 생긴듯한데 원인은 정확하게 찾지 못했다.
   앞으로는 작업중에도 git 상태를 확인하는 습관을 들여야할 듯 함

3. 체계적인 계획 부족
   아쉬운 점: 처음부터 전체 아키텍처를 설계하지 않음
   개선 방안: 리팩토링 전 전체 구조도를 그려보기

4. 문서화 부족
   README를 작성하는 습관을 들여야하는데 아직도 익숙하지 않은듯 함

리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문 편하게 남겨주세요 :)