[1팀 한아름] Chapter 2-1. 클린코드와 리팩토링

[areumH]

과제 체크포인트

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

기본과제

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

심화과제

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

과제 셀프회고

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

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

기존 코드를 해석하는 데에 시간을 많이 썼고 화요일에 진행된 과제 qna 이후에 기존의 방향을 엎어서 개인적으로 시간이 촉박했다. (새로 시작한 코드를 src/basic/html 폴더에 작성한 후 폴더 구조를 정리했다.) 심화 과제도 수요일 밤에 급하게 시작해서 basic의 부족한 부분이 그대로 이어진 것 같다.. 각 services 폴더의 포인트 계산, 장바구니 상태 계산 함수 내부에서 수행되는 역할이 분리되지 않은 게 제일 아쉽다. 그리고 초반에 basic에 시간을 많이 썼는데도 완벽히 진행되지 않아서 advanced를 구현하면서 basic을 같이 수정한 부분이 많았는데 이 부분도 아쉬움이 남는다. 또한 현재 AI를 ChatGPT에게 질문하는 방식으로만 사용 중인데, 더 다양하게 사용해볼걸 하는 생각도 든다.

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

처음엔 상품 목록과 장바구니 상품 목록만 전역 상태로 관리할까 하다가 화면에 렌더링되어 보여질 값들 (장바구니 상품들의 총 개수, 총 가격, 최종 포인트.. 등등)을 하나의 state로 묶어서 같이 전역 상태로 만들고 (type 파일 내의 AppState) 사용자의 액션에 따라 해당 state가 한 번에 갱신되도록 구현했습니다. 이렇게 계산된 파생 상태를 전역 상태로 관리하는게 괜찮은 선택인가요?? 실무에서도 이번 과제처럼 한 번에 페이지에 보여질 값들이 많이 바뀌어야할 때 이 모든 값들을 전역 상태로 관리하는지 궁금합니다!

[Hwirin-Kim]

basic 에서 부족했던 부분이 advanced에서 이어진다는 부분이 공감이 갑니다. 오히려 저는 basic을 다시 수정할 생각은 못했는데, 꼼꼼히 신경쓴 부분이 인상적이에요! 한 주 고생 많으셨습니다!!