기존 코드 이해하기

Verdent for VS Code는 자연어 질문과 자동 탐색을 통해 익숙하지 않은 코드베이스를 이해하도록 도와줍니다. 내장된 Explorer 서브에이전트는 기본 컨텍스트 창을 소모하지 않고 파일을 빠르게 찾고, 코드 패턴을 검색하며, 아키텍처 관련 질문에 답합니다.

배울 내용

• Explorer 서브에이전트를 사용해 익숙하지 않은 코드베이스 탐색하기
• 코드 구조와 구현에 대해 질문하기
• 함수, 클래스, 모듈에 대한 자세한 설명 얻기
• 기존 코드에서 문서 생성하기
• 프로젝트 아키텍처와 데이터 흐름 이해하기
• 새 팀원이 효율적으로 온보딩하도록 돕기

사전 요구 사항

코드를 이해하기 위해 Verdent를 사용하기 전에 다음이 필요합니다.

• Verdent 확장이 설치된 Visual Studio Code
• VS Code에서 열린 코드베이스 또는 프로젝트 워크스페이스
• 사용 가능한 크레딧이 있는 활성 Verdent 구독

익숙하지 않은 코드베이스 탐색하기

코드베이스 구조에 대해 질문하거나 파일 검색을 요청하면, Verdent는 빠른 코드베이스 탐색에 최적화된 토큰 효율적인 전문가인 Explorer 서브에이전트(@Explorer)에 자동으로 위임합니다.

Explorer 서브에이전트는 다음을 빠르게 수행합니다.

• 패턴이나 이름과 일치하는 파일 찾기
• 특정 키워드나 함수를 코드에서 검색하기
• 코드베이스 아키텍처에 대한 질문에 답하기
• 기능이 어디에 구현되어 있는지 식별하기

탐색 질문 예시:

What is the structure of this project?

Where is user authentication handled?

Find all API endpoint definitions

Show me where database queries are defined

Explorer는 백그라운드에서 효율적으로 작동하며, 기본 컨텍스트 창을 소모하지 않고 빠른 답변을 제공합니다. Verdent는 관련 파일 경로와 코드 스니펫과 함께 결과를 보여줍니다.

복잡한 작업을 위한 병렬 탐색:

복잡한 탐색 작업에서는 여러 Explorer 에이전트를 병렬로 실행해 시간을 절약할 수 있습니다. 각 에이전트는 코드베이스의 서로 다른 측면을 동시에 조사합니다. 그런 다음 Verdent가 결과를 일관된 요약으로 종합합니다.

예시:

Use the Explorer agent to find all places where we manually validate email addresses

이렇게 하면 Verdent가 코드베이스 전체에서 인스턴스를 놓치지 않고 모든 위치를 체계적으로 발견할 수 있습니다.

코드에 대해 질문하기

Verdent는 자연어를 사용해 코드베이스에 대한 거의 모든 질문에 답할 수 있습니다. AI는 컨텍스트를 이해하고 자세한 설명, 분석, 인사이트를 제공합니다.

Explain how authentication works in this project

What does the calculateTotal function do?

How are API requests handled?

What is the overall architecture of this application?

How do the components communicate with each other?

What design patterns are used in this codebase?

Why do you think Redux was chosen instead of Context API for state management?

What would happen if I changed the API timeout from 30s to 60s?

Is this validateUserInput function redundant?

Where is user data validated?

Show me all database queries in the project

What dependencies does this project have?

How does the quicksort algorithm work in the sortItems function?

What are the best practices for error handling in React components?

Explain the Observer pattern implementation in the EventEmitter class

함수와 클래스 설명하기

Verdent는 특정 함수나 클래스의 구현, 매개변수, 반환값, 코드베이스 전반의 사용 방식을 분석해 자세히 설명합니다.

예시:

Explain the UserAuth class

What does the processPayment function do?

Break down the ApiService class methods

Verdent가 설명하는 내용:

• 목적: 함수나 클래스가 수행하는 일
• 매개변수: 입력 타입, 예상 값, 제약 조건
• 반환 타입: 출력 타입과 가능한 반환값
• 내부 로직: 구현이 단계별로 작동하는 방식
• 의존성: 사용되는 외부 모듈, 함수 또는 서비스
• 사용 예시: 코드의 다른 위치에서 함수/클래스가 사용되는 방식

Verdent는 코드의 실행 흐름을 추적하고, 엣지 케이스를 식별하며, 구현 선택의 근거를 설명합니다.

문서 생성하기

Verdent는 인라인 코드 주석(JSDoc, Python docstrings 등), README 파일, API 문서, 아키텍처 가이드 등 여러 형식의 문서를 생성합니다.

문서화에 Plan Mode 사용하기

Plan Mode에서 Verdent는 다음을 수행할 수 있습니다.

• 기존 문서를 분석해 스타일과 밀도 맞추기
• 형식 선호도에 대한 확인 질문하기(주석 스타일, 상세 수준, 예시 포함 여부)
• 코드베이스를 분석해 현재 문서화 패턴 이해하기
• 무엇을 어떤 스타일로 문서화할지 보여주는 문서화 플랜 제시하기

예시:

Generate JSDoc comments for all functions in the utils folder

Verdent는 프로젝트의 기존 JSDoc 주석을 살펴보고, 선호도(매개변수 설명, 예시 사용 포함 여부)에 대해 질문한 다음, 이미 정한 관례에 맞는 문서를 생성합니다.

지원되는 문서 형식:

• 인라인 주석: JSDoc, Python docstrings, Javadoc, XML 문서 주석
• README 파일: 프로젝트 개요, 설정 지침, 사용 가이드
• API 문서: 엔드포인트 설명, 요청/응답 형식, 인증 세부 정보
• 아키텍처 가이드: 시스템 설계 설명, 컴포넌트 관계, 데이터 흐름 다이어그램

파일과 모듈 요약하기

Verdent는 코드를 읽고 구조를 이해한 뒤, 파일이나 모듈의 목적을 쉬운 말로 설명해 분석하고 요약합니다.

예시:

Summarize what the authMiddleware.js file does

Explain the purpose of the UserService module

What's the main responsibility of the PaymentController?

Verdent가 제공하는 내용:

• 주요 목적: 파일/모듈이 시스템에서 수행하는 일
• 핵심 함수: 주요 함수 또는 메서드와 그 역할
• 의존성: 사용되는 외부 모듈과 서비스
• 내보내기: 공개 API와 시스템의 다른 부분에서 접근할 수 있는 항목
• 패턴: 사용된 디자인 패턴 또는 아키텍처 접근 방식
• 연동 지점: 프로젝트의 다른 부분과 연결되는 방식

Verdent는 파일을 읽고, 핵심 함수를 식별하고, 의존성을 추적하며, 코드가 더 큰 프로젝트 아키텍처 안에서 어떻게 맞물리는지 설명합니다.

아키텍처 이해하기

Verdent는 자세한 텍스트 설명, 컴포넌트 관계, 데이터 흐름 설명을 통해 아키텍처를 설명합니다. 그래픽 다이어그램을 직접 생성하지는 않지만, 렌더링할 수 있는 ASCII 아트 다이어그램이나 Mermaid 다이어그램 코드를 만들 수 있습니다.

예시:

Explain the architecture of this application and show component relationships

Verdent가 다음과 같은 ASCII 표현을 생성할 수 있습니다.

Frontend (React)
    ↓
API Layer (Express)
    ↓
Service Layer (Business Logic)
    ↓
Database Layer (PostgreSQL)

또는 렌더링용 Mermaid 코드를 생성할 수 있습니다.

graph TD
    A[React Frontend] --> B[API Gateway]
    B --> C[Auth Service]
    B --> D[User Service]
    C --> E[Database]
    D --> E

아키텍처 설명에 포함되는 내용:

• 컴포넌트 상호작용: 시스템의 서로 다른 부분이 통신하는 방식
• 데이터 흐름: 정보가 애플리케이션을 통과해 이동하는 방식
• 아키텍처 패턴: MVC, 마이크로서비스, 계층형 아키텍처 등
• 기술 스택: 프런트엔드, 백엔드, 데이터베이스, 외부 서비스
• 연동 지점: APIs, 메시지 큐, 웹훅, 서드파티 서비스
• 확장성 패턴: 로드 밸런싱, 캐싱, 데이터베이스 샤딩

Verdent는 프로젝트 구조를 분석하고, import와 의존성을 추적하고, 패턴을 식별하며, 시스템 설계 뒤의 아키텍처 결정을 설명합니다.

새 팀원 온보딩하기

Verdent는 코드베이스에 대한 질문에 답하고, 아키텍처 결정을 설명하고, 핵심 파일과 패턴을 식별하고, 신규 구성원이 프로젝트 구조와 관례를 이해할 수 있도록 맞춤형 문서를 생성해 새 팀원의 온보딩을 돕습니다.

Plan Mode에서 Verdent는 개인화된 온보딩 가이드를 만들기 전에, 새 팀원의 역할에 가장 관련 있는 코드베이스 측면이 무엇인지 이해하기 위해 확인 질문을 할 수 있습니다.

온보딩 질문 예시:

What's the best starting point for understanding this codebase?

How does data flow from the API to the frontend?

Where should I look to understand the authentication system?

What are the naming conventions and code style guidelines used here?

Verdent가 생성할 수 있는 것:

• 온보딩 가이드: 코드베이스 아키텍처를 단계별로 안내하는 설명
• 컴포넌트 맵: 컴포넌트가 서로 어떻게 관련되는지 보여주는 시각적 또는 텍스트 기반 가이드
• 공통 패턴: 자주 사용되는 패턴과 관례에 대한 문서
• 설정 지침: 개발 환경을 구성하고 프로젝트를 실행하는 방법
• 첫 작업: 익숙해지기 위해 시작하기 좋은 간단한 첫 기여 제안

새 팀원은 시니어 개발자의 시간을 방해하거나 코드를 읽는 데 몇 시간을 쓰지 않고도, 대화하듯 코드베이스를 탐색하고 즉시 답을 얻을 수 있습니다.

모범 사례

함께 보기