[7팀 정건휘] Chapter 2-1. 클린코드와 리팩토링

[geonhwiii]

과제 체크포인트

배포 링크

https://geonhwiii.github.io/front_6th_chapter2-1/

기본과제

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

심화과제

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

과제 셀프회고

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

AI를 사용함에 있어 실수를 줄이는 방향을 많이 생각했습니다.

AI는 한 번에 많은 코드를 수정하는 것을 어려워하기 때문에,

점진적으로 개선하도록 할 수 있는 프롬프팅에 고민을 많이 했습니다.

그리고, 세부적인 부분을 제가 수정할 수 있도록 하였습니다.

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

조금 더 제 코드로 변환하는 시간을 가졌으면 좋았을 것 같습니다.

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

자바스크립트에서 리액트로 변환할 때, 추천하는 아키텍처가 있을까요?

자바스크립트로 개발을 많이 안해보아서 폴더구조나 패턴에 대해서 고민이 됩니다.

반드시 이렇게 해야한다. 라기보다 다양성 측면에서 궁금합니다~!

[geonhwiii]

export class AppState {
  constructor() {
    this.products = [];
    this.bonusPoints = 0;
    this.itemCount = 0;
    this.lastSelection = null;
    this.totalAmount = 0;

    // DOM 요소 참조
    this.elements = {
      stockInfo: null,
      productSelect: null,
      addButton: null,
      cartDisplay: null,
      sum: null,
    };
  }

  // 상태 초기화
  initialize() {
    this.totalAmount = 0;
    this.itemCount = 0;
    this.lastSelection = null;
    this.totalAmt = 0;
    this.itemCnt = 0;
    this.lastSel = null;
    this.bonusPts = 0;
  }

  // 상품 데이터 초기화
  initializeProductData() {
    this.products = [...INITIAL_PRODUCTS];
    this.prodList = this.products;
  }
}

이번 자바스크립트 과제를 진행하면서 가져갔던 핵심부분이에요.

이 부분이 main.basic.js에서

function main() {
    ...
    initializeApplication(appState);
    initializeProductData(appState);
    createDOMElements(appState);
    setupPromotionTimers(appState);
    initializeUI();
    setupCartEventHandlers(appState);
   ...
}

이런식으로 쓰이는데, props를 전달하는 것처럼 구현이 되었는데,

main() 을 구성하는 부분도 좀 다양한 접근방식으로 구현할 수 있지 않았을까? 생각이 들어요.

물론 AI 위주의 코딩이라 과제 해결에 급급했긴 하지만요 :(

[eveneul]

function main() {
  try {
    // 전역 상태 초기화
    initializeAppState();

    // UI 렌더링
    renderInitialUI();

    // dom 요소 바인딩
    bindDOMElements();

    // 이벤트 리스너 설정
    setupModalEventListeners();

    // 🎯 장바구니 이벤트 리스너 설정
    initializeEventListeners();

    // 초기 렌더
    initializeRender();

    // 타이머 설정
    initializeTimers();
  } catch (error) {
    console.log('초기화 중 오류 발생: ', error);
    alert('사이트를 초기화하는 중 오류가 발생했습니다.');
  }
}

저도 거뉘 님이랑 비슷하게 했어요. 대신에 try - catch로 오류 발생하면 알럿 뜨게는 했는데.. (나름 머리 굴려서 뿌듯함)
main 함수에 주석 달아 주셨으면 무슨 기능인지 더 이해하기 쉬울 것 같아요! 쌩유!

[2Estella]

우선 달아두신 댓글에 의견을 남기자면, 자바스크립트로 구현하는 한계? 때문에 지금처럼 구현하신 게 확실히 명시적이고 깔끔해 보여요 👍
그런데 이렇게만 나열하면 main 함수가 점점 길어지고, 나중에 유지보수나 테스트할 때 조금 버거워질 수도 있을 것 같긴 해요.
음... 다양한 방식이라고 한다면, 메서드 체이닝으로 초기화 과정을 깔끔하게 묶어보거나 미들웨어 패턴을 적용해보는 방법도 있을 것 같네요!

[2Estella]

잡았다! AI 요녀석의 실수!!!! 변수명이 여기저기 섞여 있어서 헷갈릴 수 있을 것 같아요.
예를 들어 amt vs amount, prod vs product 처럼요!

클린 코드의 시작은 명시적이고 일관된 네이밍에서 출발한다고 생각해요.
변수명 통일시켜 주시면 가독성도 훨씬 좋아질 것 같습니다~!

[geonhwiii]

오오 아주 좋아요! 감사합니다 :)

[BangDori]

@geonhwiii

건휘님 이번 과제를 프롬프팅으로만 진행하셨다는 얘기를 듣고, 현 시대에 AI를 정말 잘 다루는 개발자라는 생각이 들었어요. 정말 멋집니다 👍👍

항해에서 과제를 진행해오면서 AI에 대한 제 생각을 어느정도 정리를 할 수 있었는데요. 개인적으로 저는, AI가 모든 걸 해결해주는 시대가 오더라도 결국 소프트웨어 개발자는 아키텍처를 설계하고 방향을 잡을 수 있는 사람으로 성장해야 한다고 생각해요. 또 이 과정에서 AI가 작성한 코드를 제대로 활용하려면 이론적 배경에 대한 이해도 꼭 필요할 것 같다는 생각을 가지게 되었구요.

그래서 궁금해졌어요!

• 건휘님이 생각하시는 'AI를 잘 활용하는 개발자'란 어떤 모습일까요?
• 그리고 프롬프팅 중심으로 작업하면서 이론적 이해가 부족한 순간이 있었다면, 그게 어떻게 느껴지셨는지, 그리고 이를 어떻게 극복해내셨는지가 듣고 싶어요!