리팩토링·코드 정리 시키기

🧹 코드는 자라면서 지저분해진다

프로젝트가 커지면 처음에 빠르게 만든 코드들이 점점 관리하기 어려워집니다. 이름이 의미 없는 변수, 비슷한 코드가 여러 군데 반복, 파일 하나가 수백 줄로 길어지는 현상이 나타납니다. 이때 필요한 것이 리팩토링입니다.

리팩토링의 정의: 동작(기능)은 바꾸지 않고, 코드의 구조만 개선하는 것. 이 정의를 AI에게 명확히 전달하는 것이 핵심입니다.

⚠️ AI에게 리팩토링 시킬 때 가장 중요한 것

AI에게 "이 코드 좋게 바꿔줘"라고 하면 기능까지 바꿀 수 있습니다. 리팩토링 요청 시 반드시 이렇게 명시하세요:

아래 코드를 리팩토링해줘. 기능은 완전히 동일하게 유지하면서 코드 품질만 개선해. 동작이 달라지면 안 돼.

🔄 리팩토링 유형 1 — 중복 제거

같은 코드가 여러 군데 반복된다면 하나로 묶어달라고 요청합니다:

LoginForm.tsx, RegisterForm.tsx, ProfileForm.tsx에서 폼 유효성 검사 로직이 거의 똑같이 반복돼. 공통 부분을 hooks/useFormValidation.ts로 추출해줘. 기존 파일들은 이 훅을 사용하도록 수정하되 동작은 동일하게 유지해.

중복을 제거하면: 한 곳만 수정해도 모든 폼에 반영됩니다. 버그 수정도 한 번만 하면 됩니다.

✏️ 리팩토링 유형 2 — 이름 정리

의미 없는 변수·함수명은 코드를 읽기 어렵게 만듭니다. AI에게 이름을 정리해달라고 요청하세요:

이 파일에서 변수명과 함수명이 너무 줄임말이거나 의미가 불분명해. 각 변수·함수의 역할을 파악해서 더 명확한 이름으로 변경해줘. 기능은 바꾸지 마.

예: fn1() → formatCurrency(), tmp → filteredUsers

🏗️ 리팩토링 유형 3 — 파일·컴포넌트 쪼개기

파일이 너무 길어졌다면 책임 단위로 쪼갭니다:

Dashboard.tsx 파일이 500줄이 넘어서 관리하기 어려워. 크게 3개 영역(헤더, 통계 카드, 데이터 테이블)이 있는데, 각 영역을 별도 컴포넌트로 분리해줘. 각각 DashboardHeader.tsx, StatsCard.tsx, DataTable.tsx로 만들고 Dashboard.tsx에서 임포트해서 사용해. 화면에 표시되는 결과는 동일해야 해.

🧪 리팩토링 전후 검증 — 회귀 방지

리팩토링 후에는 반드시 기존 기능이 모두 동작하는지 확인해야 합니다. 기능은 그대로인데 코드만 바꾼 것이기 때문에, 무언가 달라졌다면 리팩토링 과정에서 실수가 있었다는 뜻입니다.

검증 체크리스트:

• 기존에 되던 기능이 모두 여전히 되는가?
• 브라우저 콘솔에 새로운 에러가 없는가?
• UI가 달라지지 않았는가?

💡 팁: 리팩토링 전에 "현재 기능 목록"을 AI에게 뽑아달라고 하면, 리팩토링 후 체크리스트로 활용할 수 있습니다.

⏰ 리팩토링 타이밍

언제 리팩토링을 해야 할까요? Rule of Three를 기준으로 삼으세요: 같은 코드를 세 번째 반복하게 됐을 때, 그 시점이 리팩토링 타이밍입니다.

• 처음 쓸 때: 그냥 씁니다.
• 두 번째 쓸 때: "또 쓰네"하고 씁니다.
• 세 번째 쓸 때: 공통으로 추출합니다.

기능 구현 중에 리팩토링을 같이 하면 진행이 느려집니다. 기능 추가와 리팩토링을 분리하세요 — 기능을 완성하고, 커밋하고, 그 다음 리팩토링 커밋을 따로 합니다.

✅ 정리

• 리팩토링은 기능 변경 없이 구조만 개선하는 것입니다. AI에게 이를 명확히 전달하세요.
• 중복 제거, 이름 정리, 파일 분리 — 세 가지 유형부터 시작하세요.
• 리팩토링 후에는 반드시 기존 기능을 모두 테스트하세요 (회귀 방지).
• 기능 추가와 리팩토링은 분리된 커밋으로 진행하세요.