새 코드 작성

Verdent for VS Code는 특별한 문법 없이 자연어 요청으로 새 코드를 작성할 수 있게 도와줍니다. 만들고 싶은 것을 설명하면, Verdent가 프로젝트의 패턴과 규칙을 유지하면서 여러 파일에 걸친 프로덕션 수준 구현을 생성합니다.

배울 내용

• 자연어 프롬프트로 새 기능 요청하기
• 올바른 의존성과 함께 여러 파일에 걸쳐 코드 생성하기
• 다양한 프로그래밍 언어와 프레임워크로 작업하기
• 전체 프로젝트 구조 스캐폴딩하기
• 대화형 개선을 통해 생성된 코드 반복 수정하기

사전 준비

Verdent로 코드를 작성하기 전에 다음을 준비합니다.

• Verdent 확장이 설치된 Visual Studio Code
• 사용 가능한 크레딧이 있는 활성 Verdent 구독
• VS Code에서 열린 프로젝트 워크스페이스(또는 스캐폴딩용 빈 디렉터리)

새 기능 요청하기

Verdent는 특별한 명령어나 문법 없이 자연어 기능 요청을 이해합니다. Input Box에 원하는 내용을 그대로 설명하면 됩니다.

기본 기능 요청:

필요한 내용을 간단히 설명하는 것부터 시작합니다.

Create a UserProfile component that shows the user's avatar image, name as a heading, and email below it. Make the avatar circular.

Add a login form with email and password fields to the authentication page

Build a notification system that displays toast messages for success and error events

Verdent는 요청을 분석하고 프로젝트 구조를 살펴본 뒤, 파일 구성, 네이밍 규칙, import 스타일, 코딩 관행을 포함해 기존 패턴에 맞는 코드를 생성합니다.

상세 구현 요청:

더 세밀하게 제어하려면 기술 요구사항을 명확히 지정합니다.

Add a dark mode toggle to the settings page using React Context API. Store the theme preference in localStorage and apply CSS variables for light and dark themes across all components.

Create a POST /api/users/register endpoint that validates email format, password strength (min 8 chars, uppercase, number, special char), and checks for duplicate emails before creating the user in the database.

Implement pagination for the blog posts list with 10 posts per page. Add Previous/Next buttons and page number indicators. Update the URL query params (?page=2) and fetch data from /api/posts?page=X&limit=10.

제공하는 컨텍스트가 많을수록 구현 결과가 기대에 더 잘 맞습니다.

Add a search bar to the navigation

Create a footer component with copyright and links

Add a search feature to the product catalog with filtering by category and price range

@-멘션으로 컨텍스트 추가하기

특정 파일이나 컴포넌트를 참조해 목표가 분명한 기능 추가를 요청할 수 있습니다.

@auth.js Add password reset functionality to this authentication module

@components/Dashboard.js Add a statistics widget showing user activity for the past 30 days

파일 경로 뒤에 오는 @ 기호는 Verdent에게 요청을 구현할 때 특정 코드에 집중하라고 알려줍니다. 이를 통해 새 기능이 기존 구현과 자연스럽게 통합됩니다.

언어 및 프레임워크 지원

Verdent는 사실상 모든 프로그래밍 언어에서 동작하며, 언어별 플러그인이 없어도 주요 생태계 전반의 코드 의미, 문법 패턴, 일반적인 프레임워크를 이해합니다.

function UserProfile({ user }) {
  return (
    <div className="profile">
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

<template>
  <div class="profile">
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
</template>

<script setup>
defineProps(['user']);
</script>

@Component({
  selector: 'user-profile',
  template: `
    <div class="profile">
      <h1>{{ user.name }}</h1>
      <p>{{ user.email }}</p>
    </div>
  `
})
export class UserProfileComponent {
  @Input() user!: User;
}

Verdent는 Shell 스크립팅(Bash, Zsh), SQL, HTML/CSS, Markdown, YAML, JSON, 구성 언어도 지원합니다.

프레임워크 이해

언어를 넘어, Verdent는 프레임워크별 패턴을 인식합니다.

덜 일반적인 언어에 맞춰 최적화하기:

특수한 프레임워크나 덜 일반적인 언어에서는 다음 방법으로 결과를 개선할 수 있습니다.

• 따르고 싶은 패턴을 보여주는 코드 예시 제공
• @-멘션을 사용해 기존 코드베이스의 스니펫 포함
• MCP(Model Context Protocol) 서버를 사용해 언어별 컨텍스트 주입

여러 파일에 걸친 코드 생성

Verdent는 한 번의 요청으로 여러 개의 조율된 파일을 만들고, import, 의존성, 파일 간 참조를 자동으로 처리합니다.

예시:

Create a UserDashboard component with a separate hooks file for data fetching, a styles file, a types file for TypeScript interfaces, and a test file

Verdent는 다음을 생성합니다.

• components/UserDashboard/UserDashboard.tsx - 메인 컴포넌트
• components/UserDashboard/useUserData.ts - 커스텀 hook
• components/UserDashboard/UserDashboard.module.css - 스타일
• components/UserDashboard/types.ts - TypeScript 인터페이스
• components/UserDashboard/UserDashboard.test.tsx - 테스트

모든 파일에는 올바른 import와 파일 간 연결이 포함됩니다.

병렬 생성과 순차 생성:

느슨하게 결합된 파일(독립 컴포넌트, 별도 모듈, 병렬 테스트 파일)의 경우, Verdent는 서브에이전트를 사용해 여러 파일을 병렬로 작성하여 속도와 효율을 높일 수 있습니다.

서로 의존성이 있는 강하게 결합된 파일(서로 import하는 파일, 공유 타입, 의존 컴포넌트)의 경우, Verdent는 의존성 관리와 올바른 import를 보장하기 위해 순차적으로 작성합니다.

보일러플레이트 및 스캐폴딩 생성

보일러플레이트 코드 생성

Verdent는 프로젝트의 기존 패턴을 이해하고 동일한 스타일과 구조를 따르는 새 코드를 만들어 보일러플레이트를 생성합니다.

Create a new ProductCard component with props for title, price, and image

Write an Express route handler for user registration with validation

Generate unit tests for the authentication service using Jest

Verdent는 코드베이스를 분석해 규칙(네이밍 스타일, import 패턴, 폴더 구조)을 맞추고, 일반 템플릿이 아니라 기존 코드에 자연스럽게 통합되는 보일러플레이트를 생성합니다.

프로젝트 스캐폴딩

Verdent는 전체 폴더 계층, 구성 파일, 의존성, 초기 코드를 포함한 전체 프로젝트 구조를 스캐폴딩합니다.

Create a new React application with TypeScript, React Router, Context API for state management, and Jest testing setup

Verdent는 package.json, tsconfig.json, 컴포넌트 디렉터리, 라우팅 구성, context provider, 테스트 파일, 버전 관리 설정(.gitignore, 초기 commit)을 포함한 전체 프로젝트 구조를 생성합니다.

스캐폴딩 모범 사례:

프로젝트를 스캐폴딩할 때는 Plan Mode를 사용합니다. Verdent는 다음을 수행합니다.

1. 선호사항(스타일링 솔루션, 컴포넌트 구조, 테스트 방식)에 대한 확인 질문을 합니다.
2. 전체 파일 구조와 디렉터리 레이아웃이 포함된 상세 플랜을 제시합니다.
3. 생성 전에 스캐폴드를 검토하고 다듬을 수 있게 합니다.
4. 모든 파일이 올바르게 생성되었는지 확인하면서 프로젝트를 생성합니다.

복잡한 스캐폴딩의 경우, Verdent는 서브에이전트를 사용해 독립적인 설정 작업(의존성 설치, 구성 파일 생성, 데이터베이스 스키마 설정)을 병렬화할 수 있습니다. 의존성이 있는 파일은 순차적으로 작성해 의존성을 보존합니다.

스캐폴딩 후에는 Verdent가 초기 테스트와 빌드 명령을 실행해 설정을 검증하고 프로젝트 구조가 올바르게 작동하는지 확인할 수 있습니다.

생성된 코드 반복 수정하기

Verdent는 같은 채팅 세션에서 자연어 후속 요청으로 생성된 코드를 다듬는 대화형 워크플로를 사용합니다.

기본 반복 흐름:

1. Verdent가 초기 코드를 생성합니다.
2. 결과를 검토합니다.
3. 피드백을 제공하거나 변경을 요청합니다.
4. Verdent가 피드백을 바탕으로 코드를 업데이트합니다.
5. 만족할 때까지 반복합니다.

반복 예시:

Initial: Create a login form component

Verdent가 기본 form을 생성합니다.

Follow-up: Add email validation and show error messages below each field

Verdent가 검증을 포함하도록 컴포넌트를 업데이트합니다.

Follow-up: Style it with Tailwind CSS and add a loading state for the submit button

Verdent가 스타일을 다듬고 loading 동작을 추가합니다.

빠른 피드백 루프:

Verdent는 대화 전체에서 컨텍스트를 유지하므로 다음을 할 수 있습니다.

• 컨텍스트를 반복하지 않고 점진적인 변경 요청
• 코드를 테스트하고 문제를 보고해 Verdent가 수정하도록 하기
• 구현 선택에 대해 "왜" 질문하기
• 대안을 요청해 다른 접근 방식 시도하기

모범 사례

함께 보기