[9팀 학습메이트] Chapter 2-1. 클린코드와 리팩토링

[susmisc14]

과제 체크포인트

기본과제

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

심화과제

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

과제 셀프회고

이번 과제는 코드를 직접 작성하는 대신, AI만을 사용하여 진행하기로 했습니다.

초반에는 AI가 작업을 효과적으로 수행하는 듯했지만, 중반 이후부터는 의도치 않은 스타일 및 레이아웃을 변경하는 문제 때문에 어려움을 겪었습니다. 이런 세부적인 수정 사항을 어떻게 명확하게 지시해야 할지 막막했습니다.

예를 들어, 우측 상단 도움말 버튼의 스타일이 변경된 것을 뒤늦게 발견하고 원래대로 복구해야 했는데, 해당 버튼을 특정하여 지시하는 과정이 매우 어려웠습니다. 다행히 원본 파일이 있어, 이를 기준으로 수정하라고 지시하니 문제를 해결할 수 있었습니다.

결론적으로 AI만으로 과제를 진행한 경험은 굉장히 재밌었습니다. 특히 이 과정을 통해 "시니어 한 명이 100명의 주니어를 대체할 수 있다"는 말의 의미를 체감할 수 있었습니다. 이번 경험을 통해 AI에게 작업을 지시할 때는 수정 범위와 대상을 최대한 명확하게 한정하는 것이 중요함과 지시를 얼마나 명확하게 하든 AI가 작성한 코드는 기술 부채가 될 수 있음을 깨달을 수 있었습니다.