과제 체크포인트
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가 한 번에 갱신되도록 구현했습니다. 이렇게 계산된 파생 상태를 전역 상태로 관리하는게 괜찮은 선택인가요?? 실무에서도 이번 과제처럼 한 번에 페이지에 보여질 값들이 많이 바뀌어야할 때 이 모든 값들을 전역 상태로 관리하는지 궁금합니다!
과제 피드백
수고했습니다! 이번 과제는 레거시 코드를 React 기반의 현대적인 아키텍처로 고도화하는 것이 목표였어요. 회고를 보아하니 시간이 부족해서 원하는 바를 다 하지 못한 부분이 정말로 아쉬웠나봐요. 뭔가 본인이 아쉬운 바가 많아서 그런지 체크포인트들도 비워둔 곳이 많네요ㅎㅎ
그렇지만 결과적으로 잘했습니다. 더티코드가 어쩄든 React위에서 돌아가고 있고 리팩토링이 되었고 적절히 코드 분리도 되었고 테스트도 잘 통과하네요.
아쉽다고 느껴진다는 감각은 좋은 겁니다. 의욕이 있고 내가 목표하고자 하는 이상이 충분히 높다는 것이지요. 물로 내가 만든 이상이 너무 높아서 그 기준치에 도달하지 못한다고 해도 지금까지 내가 한 과정이나 결과물을에 대해서 가치평가를 낮춰서는 안되겠지요. 충분히 잘 했어요.
이러한 아쉬움들 5주차 과제에 충분히 다 녹여내보길 바래요. ㅎ
Q) 이렇게 계산된 파생 상태를 전역 상태로 관리하는게 괜찮은 선택인가요?? 실무에서도 이번 과제처럼 한 번에 페이지에 보여질 값들이 많이 바뀌어야할 때 이 모든 값들을 전역 상태로 관리하는지 궁금합니다!
=> 파생 상태를 전역상태로 관리하는 건 여러가지 측면에서 좋지 않습니다. 당장은 필요하지 않을 데이터를 미리 만들어 두는 것보다는 최대한 lazy하게 구성하는 편이 성능면에서도 좋으니까요. 그래서 지연평가라는 방식으로 파생 상태는 함수로 만들어 주고 원본 데이터들의 조합으로 필요할때에만 만들어두었다가 캐싱이나 메모제이션을 통해서 성능을 확보하는 방식을 쓰고 있습니다. 이미 React에서도 그러한 방법을 쓰고 있죠. 정말로 사용자 동작으로만 바뀌는 상태를 최소화하고 나머지는 useMemo등을 통해서 함수 호출이나 계산을 통해 파생상태를 관리하는 방식이 정배랍니다.
수고많았습니다. 5주차 과제도 화이팅입니다!!