[3팀 여진석] Chapter 2-1. 클린코드와 리팩토링 - #62
Open
realstone2 wants to merge 56 commits into
Open
Conversation
`main.basic.js`의 클린코드 리팩토링을 위한 개발 계획 및 현재 상황 분석을 포함한 `rule.md` 파일을 새로 추가했습니다. 이 문서에는 리팩토링 목표, 제약사항, 현재 코드 상태, 개발 전략 및 성공 지표가 상세히 설명되어 있습니다.
`Component` 클래스를 포함한 새로운 컴포넌트 구조를 추가하였으며, `createObserver`, `createStorage`, `createStore`, `shallowEquals`와 같은 스토어 관련 유틸리티를 구현했습니다. 이로써 상태 관리 및 데이터 저장 기능을 강화하였습니다.
`.prettierignore`, `.prettierrc`, `eslint.config.js` 파일을 새로 추가하여 코드 포맷팅 및 린팅 규칙을 설정했습니다. 또한, HTML 파일의 구조를 개선하고, `package.json`에 린트 및 포맷 관련 스크립트를 추가했습니다. 이를 통해 코드 품질을 향상시키고 일관성을 유지할 수 있도록 하였습니다.
…onst/let declarations - fix variable reassignment issues - remove unused variables - add meaningful comments for empty blocks
상수 정의 및 전역 상태 변수에 대한 설명을 추가하여 코드 가독성을 향상시켰습니다. 각 상수의 역할과 사용 목적을 명확히 하여 유지보수성을 높였습니다. 또한, 애플리케이션 초기화 및 주요 함수들에 대한 주석을 추가하여 코드 흐름을 이해하기 쉽게 개선하였습니다.
`productState.ts` 파일을 새로 생성하여 전역 상태 관리 기능을 구현했습니다. 이를 통해 상품 데이터의 상태를 효율적으로 관리할 수 있게 되었습니다. 또한, 기존 코드에서 상품 관련 로직을 상태 관리로 통합하여 코드의 가독성과 유지보수성을 향상시켰습니다.
`cartState.ts` 파일을 새로 생성하여 장바구니 도메인 전역 상태 관리 기능을 구현했습니다. 이를 통해 장바구니 아이템의 추가, 삭제, 수량 업데이트 및 총액 계산을 효율적으로 처리할 수 있게 되었습니다. 또한, `main.basic.ts` 파일에서 장바구니 상태를 초기화하고 업데이트하는 로직을 추가하여 코드의 가독성과 유지보수성을 향상시켰습니다.
`uiState.ts` 파일을 새로 생성하여 UI 도메인 전역 상태 관리 기능을 구현했습니다. 이를 통해 모달, 헤더, 알림 등 다양한 UI 상태를 효율적으로 관리할 수 있게 되었습니다. 또한, `main.basic.ts` 파일에서 UI 상태 초기화 및 업데이트 로직을 추가하여 코드의 가독성과 유지보수성을 향상시켰습니다.
`pointsState.ts` 파일을 새로 생성하여 포인트 도메인 전역 상태 관리 기능을 구현했습니다. 이를 통해 포인트 계산, 적립 내역 관리 및 포인트 표시 설정을 효율적으로 처리할 수 있게 되었습니다. 또한, `main.basic.ts` 파일에서 포인트 상태 초기화 및 업데이트 로직을 추가하여 코드의 가독성과 유지보수성을 향상시켰습니다.
`eventManager.ts` 파일을 새로 생성하여 이벤트 위임 기반의 전역 이벤트 관리 시스템을 구현했습니다. 이를 통해 각 컴포넌트에서 전역적으로 하나의 이벤트만 등록하여 효율적으로 이벤트를 관리할 수 있게 되었습니다. 코드의 가독성과 유지보수성을 향상시키는 데 기여합니다.
`ManualSection.ts` 파일을 새로 생성하여 매뉴얼 토글 및 오버레이 기능을 통합했습니다. `main.basic.ts`에서 이벤트 리스너를 설정하는 로직을 간소화하고, `App.ts`에서 매뉴얼 섹션을 추가하여 코드의 가독성과 유지보수성을 향상시켰습니다. 또한, 기존의 매뉴얼 관련 코드 일부를 제거하여 구조를 개선했습니다.
장바구니 추가 버튼과 장바구니 아이템 클릭 이벤트를 각각 `AddToCartButton` 및 `CartDisplay` 컴포넌트로 분리하여 코드의 가독성과 유지보수성을 향상시켰습니다. 또한, 장바구니 계산 및 UI 업데이트를 담당하는 `handleCalculateCartStuff` 함수를 새로 생성하여 장바구니 관련 로직을 정리했습니다. 이로 인해 이벤트 관리가 보다 효율적으로 이루어질 수 있게 되었습니다.
`ProductSelector` 컴포넌트를 새로 생성하여 상품 선택 드롭다운의 로직을 분리하였고, 상품 선택 옵션 업데이트 기능을 `productEventHandlers.ts`로 이동시켜 코드의 가독성과 유지보수성을 향상시켰습니다. 또한, `main.basic.ts`에서 상품 선택 관련 주석을 업데이트하여 코드의 명확성을 높였습니다.
상품 관련 타이머 이벤트 핸들러를 `productTimerHandlers.ts` 파일로 분리하여 코드의 가독성과 유지보수성을 향상시켰습니다. `main.basic.ts`에서 타이머 관련 로직을 제거하고, `ProductSelector` 컴포넌트에서 타이머를 시작하도록 수정하였습니다. 이를 통해 타이머 기능이 보다 명확하게 관리될 수 있게 되었습니다.
재고 정보 업데이트 로직을 `stockEventHandlers.ts`로 분리하여 코드의 가독성과 유지보수성을 향상시켰습니다. `main.basic.ts`에서 재고 관련 주석을 업데이트하고, `StockInformation` 컴포넌트에서 초기 재고 정보를 설정하도록 수정하였습니다. 이를 통해 재고 관리 기능이 보다 명확하게 관리될 수 있게 되었습니다.
장바구니 내 상품 가격 업데이트 관련 로직을 `cartPriceHandlers.ts`로 분리하여 코드의 가독성과 유지보수성을 향상시켰습니다. `main.basic.ts`에서 가격 업데이트 관련 주석을 수정하고, 상품 타이머 이벤트 핸들러에서 `doUpdatePricesInCart` 함수를 호출하도록 변경하여 장바구니 가격 업데이트 기능을 명확하게 관리할 수 있게 되었습니다.
장바구니 계산 및 UI 업데이트 로직을 `orderSummaryHandlers.ts`로 분리하여 코드의 가독성과 유지보수성을 향상시켰습니다. `main.basic.ts`와 여러 컴포넌트에서 `handleCalculateCartStuff` 함수를 호출하도록 수정하여 장바구니 관련 기능을 명확하게 관리할 수 있게 되었습니다.
전역 상태 변수 관련 주석을 제거하고, `main.basic.ts`에서 불필요한 코드와 주석을 정리하여 가독성을 향상시켰습니다. 또한, `useCartState`, `usePointsState` 등 새로운 상태 관리 훅을 도입하여 코드 구조를 개선했습니다.
`package.json` 및 `pnpm-lock.yaml` 파일에 React 19.1.1 버전을 추가하여 의존성을 업데이트했습니다.
`main.basic.ts` 파일에서 import 경로를 상대 경로로 수정하고, 코드의 가독성을 높이기 위해 불필요한 주석을 정리했습니다. 이를 통해 코드 구조가 더욱 명확해졌습니다.
- React 기반 애플리케이션으로의 마이그레이션 전략 수립 - 환경 점검, Vite 설정, 최소 작동 앱 생성 등 단계별 작업 목록 포함 - 기존 코드 분석 및 테스트 전략 제시
- Introduced a comprehensive Product Requirements Document (PRD) for the React migration of the Hanghae shopping mall project, detailing project vision, goals, technical requirements, and success metrics. - Removed the Test Code Development PRD as part of the project restructuring.
- Jotai를 활용한 상태 관리 전략을 MVVM 패턴으로 재구성 - 새로운 Jotai atom 및 ViewModel 훅 추가 - 기존 상태 관리 방식에서 Jotai 기반으로 전환
- Add App component as the main entry point for the application. - Create advanced test suite for shopping cart functionality. - Set up main entry file to render the App component. - Configure Vite to use React plugin for proper JSX handling.
- 기본 레이아웃 컴포넌트 구현 (App, Header, GridContainer, LeftColumn) - 장바구니 관련 View 컴포넌트 구현 (CartDisplay, AddToCartButton, SelectorContainer, StockInformation, ManualSection) - 주문 관련 View 컴포넌트 구현 (OrderSummary) - 도움말 관련 View 컴포넌트 구현 (ManualColumn, ManualOverlay, ManualToggle) - 상품 관련 View 컴포넌트 구현 (ProductSelector) - 모든 컴포넌트에 TODO 주석으로 다음 Phase 구현 계획 명시 - 기존 HTML 구조를 React 컴포넌트로 변환하여 UI 레이아웃 완성 - View 우선 개발 전략으로 UI 구조를 먼저 완성한 후 비즈니스 로직 추가 예정
- View 우선 개발의 실제 구현 특징 상세 설명 추가 - 14개 View 컴포넌트 완료 상태 반영 - View 우선 개발의 성공 지표 명시 - Phase 1 체크리스트 완료 상태 업데이트 - Phase 2에서 ViewModel 전환 계획 구체화 - 기존 HTML 구조 보존, TODO 주석 체계, 이벤트 핸들러 준비 등 실제 적용 사례 추가
- 장바구니, 주문, 포인트, 상품, UI 도메인에 대한 데이터 타입 및 초기 상태 정의 - Jotai를 이용한 상태 관리 atom 추가
- 장바구니 아이템, 할인 정보, 상태 모델 인터페이스 정의 - 초기 장바구니 상태 및 Jotai atom 추가
- 상품 도메인에 대한 비즈니스 로직과 상태 관리를 위한 ViewModel 추가 - Jotai를 기반으로 한 상품 및 재고 상태 관리 훅 구현 - 상품 관련 기능 (할인 적용, 재고 조정 등) 및 테스트 케이스 추가 - 상품과 재고 ViewModel 간의 상태 동기화 기능 구현
- 포인트 ViewModel을 추가하여 포인트 적립 관련 비즈니스 로직 구현 - 주문 ViewModel에서 포인트 계산 및 업데이트 기능 통합 - 포인트 ViewModel에 대한 테스트 케이스 추가 및 기존 주문 ViewModel 테스트 수정
- Model Layer: 5개 도메인별 Jotai atom 기반 상태 관리 구현 - ViewModel Layer: 8개 ViewModel 훅 구현 (Cart, Order, Product, Points, UI) - View Layer: 14개 React 컴포넌트 구현 및 ViewModel 연결 - Test Layer: 27개 테스트 케이스 구현 및 통과 - MVVM 패턴: Model-View-ViewModel 완벽 분리 및 상태 동기화 구현 - Jotai Provider: 반응형 상태 관리 및 테스트 환경 구축 Resolves: React 마이그레이션 Phase 1 완료
- 재고 수량을 10에서 20으로 변경 - 재고 상태 메시지의 텍스트 매칭을 정규식으로 수정하여 가독성 향상 - 여러 테스트 케이스에서 재고 수량을 업데이트하고 정규식 매칭 적용
- 장바구니 아이템 표시, 수량 조절, 아이템 제거 기능에 대한 테스트 케이스 구현 - 장바구니가 비어있을 때의 메시지 표시 및 할인 적용 시 할인 정보 표시 확인 - 각 테스트 케이스에서 초기 데이터 설정을 위한 테스트 래퍼 구성
- main 브랜치에 푸시 시 GitHub Pages로 배포하는 워크플로우 구현 - Node.js 및 pnpm 설정, 의존성 설치, 빌드 및 배포 단계 포함 - peaceiris/actions-gh-pages를 사용하여 배포 자동화
- 배포 디렉토리를 ./src/advanced/dist에서 ./dist로 변경 - Vite 설정 파일에서 빌드 출력 디렉토리 설정 추가
- CartViewModel에서 재고 확인 및 수량 조정 로직 개선 - OrderViewModel에서 주문 상태 자동 업데이트 기능 수정 - PointsViewModel에 화요일 여부 확인 기능 추가 - Cart 및 Order 관련 테스트 케이스 추가 및 수정 - OrderSummary 컴포넌트에서 불필요한 useEffect 제거
- 404.html 파일을 새로 추가하여 사용자 정의 404 페이지 구현 - index.html에서 스크립트 경로를 수정하여 상대 경로로 변경 - vite.config.js에서 빌드 입력 파일을 index.html로 수정
- base 경로와 copyPublicDir 옵션 추가
- .bmad-core, .cursor, .github/chatmodes 항목 추가 - .claude 항목 수정
…uct Manager, Product Owner, QA Architect, Scrum Master, and UX Expert agents to streamline the codebase.
Comment on lines
+9
to
+31
| export function SelectorContainer(): HTMLElement { | ||
| const selectorContainer = document.createElement('div'); | ||
| selectorContainer.className = 'mb-6 pb-6 border-b border-gray-200'; | ||
|
|
||
| // 상품 선택기 생성 | ||
| const productSelector = ProductSelector(); | ||
| productSelector.className = | ||
| 'w-full p-3 border border-gray-300 rounded-lg text-base mb-3'; | ||
|
|
||
| // 장바구니 추가 버튼 생성 | ||
| const addToCartButton = AddToCartButton(); | ||
| addToCartButton.id = 'add-to-cart'; | ||
|
|
||
| // 재고 정보 생성 | ||
| const stockInformation = StockInformation(); | ||
|
|
||
| // 자식 요소들을 컨테이너에 추가 | ||
| selectorContainer.appendChild(productSelector); | ||
| selectorContainer.appendChild(addToCartButton); | ||
| selectorContainer.appendChild(stockInformation); | ||
|
|
||
| return selectorContainer; | ||
| } |
Member
There was a problem hiding this comment.
와 ...나도 비슷하게 만든거 같은데 더 깔끔하다... 부럽다
|
|
||
| type SetStateAction<S> = S | ((prevState: S) => S); | ||
|
|
||
| export function useState<S>( |
Author
There was a problem hiding this comment.
ㅋㅋㅋㅋㅋㅋㅋㅋ 맞아요 만들긴했는데, 리팩토링과정에서는 투머치인거같아서 안했어요
- 번개세일 및 추천세일 타이머 시작 및 정리 기능 구현 - 타이머 관련 상태 관리 및 핸들러 추가 - 컴포넌트 언마운트 시 타이머 정리 로직 추가
- 기본과제와 심화과제 체크리스트 추가 - 과제 셀프회고 섹션 작성
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
배포링크
과제 체크포인트
기본과제
심화과제
과제 셀프회고
이번에는 직접 코딩하지 않고 AI를 활용해서 방향성만 지시해서 과제를 완료하려고 해보았습니다.
한번에 정리해줘! 하는식의 방식으로는 절대 원하는 방향성으로 해주지 않았습니다.
그래서 이번에는 AI를 어떻게 사용해야지 내가 원하는 결과물을 얻을 수 있을까에 대해서 많은 고민을 했던 과제였습니다.
과제를 하면서 내가 제일 신경 쓴 부분은 무엇인가요?
제가 원하는 리팩토링 구조에 맞춰서 AI가 잘 나눌 수 있도록 프롬프트, prd 작성하는 것을 가장 신경쓴 것 같습니다.
basic 과제에서는 view => model + viewmodel => event 순서로 구조를 나눠가도록 프롬프트를 단계적으로 요청하였습니다.
advanced 과제에서는 준형님이 추천해주신 bmad-method를 사용하여 prd 문서를 만들어서 원하는 구조를 미리 잡고 basic과제의 구조와 동일하게 구성하였습니다.
이런 구조 자체에 대해서 신경을 많이 쓴 것 같습니다.
과제를 다시 해보면 더 잘 할 수 있었겠다 아쉬운 점이 있다면 무엇인가요?
레거시 코드의 액션들을 모두 viewmodel쪽에 한번에 적용하다보니 너무 크게 추상화를 하게 되어 아쉽습니다.
model을 jotai로 선택하지 않고 reducer action 기반으로 viewmodel을 작성했더라면 좀 더 깔끔하지 않았을까 하는 생각이 있습니다.
테스트코드를 기본과제 내용 기반으로 미리 더 잘 작성되어야되었을 것 같습니다.
테스트코드가 의미가 없을정도로 통과했으나 기능이 누락되는 일이 있었습니다. 테스트코드의 중요성을 더 깨닫게된 것 같습니다.
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문 편하게 남겨주세요 :)
이런 리팩토링을 진행할 때 테스트코드가 제일 중요하다고 느낀 것 같습니다.
AI한테 기본 과제 테스트코드 내용을 그대로 반영해서 React에서 사용하는 코드 기반으로 테스트코드를 만들어달라고 했는데, 기능 자체를 누락해서 만들어주는 일들이 있었습니다.
테스트 코드에서 이런일이 발생해서는 안될텐데, 테스트코드를 AI에게 작성시키는 것에 대해서 어떻게 생각하시는지 궁금합니다!
이렇게 큰 파일 기반의 리팩토링할 때 AI를 사용했더니 비용이 너무 많이 나가게되는 것 같습니다. 이럴 때 token비용을 절약할 수 있는 노하우가 있을까요?