Cursor 고급 기능

Cursor 고급 기능 완벽 가이드

Cursor의 숨겨진 기능들을 활용하여 개발 생산성을 극대화하는 방법을 알아봅니다.

Composer 심층 가이드

Composer는 여러 파일을 동시에 생성/수정할 수 있는 Cursor의 핵심 기능입니다.

Composer 열기

• Cmd/Ctrl + I: Composer 패널 열기
• Cmd/Ctrl + Shift + I: 전체 화면 Composer

효과적인 Composer 사용법

새로운 React 컴포넌트를 만들어줘:

1. components/UserProfile.tsx
   - 사용자 프로필 카드 컴포넌트
   - props: user 객체 (name, email, avatar)
   - Tailwind CSS 스타일링

2. hooks/useUser.ts
   - 사용자 데이터 fetching 훅
   - SWR 사용

3. types/user.ts
   - User 타입 정의

모든 파일이 서로 import 관계가 맞도록 해줘.

@ 멘션 시스템

파일 참조

• @파일명: 특정 파일 컨텍스트 추가
• @폴더/: 폴더 전체 참조
• @codebase: 전체 코드베이스 검색

문서 참조

• @Docs: 연결된 문서 검색
• @Web: 웹 검색 결과 포함

사용 예시

@components/Button.tsx 와 동일한 스타일로
@components/Card.tsx 컴포넌트를 만들어줘.
@Docs Next.js 앱 라우터 문서를 참고해서
라우팅도 설정해줘.

Rules 설정

.cursorrules 파일로 프로젝트별 AI 지침을 설정할 수 있습니다.

# .cursorrules

## 코딩 스타일
- TypeScript strict 모드 사용
- 함수형 컴포넌트 선호
- CSS-in-JS 대신 Tailwind CSS 사용

## 네이밍 컨벤션
- 컴포넌트: PascalCase
- 훅: use로 시작
- 유틸리티: camelCase

## 패턴
- 커스텀 훅으로 로직 분리
- 컴포넌트는 가능한 작게 유지
- 타입은 별도 파일로 분리

## 금지 사항
- any 타입 사용 금지
- console.log는 개발 중에만
- 인라인 스타일 금지

AI 모델 선택

모델	특징	권장 사용
claude-3.5-sonnet	균형 잡힌 성능	일반 코딩
gpt-4o	빠른 응답	간단한 작업
claude-3-opus	최고 성능	복잡한 리팩토링
cursor-small	초고속	자동완성

Cmd+K 고급 활용

코드 변환

# 선택한 코드에서 Cmd+K

"이 클래스 컴포넌트를 함수형으로 변환"
"이 JavaScript를 TypeScript로 변환"
"이 코드에 에러 처리 추가"

테스트 생성

"이 함수의 단위 테스트를 Jest로 작성"
"엣지 케이스 포함한 테스트 추가"

Inline Edit

코드 중간에서 바로 편집:

1. 수정할 코드 선택
2. Cmd+K 누르기
3. 변경 사항 설명
4. Tab으로 적용

Git 통합

• 변경사항 요약 자동 생성
• 커밋 메시지 추천
• diff 기반 코드 리뷰

디버깅 지원

# 에러 메시지와 함께 질문

이 에러가 발생해:
[에러 메시지 붙여넣기]

@파일명 이 파일에서 문제를 찾아줘.