realstone2 님의 상세페이지 ＞ [3팀 여진석] Chapter 2-1. 클린코드와 리팩토링

[3팀 여진석] Chapter 2-1. 클린코드와 리팩토링

by realstone22025. 8. 1.

배포링크

과제 체크포인트

기본과제

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

심화과제

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

과제 셀프회고

이번에는 직접 코딩하지 않고 AI를 활용해서 방향성만 지시해서 과제를 완료하려고 해보았습니다. 한번에 정리해줘! 하는식의 방식으로는 절대 원하는 방향성으로 해주지 않았습니다. 그래서 이번에는 AI를 어떻게 사용해야지 내가 원하는 결과물을 얻을 수 있을까에 대해서 많은 고민을 했던 과제였습니다.

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

제가 원하는 리팩토링 구조에 맞춰서 AI가 잘 나눌 수 있도록 프롬프트, prd 작성하는 것을 가장 신경쓴 것 같습니다. basic 과제에서는 view => model + viewmodel => event 순서로 구조를 나눠가도록 프롬프트를 단계적으로 요청하였습니다. advanced 과제에서는 준형님이 추천해주신 bmad-method를 사용하여 prd 문서를 만들어서 원하는 구조를 미리 잡고 basic과제의 구조와 동일하게 구성하였습니다. 이런 구조 자체에 대해서 신경을 많이 쓴 것 같습니다.

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

레거시 코드의 액션들을 모두 viewmodel쪽에 한번에 적용하다보니 너무 크게 추상화를 하게 되어 아쉽습니다. model을 jotai로 선택하지 않고 reducer action 기반으로 viewmodel을 작성했더라면 좀 더 깔끔하지 않았을까 하는 생각이 있습니다.

테스트코드를 기본과제 내용 기반으로 미리 더 잘 작성되어야되었을 것 같습니다. 테스트코드가 의미가 없을정도로 통과했으나 기능이 누락되는 일이 있었습니다. 테스트코드의 중요성을 더 깨닫게된 것 같습니다.

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

  1. 이런 리팩토링을 진행할 때 테스트코드가 제일 중요하다고 느낀 것 같습니다. AI한테 기본 과제 테스트코드 내용을 그대로 반영해서 React에서 사용하는 코드 기반으로 테스트코드를 만들어달라고 했는데, 기능 자체를 누락해서 만들어주는 일들이 있었습니다. 테스트 코드에서 이런일이 발생해서는 안될텐데, 테스트코드를 AI에게 작성시키는 것에 대해서 어떻게 생각하시는지 궁금합니다!

  2. 이렇게 큰 파일 기반의 리팩토링할 때 AI를 사용했더니 비용이 너무 많이 나가게되는 것 같습니다. 이럴 때 token비용을 절약할 수 있는 노하우가 있을까요?

과제 피드백

안녕하세요 진석님! 4주차 과제 잘 진행해주셨네요 ㅎㅎ 고생하셨습니다!

이런 리팩토링을 진행할 때 테스트코드가 제일 중요하다고 느낀 것 같습니다. AI한테 기본 과제 테스트코드 내용을 그대로 반영해서 React에서 사용하는 코드 기반으로 테스트코드를 만들어달라고 했는데, 기능 자체를 누락해서 만들어주는 일들이 있었습니다. 테스트 코드에서 이런일이 발생해서는 안될텐데, 테스트코드를 AI에게 작성시키는 것에 대해서 어떻게 생각하시는지 궁금합니다!

이건 AI가 잘못한게 아니라 명령을 잘못한거라고 생각해요 ㅋㅋ 더 정교하게 요구사항을 전달하면 잘 작성해주었으리라 생각합니다.

이런식으로 진행하면 어땠을까요?

  1. 현재 테스트 코드와 구현된 코드를 토대로 실제 이 어플리케이션의 요구사항과 엣지케이스를 추출해줘.
  2. 요구사항/엣지케이스/테스트코드/JS 등을 기반으로 react로 구성하고 싶어. 이 때 재활용할 수 있는 코드가 얼마나 있을까?
  3. 그렇다면 재활용할 수 있는 형태가 최대한 많았으면 좋겠어. 이를 토대로 현재 코드를 리팩토링 해줄 수 있을까?
  4. 현재까지 진행한 내용을 문서로 정리해줘.

그 다음에 새로운 채팅을 만든 후에 5. 여태까지 내가 작업한 내용이 XXXX.md 파일에 있어. 이제 작업을 이어서 해야 돼. 리액트로 코드를 구성해줄 수 있을까? 특히 엣지케이스를 꼼꼼하게 채워주면 좋겠어. 무엇보다 기존 코드를 최대한 재활용하는 방식이어야해!

요로코롬 진행하면 어땠을까 싶네요 ㅎㅎ

이렇게 큰 파일 기반의 리팩토링할 때 AI를 사용했더니 비용이 너무 많이 나가게되는 것 같습니다. 이럴 때 token비용을 절약할 수 있는 노하우가 있을까요?

모든 기능을 AI에게 위임하는건 좋지 않다고 생각해요. 가령, js를 react로 전환할 때 재활용할 수 있는 코드가 많다면 굳이 AI를 사용하지 않고 내가 진행해도 빠르게 진행할 수 있었으리라 생각합니다.

그리고 제가 위에 남긴 피드백처럼, 중간정산을 항상 잘 해주세요 ㅎㅎ 진행한 내용을 문서로 남기고 이 문서를 기반으로 다시 새로운 컨텍스트를 만들어서 진행하는거죠.

이렇게 하면 꽤 많이 절약할 수 있답니다!

저는 심화과제를 진행할 때 제일 중요한건 기본과제와의 연결성이라고 생각해요. 이게 지금 약해서 아쉽네요..!