[항해플러스] 4주차 회고 - 클린코드와 리팩토링

Weekly I learned 4주차 회고 - 클린코드와 리팩토링

 

🔧 문제

이번 주에 코드를 리팩토링하면서 가장 아쉬웠던 점은
전역 상태(cartState)를 그냥 아무 고민 없이 사용했다는 것이었다.
편하니까 쓰고, 계속 이어서 쓰게 됐는데, 어느 순간 상태 흐름이 꼬이기 시작했다.
또, 구조를 바꾸고 싶은 마음에 기존 코드의 흐름을 완전히 이해하지 못한 채 작업을 시작했던 것도 문제였다.
기능은 동작하는데 뭔가 마음이 찜찜했고, 중간에 로직을 몇 번 다시 뜯어보면서 ‘아 이걸 왜 이렇게 짰지?’ 싶은 순간도 많았다.

---

🔍 시도

• 하나의 파일에 다 모여 있던 이벤트 핸들러들을 기능 단위 함수로 분리
  (handleCartAdd, handleCartClick, handleQuantityChange, handleCartRemove)
• setupFlashSale, setupRecommendation은 사이드 이펙트이기 때문에 별도 파일로 분리
• 관심사가 다른 기능들은 폴더 기준으로 분리: ui/, events/, utils/, state/
• 그리고 이번에 처음으로 클린코드의 원칙들도 의식하면서 리팩토링하려고 했다
  • 함수는 하나의 일만 하도록
  • 변수명은 다른 사람이 봐도 의도가 명확하게
  • 네이밍과 동작 사이의 일관성 있는 규칙
  • 서로 연관 있는 로직은 가깝게 묶고, 분리할 건 과감히 분리하기

---

✅ 해결

• 기능별로 파일을 나누고 함수를 분리하면서 코드의 가독성과 추적성이 눈에 띄게 좋아졌다
• handleCartClick 안에 모든 로직이 몰려 있던 것을 handleQuantityChange로 나누면서 흐름이 명확해졌고, 테스트나 수정도 쉬워졌다
• 클린코드 원칙을 적용하려 노력한 덕분에 ‘내가 다시 봐도 이해할 수 있는 코드’를 만드는 감각을 조금은 느꼈다

---

✨ 알게된 것

• 전역 상태는 편하지만, 무언가를 ‘모두가 알 수 있다’고 여기는 순간, 그만큼 위험도 커진다
• 리팩토링은 단순히 폴더만 나누고 함수를 분리하는 게 아니라, 코드를 정확히 이해한 후에 개선해야 의미가 있다
• 클린코드에서 말하는 원칙들이 실제로 적용해보니 확실히 코드의 구조와 흐름을 더 단단하게 만들어준다는 것을 체감했다
• 특히 의미 있는 변수명, 단일 책임 함수, 관심사 분리, 이 세 가지가 코드 퀄리티를 엄청 좌우한다는 걸 깊이 느꼈다

---

🎯 지난 목표 회고

• [O] 장바구니 기능을 기능 단위로 구조화함
• [O] 관심사 별로 폴더 구조 나누기
• 상태 관리에 대한 고민이 부족했고, 기존 코드 분석 없이 리팩토링을 진행한 건 아쉬움으로 남음
  → 다음에는 ‘구조보다 흐름’이 먼저라는 걸 기억하자

---

🚀 다음 목표 설정

• 전역 상태 없이도 기능이 동작하는 구조를 실험해보기 (props 흐름 연습 등)
• 리팩토링 전엔 흐름을 먼저 정리해보고, 전체 그림을 보고 나서 구조 변경 시도하기
• UI 생성 로직도 함수로 추출해서 깔끔하게 관리하고 재사용 가능하게 만들기 (createCartItemElement)
• 클린코드의 원칙을 한 주제씩 실전에서 적용해보며 체화해보기 (예: 다음 주는 변수명 규칙에 집중하기)

---

#항해플러스 #항해99