기본 사용법

대화 시작하기

간단한 명령

Claude Code는 명확하고 구체적인 지침이 있을 때 가장 효과적입니다.

 

사용자 프로필 카드에 대한 React 구성 요소를 만듭니다.

 

인증 모듈의 TypeScript 오류를 수정하세요

 

쇼핑 카트 기능에 대한 단위 테스트를 추가합니다.

자연어

자연어를 사용하여 Claude와 상호 작용할 수 있습니다.

 

/api/users 엔드포인트에 접근하려고 하면 404 오류가 발생합니다. 이 문제를 디버깅하는 데 도움을 주시겠어요?

 

모바일 내비게이션 메뉴가 작은 화면에서 제대로 작동하지 않습니다. 반응형으로 개선해 주세요.

 

필수 워크플로

1. 탐색-계획-코드

가장 다양한 용도로 활용 가능한 클로드 코드 패턴은 다음과 같습니다.

1단계: 탐색

이 코드베이스의 현재 인증 시스템을 이해하도록 도와주세요

 

2단계: 계획

OAuth 로그인 지원을 추가해야 합니다. 이 프로젝트에 가장 적합한 접근 방식은 무엇일까요?

 

3단계: 코드

우리가 논의한 계획을 사용하여 Google OAuth 통합을 구현합니다.

 

2. 파일 작업

파일 읽기

src/components/Header.tsx의 내용을 보여주세요

 

코드 편집

다크 모드 토글을 포함하도록 헤더 구성 요소를 업데이트합니다.

 

파일 생성

src/utils/date.ts에 날짜 형식을 지정하기 위한 새로운 유틸리티 함수를 만듭니다.

3. 테스트 및 품질

테스트 실행

테스트 모음을 실행하고 실패한 테스트를 수정합니다.

 

코드 품질

잠재적인 개선 사항과 모범 사례를 알아보려면 이 구성 요소를 검토하세요.

 

오류 수정

빌드 오류를 수정하고 프로젝트가 성공적으로 컴파일되는지 확인하세요.

 

프로젝트 작업

프로젝트 컨텍스트

Claude는 자동으로 프로젝트 구조를 이해합니다.

기존 패턴을 따라 사용자 기본 설정에 대한 새로운 API 엔드포인트를 추가합니다.

다른 구성 요소에서 사용된 디자인 시스템과 일치하는 구성 요소를 만듭니다.

 

코드 스타일 일관성

Claude는 기존 코드와의 일관성을 유지합니다.

나머지 프로젝트에서 사용된 코딩 스타일과 일치하도록 이 함수를 리팩토링합니다.

기존 코드베이스의 패턴에 따라 TypeScript 유형을 추가합니다.

 

고급 사용 패턴

1. 다단계 작업

복잡한 작업을 관리 가능한 단계로 나누세요.

완전한 사용자 인증 시스템을 구현해야 합니다. 아키텍처를 계획하고 단계별로 구현해 보겠습니다.

 

2. 맥락 구축

더 나은 결과를 위해 관련 맥락을 제공하세요.

React와 Node.js를 사용하여 전자상거래 앱을 개발하고 있습니다. 결제 시스템은 Stripe를 사용합니다. 구독 결제 기능을 추가해야 합니다. 현재 결제 코드는 다음과 같습니다. [코드 붙여넣기]

 

3. 반복적 개발

점진적으로 기능을 구축하세요:

먼저 프로필 섹션만 있는 기본 사용자 대시보드를 만듭니다. 다음 단계에서 분석 기능과 설정을 추가하겠습니다.

 

모범 사례

1. 구체적으로 말하세요

좋음 : “UserProfile.tsx의 useEffect 후크에서 메모리 누수를 수정하세요.”  

우수 : “UserProfile.tsx의 15번째 줄에 있는 useEffect가 이벤트 리스너를 정리하지 않아 메모리 누수를 발생시키고 있습니다.”

2. 맥락 제공

좋음 : "오류 처리 추가" 

우수 : "인증 서비스에서 사용된 패턴을 따라 사용자 서비스의 API 호출에 오류 처리 추가"

3. 예를 사용하세요

좋음 : "이 버튼의 스타일을 지정하세요" 

우수 : "LoginForm.tsx와 같은 디자인 시스템의 기본 버튼과 일치하도록 이 버튼의 스타일을 지정하세요"

4. 기존 코드 참조

UserCard와 유사하지만 제품 정보를 표시하기 위한 새 구성 요소를 만듭니다.

등록 양식과 동일한 검증 패턴을 사용하세요

 

일반 명령

개발

• 개발 서버 시작
• 프로덕션용 프로젝트 빌드
• 린팅 검사 실행
• 종속성 업데이트

디버깅

• 이 오류 디버깅을 도와주세요: [오류 메시지]
• 테스트가 실패하는 이유를 확인하세요.
• [구성 요소]의 성능 문제를 조사하세요.

코드 품질

• 보안 문제가 있는지 이 코드를 검토하세요.
• 더 나은 성능을 위해 이 함수를 최적화하세요.
• 이 API 호출에 적절한 오류 처리를 추가하세요.

선적 서류 비치

• 이 함수에 JSDoc 주석을 추가합니다.
• 새로운 기능으로 README를 업데이트합니다.
• 이러한 엔드포인트에 대한 API 문서를 작성합니다.

도움 받기

설명을 요청하세요

이 인증 미들웨어가 어떻게 작동하는지 설명하세요

모범 사례 요청

이 React 앱에서 상태 관리를 처리하는 가장 좋은 방법은 무엇입니까?

문제 해결

빌드가 [오류] 오류로 인해 실패합니다. 어떻게 해결해야 하나요?