과제 배포링크

esoby.github.io/front_6th_chapter2-1/

과제 체크포인트

기본과제

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

심화과제

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

과제 셀프회고

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

클린 코드 첫 과제! 멘토링 때도 말씀드렸지만, (정말)(정말) 재밌었어요!

업무로 개발을 하다 보면 코드의 질적인 개선보다 기능 구현에 집중하게 되기도 하고, 이미 구현된 틀 안에서 유지 보수를 조금씩 해나가는 경험을 많이 하는 것 같습니다. 그런데 오랜만에 구조까지 갈아엎을 수 있는 리팩토링 과제라 .. 아주 짜릿했습니다.

과제를 처음 받았을 때는 무슨 수단을 써서라도 완벽한 코드를 만들어 보자! 다짐 했었는데요. 그렇게 맘 먹고 시작해보니 막막하기도 하고 부담도 돼서 ai한테 자꾸 시키게 되더라고요. 파일부터 냅다 나누면서 중복 코드 제거하다가 결국 원상복구 하고 main에서 뚝딱뚝딱 했습니다.

과제를 마저 진행하면서 저는 결과보단 과정에 집중하기로 했어요. 아주아주 완벽한 코드라는 게 뭔지도 모르겠고! 그러기엔 나는 아직 부족하니까! 적어도 바로 전보다는 나은 코드를 만들어가잔 마음으로 차근차근 임했습니다.

기본 과제의 큰 방향성은 리액트스러움(?)으로 잡았습니다! 심화 과제로 빠르게 전환하고 싶기도 했고 확실히 깔끔한 흐름인 것 같아요. 처음부터 store에서 dispatch - subscribe - notify를 구현해 데이터 변동을 관리하고 컴포넌트 단위로 ui 코드를 분리해놨더니 리액트 전환이 아주 수월했습니다. 뿌듯.

앗 과제 초반 팀원들과 eslint와 prettier rule을 적용하기 위한 팀 컨벤션도 정해보았는데요! 다른 분들 코드 스타일도 엿볼 수 있고~ 합의해가려 서로를 설득하는 과정도 재밌었읍니다. 학메 송이님 조언으로 평소보다 빡빡하게 규칙을 넣어서 작업했는데 덕분에 가독성이 좋아져쒀요

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

심화 과제를 시작하고, 기본 과제를 리액트 프로젝트 위로 어찌저찌 이식해두긴 했지만 뷰로만 작업하다가 리액트를 다시 써보려니 ,, 정말 기억이 하나도 안 나더라고요 ㅠ.ㅠ 깊이있는 내용은 머릿속에서 다 증발해 버려서 더 멋찐 코드를 짤 수 없었습니다. 이번 기회로 다시 친해져야 할 것 같고 계속 꾸준히 돌아봐야 할 것 같읍니다.

고쳐도 고쳐도 돌아보면 아쉬운 게 있다는 게 이 과제에 대한 아쉬운 점이겠습니다. 감각적으로다가 코드를 휘리릭 클린하게 짜는 사람이었다면 더 많은 부분을 캐치할 수 있었을텐데! 고런 부분에 대한 공부를 게을리 했다는 게 스스로 아숩게 느껴졌습니다~ 이제 하면 되지~ 헤헤

팀원들과 코드 리뷰를 더더더 적극적으로 해보지 못 한 것도 아쉽게 느껴져요! 다음주차 땐 더 많이 수다 떨고 더 많이 질문하고 더 많이 ...! 서로서로 귀찮게 하겠다 ,,! 다짐했습니다. 과제 제출 후에 늦게서야 다른 분들 코드를 훔쳐보았는데 진짜 기깔나더라고요 아 질투난다 💦

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

• 화면을 그리는 코드와 계산에 필요한 코드를 자알 분리해보고 싶었는데, 혹시나 눈에 띄게 위반되는 지점이 있다면 꼬옥 알ㄹㅕ주세요!
• 변수나 함수의 의미를 명확하게 하려고 하다보니 자꾸만 길어지는데 요런 경우 어떻게 하시는지 꿀팁! 아니면 규칙! 그런 게 궁금합니다!
• basic 단계에서 현재 선택된 상품 값을 전역 변수로 관리하고 리렌더링 시 상태를 유지해주려고 했어요. 그래서 onChange 이벤트 핸들러를 걸어서 값이 바뀔 때마다 상태를 업데이트 하도록 했는데, 테스트 코드에서는 change 이벤트가 발생하지 않고 값이 직접 바뀌는 구조라 트리거가 안 되더라고요,, 최대한 핸들러에서 해결을 하고 싶었는데 아무리 생각해도 오직 테스트 통과만을 위한 못난 코드가(?) 되는 것 같아 결국 테스트 코드를 수정했습니다. 괜찮은 해결 방법이었을까요? 🥹🥹🥹

// select 값이 바뀌는 addItemsToCart 함수에 change 이벤트가 발생하도록 아래 내용을 추가했어요!
  sel.dispatchEvent(new Event('change', { bubbles: true }));