minjaeleee 님의 상세페이지 ＞ [6팀 이민재] Chapter 2-1. 클린코드와 리팩토링

[6팀 이민재] Chapter 2-1. 클린코드와 리팩토링

by minjaeleee2025. 7. 28.

과제 체크포인트

배포 링크

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

기본과제

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

심화과제

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

과제 셀프회고

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

1. 방향성

나름 일련의 구조화를 거쳐 세부적인 수정까지 차례차례 클린코드로 변경하고자 했습니다. 기본 과제를 진행할 때는 매직 넘버들을 상수화하고, 관심사와 기능에 따라 분리하여 util함수와 컴포넌트를 분리하여 전체적인 구조를 변경한 뒤에 var 변수를 let, const로 변경하고 UI와 상태로직을 분리하고 함수형으로 설계하고자 했습니다. 이러한 과정을 거치면 자연스럽게 심화 과정에서 React로 꽤 쉽게 재구성 할 수 있을거라고 생각했습니다!

2. AI 적극적인 활용

지난 오프라인 주차에서, 동료들에게 AI를 잘 활용하는 방법을 많이 배우고 동료들이 좋은 글을 많이 공유해줘서 더욱 적극적으로 사용해야겠다고 마음 먹었습니다. 팀원들과 나눈 컨벤션을 기준과 대개 클린 코드로 정의된 코드들을 규칙으로 만들고 cursor agent를 적용하고 싶었지만 제가 원하는 수준까지 직접 만들고 적용하지는 못 했습니다. 그래도 훌륭한 동료분분이 정리해서 규칙을 만들어준 덕분에 cursor agent는 적용해볼 수 있었습니다. 또, 동료들에게서 배운 프롬프트 방식으로 명령하며 ai를 적극적으로 써본 경험이 생긴것 같습니다. 그러나, 워낙 더러운(?) 탓에.. ai 조차도 계속 삽질을 하더라구요 하핫

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

개인적으로 아쉬운 점은 이번주 내내 몸이 좋지 않아, 과제를 많이 진행하지 못했습니다. 점점 진행하다보니 회사에서도, 과제에서도 수면 부족 등으로 집중을 잘 못하는 것 같은데 컨디션 조절을 잘해서 끝까지 끝마쳐야겠습니다. 또한, 페어팀 과제인데 팀원들에게 도움이 되지 못하고 도움을 많이 받기만 해서 죄송하기도하고 고맙기도 합니다.

과제적으로는 세밀하게 조금 더 리팩토링을 할 수 있었을 것 같습니다. 배열을 직접 push, slice 메소드를 사용하는 것 대신에 spread operator를 이용해 얕은 복사로 처리 하거나, 반복되는 로직에서 커링 함수와 같은 고차 함수를 활용하거나, 엣지 케이스를 더 강화할 수 있었을 것 같습니다. 또, 상태/계산 로직에 대해서 테스트 처리를 해보지 못한 것이 아쉽습니다.

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

과제 피드백

수고했습니다! 이번 과제는 더티코드를 클린코드로 점진적으로 개선하면서 리팩토링의 진정한 어려움과 가치를 체감하는 것이 목표였습니다! 커밋을 보아하니 점진적을 지키기 위해 단계적으로 잘 접근했다 느껴집니다.

"나름 일련의 구조화를 거쳐 세부적인 수정까지 차례차례 클린코드로 변경하고자 했습니다." 아주 좋은 접근입니다. 이러한 체계가 몸에 베이게 되면 처음부터 좋은 코드를 잘 작성하게 되죠. "매직 넘버 상수화 → var를 let/const로 변경 → 함수 분리 → 컴포넌트 분리 → UI와 상태로직 분리"등의 순서를 지켜 진행하신 접근 좋았습니다. 한번에 크게 바꾸려는게 아니라 바꿔도 영향력이 적은 것들 부터 수정할 수 있는 순서대로 진행하는것이 좋은 방법이지요.

"그러나, 워낙 더러운(?) 탓에.. ai 조차도 계속 삽질을 하더라구요 하핫" ㅋㅋ 다행입니다. 이러한 경험을 통해 AI를 언제 어떻게 활용할지 내가 해줘야 하는 것과 위임에도 되겠다 싶은 것들에 대해서 느껴보기를 바랬어요.

팀원들에게 도움을 받았다고 하시는데, 사실 그런 협업 자체가 정말 소중한 경험이에요. 컨벤션을 정하고 cursor agent를 적용해보고 프롬프트 방식을 배우는 것들 모두가 현업에서도 중요한 스킬이거든요. 혼자서는 절대 얻을 수 없는 관점들을 동료들과 나누면서 성장하는 것 자체가 큰 가치라고 생각합니다.

아쉬웠던 부분으로 언급하신 것들 - spread operator 활용, 고차함수 적용, 테스트 처리 - 이런 것들은 5주차 과제에서 충분히 적용해볼 수 있는 내용들이에요. 컨디션 관리도 개발자에게는 정말 중요한 부분이죠. 우리는 머리와 몸으로 먹고 사는 만큼 체력관리도 개발자에게 중요한 스킬이에요. 머리의 말보다는 몸의 말(느낌, 자극, 쎄함)을 잘 들어가면서 억지다 싶으면 내려놓고 푹 쉬는게 낫습니다. 되겠다 싶을때 짬짬히 해도 되니까 그런 방법도 이번 항해를 하면서 방법을 찾아가봐요 :)

수고하셨습니다. 5주차 과제도 화이팅입니다!