클린코드 학습 프로젝트

요구사항 변화를 통해 클린코드의 중요성을 학습하는 쇼핑몰 프로젝트입니다.
각 단계별로 코드가 어떻게 발전해 나가는지 확인해보세요.

Step 1

초기 요구사항을 바닐라 JavaScript로 구현한 버전입니다. 명령형 프로그래밍 방식으로 작성되어 확장성에 한계가 있습니다.

도메인 로직, 컴포넌트, 앱 로직을 분리하여 유지보수성을 개선했습니다. MVC 패턴을 적용한 선언형 구조로 변경되었습니다.

검색, 정렬, 재고 관리, 다중 선택 기능을 추가했습니다. 관심사 분리 덕분에 쉽게 기능을 확장할 수 있었습니다.

기존 도메인 로직을 재사용하여 React로 전환했습니다. 좋은 설계의 장점을 확인할 수 있는 단계입니다.

Zustand를 도입하여 성능을 최적화하고 관심사를 더욱 명확히 분리했습니다. 선택적 구독을 통한 효율적인 리렌더링을 구현했습니다.

전체 소스 코드와 상세한 설명을 GitHub에서 확인할 수 있습니다. 각 단계별 커밋 히스토리도 함께 제공됩니다.

도메인 로직, UI, 이벤트 처리를 분리하여 각각의 책임을 명확히 하고 유지보수성을 향상시키는 방법을 학습합니다.

"어떻게"에서 "무엇을"로 사고방식을 전환하여 더 이해하기 쉽고 예측 가능한 코드를 작성하는 방법을 학습합니다.

순수 함수와 의존성 주입을 통해 테스트하기 쉬운 코드 구조를 만드는 방법을 학습합니다.

상태관리 라이브러리를 활용한 선택적 구독과 불필요한 리렌더링을 방지하는 방법을 학습합니다.