코드 개선 및 리팩터링

Verdent for VS Code는 기능을 유지하면서 여러 파일에 걸쳐 코드를 안전하게 리팩터링하고 개선하도록 도와줍니다. Plan Mode를 Explorer 서브에이전트와 함께 사용하면 변경 전에 영향을 받는 모든 파일을 식별할 수 있어, 누락 없이 포괄적으로 리팩터링할 수 있습니다.

배울 내용

• 구현이 아니라 결과에 초점을 맞춘 효과적인 리팩터링 요청하기
• 의존성 관리를 포함해 여러 파일에 걸쳐 안전하게 리팩터링하기
• 코드 품질 개선 및 최적화 제안 요청하기
• 대규모 리팩터링 프로젝트를 여러 단계 접근 방식으로 처리하기
• 알고리즘 및 아키텍처 개선을 통해 성능 최적화하기
• 리팩터링 작업 중 코드 기능 유지하기

사전 준비

Verdent로 리팩터링하기 전에 다음을 준비합니다.

• Verdent 확장이 설치된 Visual Studio Code
• VS Code에서 열린 코드베이스 또는 프로젝트 워크스페이스
• 사용 가능한 크레딧이 있는 활성 Verdent 구독
• 필요한 경우 안전하게 되돌릴 수 있도록 버전 관리(Git) 사용 권장

효과적인 리팩터링 요청하기

어떻게 고칠지보다 무엇을 개선하고 싶은지, 왜 개선하려는지를 설명합니다. Verdent가 코드를 분석하고 프로젝트 패턴을 바탕으로 가장 적합한 접근 방식을 제안하게 하세요.

효과적인 리팩터링 요청:

구현이 아니라 원하는 결과에 집중합니다.

Refactor the UserController to improve readability and reduce duplication

This authentication logic is scattered across multiple files. Consolidate it into a single module

Improve error handling in the API layer to be more consistent and informative

Verdent는 코드를 분석하고, 영향을 받는 모든 파일을 식별하고, 패턴을 검토한 뒤, 코드베이스 규칙에 맞는 구체적인 리팩터링 전략을 제안합니다.

모범 사례: Plan Mode 사용하기

리팩터링 요청은 Plan Mode에서 시작합니다. Verdent는 다음을 수행합니다.

1. 코드를 분석하고 영향을 받는 모든 파일을 식별합니다
2. 변경하기 전에 상세한 리팩터링 플랜을 제시합니다
3. 구현 선호 사항에 대해 확인 질문을 합니다
4. 무엇이 어떤 순서로 바뀔지 정확히 보여줍니다
5. 접근 방식을 검토하고 다듬을 수 있게 합니다

Plan Mode 사용 예시:

In Plan Mode: Refactor authentication logic to use a centralized authentication utility

Verdent는 다음을 수행합니다.

• Explorer를 사용해 모든 인증 코드 위치를 찾습니다
• 패턴과 불일치를 식별합니다
• 통합 인증 인터페이스를 제안합니다
• 수정할 파일을 보여줍니다
• 리팩터링 순서를 설명합니다

실행 전에 추가 검토와 팀 논의를 위해 Verdent에 플랜을 plan.md 파일로 저장해 달라고 요청할 수 있습니다.

포괄적인 검색에 Explorer 사용하기:

복잡한 리팩터링의 경우 Verdent에 Explorer 에이전트를 사용해 철저히 검색해 달라고 명시적으로 요청합니다.

Use the Explorer agent to find all places where we manually validate email addresses, then refactor them to use a centralized validation utility

이렇게 하면 Verdent가 업데이트가 필요한 모든 위치를 찾아 코드베이스 전반에서 리팩터링이 일관되지 않게 적용되는 일을 방지합니다.

여러 파일 리팩터링

Verdent는 import, 의존성, 파일 간 참조를 유지하면서 여러 파일에 걸쳐 리팩터링합니다. 영향을 받는 모든 파일을 식별하고 올바른 순서로 업데이트하며, 코드베이스 전체의 일관성을 보장합니다.

여러 파일 리팩터링의 작동 방식:

1. 탐색 단계: Verdent가 Explorer를 사용해 변경이 필요한 모든 파일을 찾습니다
2. 의존성 분석: 업데이트 순서를 정하기 위해 파일 간 의존성을 식별합니다
3. 플랜 생성: 수정할 모든 파일과 변경 순서를 보여줍니다
4. 순차 업데이트: 의존성 순서대로 파일을 수정합니다(예: 해당 타입을 사용하는 컴포넌트보다 타입을 먼저 수정)
5. import 관리: import, export, 파일 간 참조를 자동으로 업데이트합니다
6. 검증: 변경 사항이 모든 파일에서 일관적인지 확인합니다

예시:

Rename the User interface to UserProfile across the entire project

Verdent는 다음을 수행합니다.

• User를 import하거나 사용하는 모든 파일을 찾습니다
• 타입 정의, 구현, 사용 위치를 식별합니다
• 타입 정의를 먼저 업데이트한 뒤 구현, 사용 위치 순으로 업데이트합니다
• 모든 import 문을 조정합니다
• 코드베이스 전반의 일관성을 보장합니다

범위 검토에 Plan Mode 사용하기:

여러 파일 리팩터링을 실행하기 전에 Plan Mode에서 전체 범위를 검토합니다.

In Plan Mode: Extract the authentication logic from UserController into a separate AuthService

Verdent는 다음을 보여줍니다.

• 생성될 파일(새 AuthService)
• 수정될 파일(UserController 및 모든 importer)
• UserController에서 AuthService로 이동할 코드
• import와 의존성이 어떻게 업데이트될지

이를 통해 의도치 않은 범위 확장을 방지하고, 진행 전에 전체 영향을 이해할 수 있습니다.

코드 품질 개선 요청하기

Verdent는 요청받지 않으면 개선 사항을 능동적으로 제안하지 않습니다. 하지만 언제든 코드 품질 리뷰와 개선 제안을 요청할 수 있습니다.

Review this code for potential improvements

Suggest ways to improve code quality in the UserService module

Are there any performance optimizations we could make here?

Analyze the PaymentController for maintainability issues

@services/UserService.js Review this module for dependency injection improvements

@controllers/PaymentController.js Identify opportunities to reduce complexity

대규모 리팩터링 프로젝트

대규모 리팩터링에서는 가장 안정적인 결과를 얻기 위해 Plan Mode와 여러 단계 접근 방식을 사용합니다. Verdent는 리팩터링을 관리 가능한 단계로 나누어, 다음 단계로 진행하기 전에 각 단계를 검토하고 승인할 수 있게 합니다.

여러 단계 리팩터링 워크플로:

1단계: 초기 분석

Explorer 에이전트와 함께 Plan Mode를 사용해 영향을 받는 모든 파일과 의존성을 식별합니다.

In Plan Mode: Use Explorer to analyze our codebase and create a plan to replace our custom authentication with OAuth 2.0

Verdent는 포괄적인 분석을 수행합니다.

• 모든 인증 관련 코드를 식별합니다
• 의존성과 연동 지점을 매핑합니다
• 복잡도와 위험 영역을 평가합니다
• 단계 구성을 제안합니다

2단계: 단계별 플랜 수립

Verdent는 검토할 수 있도록 여러 단계 플랜을 만듭니다.

예시 플랜:

• 1단계: OAuth 라이브러리 추가 및 엔드포인트 구성
• 2단계: 사용자 모델 및 데이터베이스 스키마 업데이트
• 3단계: 기존 인증 로직 마이그레이션
• 4단계: 더 이상 사용하지 않는 인증 코드 제거
• 5단계: 테스트와 문서 업데이트

각 단계에는 다음이 포함됩니다.

• 수정할 파일
• 예상 복잡도
• 이전 단계에 대한 의존성
• 위험 평가

3단계: 단계별 실행

한 번에 한 단계씩 실행하고, 단계 사이에 테스트합니다.

1. Plan Mode에서 1단계를 승인합니다
2. Agent Mode로 전환하고 실행합니다
3. 1단계가 작동하는지 충분히 테스트해 검증합니다
4. 2단계를 위해 Plan Mode로 돌아갑니다
5. 모든 단계가 완료될 때까지 반복합니다

4단계: 반복적 개선

각 단계 후 결과를 검토합니다. 문제가 발생하면 다음을 수행합니다.

• 남은 단계의 플랜을 조정합니다
• 필요한 경우 수정 단계를 추가합니다
• 발견한 내용을 바탕으로 접근 방식을 다듬습니다

이 단계적 접근 방식은 안전성을 보장하고, 대규모 리팩터링 프로젝트 중 문제가 발생했을 때 방향을 조정할 수 있게 합니다.

성능 최적화

Verdent는 성능 병목을 찾기 위해 코드를 분석하고, 알고리즘 복잡도 개선, 효율적인 자료구조, 리소스 사용량 감소 등 최적화를 제안합니다.

Analyze the performance of this data processing function and suggest improvements

Can we improve the time complexity of this search algorithm?

Optimize the searchProducts function that's currently O(n²)

Optimize this component to reduce unnecessary re-renders

Identify performance bottlenecks in the API request handler

리팩터링 중 기능 유지하기

Verdent는 내부 구현을 개선하면서도 동일한 입력, 출력, 동작을 유지해 리팩터링 중 코드 기능을 보존하는 것을 목표로 합니다.

Verdent가 기능을 유지하는 방식:

• 입력/출력 분석: 함수 시그니처, API 계약, 기대 동작을 식별합니다
• 테스트 인식: 기존 테스트를 동작 명세로 고려합니다
• 보수적 변경: 리팩터링 목표를 달성하는 데 필요한 최소한의 변경만 수행합니다
• 검증: 기능이 유지되는지 확인하기 위해 테스트를 생성하거나 실행할 수 있습니다

안전한 리팩터링을 위한 모범 사례:

1. 리팩터링한 코드는 항상 테스트합니다 - Verdent의 분석이 있어도, 특히 복잡한 리팩터링에서는 수동 또는 자동 테스트로 기능이 유지되는지 검증해야 합니다

2. 버전 관리를 사용합니다 - 문제가 생겼을 때 되돌릴 수 있도록 리팩터링 전에 커밋합니다

3. 점진적으로 리팩터링합니다 - 큰 리팩터링을 더 작은 단계로 나누고, 각 변경 후 테스트합니다

4. 변경 사항을 꼼꼼히 검토합니다 - diff를 확인해 무엇이 왜 바뀌었는지 이해합니다

5. 복잡한 리팩터링에는 Plan Mode를 사용합니다 - 실행 전에 접근 방식을 검토해 잠재적인 문제를 찾습니다

예시: 안전한 리팩터링 요청

Refactor the calculateOrderTotal function to use a more maintainable structure, but ensure it produces identical results for all input cases

Verdent는 다음을 수행합니다.

• 현재 구현과 엣지 케이스를 분석합니다
• 리팩터링된 구조를 제안합니다
• 리팩터링된 버전이 동등한 이유를 설명합니다
• 동등성을 검증할 테스트 케이스를 제안합니다

기능이 바뀔 수 있는 경우:

경우에 따라 리팩터링이 의도적으로 동작을 변경하기도 합니다(버그 수정, 검증 개선). 이를 명시적으로 밝힙니다.

Refactor the email validation function to correctly handle international domains, which the current implementation doesn't support

이는 동작 변경이 예상되고 의도된 것임을 알려줍니다.

모범 사례

함께 보기