728x90
Cursor는 AI 기반 코드 에디터로, VS Code를 기반으로 하여 강력한 AI 기능을 통합한 개발 도구입니다.
- AI 모델 통합: Claude, GPT-4, Gemini 등 다양한 모델 지원
- 컨텍스트 인식: 전체 코드베이스를 이해하고 관련 코드 참조
- 자동 완성 및 수정: 코드 작성과 버그 수정 자동화
- 다중 작업 모드: Ask, Agent, Chat 등 용도별 모드 제공
300x250
프로젝트 구조 최적화
권장 디렉토리 구조
project-root/
├── src/
│ ├── components/ # UI 컴포넌트
│ │ ├── common/ # 공통 컴포넌트
│ │ └── features/ # 기능별 컴포넌트
│ ├── services/ # 비즈니스 로직
│ │ ├── api/ # API 통신
│ │ └── utils/ # 유틸리티 함수
│ ├── hooks/ # 커스텀 훅
│ ├── types/ # TypeScript 타입 정의
│ └── styles/ # 스타일 파일
├── tests/ # 테스트 파일
├── docs/ # 문서
└── .cursorignore # Cursor 제외 파일
Mermaid 다이어그램 생성 요청 예시
"프로젝트 구조를 Mermaid 다이어그램으로 시각화하고,
각 폴더의 역할과 의존성을 보여줘"
파일 크기 관리
❌ 나쁜 예: 1000줄이 넘는 단일 파일
components/Dashboard.tsx (1500 lines)
✅ 좋은 예: 모듈화된 구조
components/Dashboard/
├── index.tsx (50 lines)
├── DashboardHeader.tsx (200 lines)
├── DashboardContent.tsx (300 lines)
└── DashboardFooter.tsx (150 lines)
.cursorignore 설정
# .cursorignore 파일 예시
node_modules/
dist/
build/
*.log
.env
coverage/
# 테스트 중인 파일 보호
tests/experimental/*
# 민감한 설정 파일
config/secrets/*
Ask 모드 (읽기 전용)
코드를 수정하지 않고 분석과 계획만 수립할 때 사용합니다.
사용 예시
Ask 모드에서:
"현재 인증 시스템의 구조를 분석하고,
OAuth2.0으로 마이그레이션하는 계획을 세워줘.
코드는 수정하지 말고 단계별 전략만 설명해줘."
Agent 모드 (자동 수정)
실제 코드 수정과 파일 생성을 자동으로 수행합니다.
사용 예시
Agent 모드에서:
"Ask 모드에서 세운 OAuth2.0 마이그레이션 계획을
실제로 구현해줘. 다음 순서로 진행해:
1. 기존 auth 모듈 백업
2. OAuth2.0 provider 설정 파일 생성
3. 인증 플로우 구현
4. 테스트 코드 작성"
작업모드 전환 전략
1단계 (Ask): "이 버그의 원인이 뭘까? 가능한 시나리오를 분석해줘"
2단계 (Agent): "분석 결과 중 2번 시나리오가 맞는 것 같아. 이제 수정해줘"
테스트 기반 개발 (TDD) 접근법
단계별 진행
Step 1: "사용자 로그인 기능에 대한 실패하는 테스트 코드를 작성해줘"
// 생성된 테스트 코드
describe('User Authentication', () => {
it('should login with valid credentials', async () => {
const result = await login('user@test.com', 'password123');
expect(result.success).toBe(true);
expect(result.token).toBeDefined();
});
});
Step 2: "이 테스트가 통과하도록 최소한의 구현을 만들어줘"
AI 모델 선택 가이드
작업별 추천 모델
복잡한 아키텍처 설계:
- Claude Opus
- Gemini 2.0 Flash Thinking
빠른 코드 수정:
- GPT-4o
- Claude Sonnet
디버깅 및 분석:
- o1-preview
- Claude Opus
간단한 자동완성:
- Cursor-small
- GPT-4o-mini
모델 전환 예시
"이번 작업은 복잡한 상태 관리 리팩토링이니까
Claude Opus로 전환해서 진행할게.
@Claude-Opus 전체 Redux 구조를 Zustand로 마이그레이션하는
최적의 전략을 제시해줘"
Git 워크플로우 통합
커밋 전략
# 작업 전
git checkout -b feature/oauth-integration
# AI 작업 요청
"OAuth 통합 작업을 시작할게. 각 단계마다 의미있는 커밋을 만들어줘"
# AI가 제안하는 커밋 구조
git add src/auth/oauth.ts
git commit -m "feat: OAuth2.0 provider 설정 추가"
git add src/auth/callbacks.ts
git commit -m "feat: OAuth 콜백 핸들러 구현"
git add tests/auth/oauth.test.ts
git commit -m "test: OAuth 통합 테스트 추가"
컨텍스트 심볼(@) 활용법
모든 @ 심볼과 사용 예시
@Code - 특정 함수나 변수 참조
예: "@Code getUserById 함수를 TypeScript로 리팩토링해줘"
@Docs - 공식 문서 참조
예: "@Docs https://nextjs.org/docs/app 참고해서 app router로 마이그레이션해줘"
@Files - 여러 파일 동시 참조
예: "@Files src/api/* 모든 API 엔드포인트에 에러 핸들링 추가해줘"
@Folders - 폴더 전체 참조
예: "@Folders src/components 컴포넌트 폴더 구조를 atomic design으로 재구성해줘"
@Git - Git 정보 참조
예: "@Git 최근 3개 커밋에서 변경된 파일들의 테스트 커버리지 확인해줘"
@Recent - 최근 변경사항
예: "@Recent 방금 수정한 내용과 충돌하는 부분이 있는지 확인해줘"
@Codebase - 전체 코드베이스
예: "@Codebase 프로젝트 전체에서 deprecated API 사용 부분 찾아줘"
@Web - 웹 콘텐츠 참조
예: "@Web https://github.com/user/repo README 참고해서 설치 가이드 작성해줘"
@Past Chats - 이전 대화 참조
예: "@Past Chats 어제 논의한 데이터베이스 스키마 기반으로 마이그레이션 작성해줘"
다중 탭 병렬 작업
효율적인 탭 구성
Tab 1 (Ask): 아키텍처 분석 및 계획
Tab 2 (Agent): 실제 코드 구현
Tab 3 (Agent): 테스트 코드 작성
Tab 4 (Ask): 문서화 및 주석 작성
Auto 옵션 활용
설정 예시
{
"cursor.chat.autoApplyEdits": true,
"cursor.chat.autoRunCommands": true,
"cursor.chat.autoFixLints": true,
"cursor.chat.showSuggestions": true
}
Rule 생성 및 관리
Rule 생성 요청
"이번 프로젝트의 코딩 컨벤션을 Rule로 만들어줘:
- TypeScript strict mode 사용
- 함수는 모두 JSDoc 주석 포함
- 컴포넌트는 함수형으로만 작성
- 모든 상태는 Zustand로 관리
- 테스트는 파일명.test.ts 형식"
생성된 Rule 예시
Project Rules:
Language: TypeScript
Code Style:
- Use functional components only
- Include JSDoc for all exported functions
- Use Zustand for state management
- Follow ESLint airbnb configuration
File Structure:
- Component files: PascalCase.tsx
- Utility files: camelCase.ts
- Test files: [filename].test.ts
Testing:
- Write tests for all new features
- Maintain 80% code coverage
- Use React Testing Library
자동 문서화
API 문서 생성
"@Files src/api/* 모든 API 엔드포인트의
Swagger/OpenAPI 문서를 자동으로 생성해줘"
README 업데이트
"@Codebase 전체 프로젝트 구조를 분석해서
README.md를 다음 섹션으로 업데이트해줘:
- 프로젝트 소개
- 기술 스택
- 설치 방법
- 실행 방법
- API 문서
- 기여 가이드"
MCP (Model Context Protocol) 활용
주요 MCP 도구
개발 도구:
- filesystem: 파일 시스템 접근
- playwright: E2E 테스트 자동화
- puppeteer: 브라우저 자동화
데이터베이스:
- supabase: Supabase 통합
- postgres: PostgreSQL 직접 연결
작업 관리:
- github: GitHub 이슈/PR 관리
- linear: Linear 티켓 연동
모니터링:
- sentry: 에러 추적
- datadog: 성능 모니터링
MCP 설정 예시
{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": ["@modelcontextprotocol/server-filesystem"],
"env": {
"WORKSPACE_DIR": "/Users/username/projects"
}
},
"supabase": {
"command": "npx",
"args": ["@modelcontextprotocol/server-supabase"],
"env": {
"SUPABASE_URL": "https://your-project.supabase.co",
"SUPABASE_SERVICE_ROLE_KEY": "your-key"
}
}
}
}
커스텀 MCP 생성
사내 문서 연동 예시
// custom-mcp-server.js
import { Server } from '@modelcontextprotocol/sdk';
const server = new Server({
name: 'company-docs',
version: '1.0.0',
});
server.setRequestHandler('tools/list', async () => ({
tools: [{
name: 'search_docs',
description: '사내 문서 검색',
inputSchema: {
type: 'object',
properties: {
query: { type: 'string' }
}
}
}]
}));
// 문서 검색 구현
server.setRequestHandler('tools/call', async (request) => {
if (request.params.name === 'search_docs') {
const results = await searchInternalDocs(request.params.arguments.query);
return { content: results };
}
});
새 프로젝트 시작
전체 설정 프로세스
Step 1: "Next.js 14 + TypeScript + Tailwind CSS 프로젝트를 생성하고
최적의 폴더 구조로 초기 설정해줘"
Step 2: "ESLint, Prettier, Husky 설정을 추가하고
pre-commit hook으로 코드 품질을 자동 검사하도록 설정해줘"
Step 3: "GitHub Actions로 CI/CD 파이프라인을 구성해줘:
- 테스트 실행
- 빌드 확인
- Vercel 자동 배포"
레거시 코드 리팩토링
단계별 접근
분석 단계 (Ask 모드):
"@Codebase 전체 코드베이스에서 다음을 분석해줘:
- 중복 코드 패턴
- 사용하지 않는 의존성
- 복잡도가 높은 함수 (순환 복잡도 10 이상)
- 테스트 커버리지가 낮은 모듈"
계획 단계:
"분석 결과를 바탕으로 3주 스프린트로
리팩토링 로드맵을 만들어줘"
실행 단계 (Agent 모드):
"1주차 계획인 '중복 코드 제거'부터 시작해줘.
각 단계마다 테스트를 먼저 작성하고 진행해"
버그 수정 워크플로우
체계적인 디버깅
1. 재현 테스트 작성:
"@Recent 보고된 버그를 재현하는 테스트 케이스를 작성해줘"
2. 원인 분석:
"테스트 실패 지점에서 스택 트레이스를 분석하고
가능한 원인 3가지를 제시해줘"
3. 수정 및 검증:
"2번 원인이 맞는 것 같아. 해당 부분을 수정하고
모든 관련 테스트가 통과하는지 확인해줘"
4. 회귀 방지:
"이런 버그가 다시 발생하지 않도록
추가 테스트 케이스와 타입 가드를 만들어줘"
성능 최적화
최적화 프로세스
측정:
"@Web https://pagespeed.web.dev 결과를 분석하고
주요 성능 병목 지점을 찾아줘"
분석:
"React DevTools Profiler 데이터를 보고
리렌더링이 많이 발생하는 컴포넌트를 찾아줘"
최적화:
"다음 최적화 기법들을 적용해줘:
- React.memo로 불필요한 리렌더링 방지
- useMemo/useCallback으로 연산 최적화
- 이미지 lazy loading 구현
- 번들 사이즈 최적화"
핵심 팁
✅ Do's
- 작은 단위로 작업 분할: 한 번에 하나의 기능만 요청
- 명확한 컨텍스트 제공: @ 심볼로 정확한 파일/폴더 지정
- 테스트 우선 접근: 구현 전 테스트 작성 요청
- 버전 관리 철저: 모든 변경사항 커밋
- 모드 적절히 활용: 분석은 Ask, 구현은 Agent
❌ Don'ts
- 너무 긴 대화 지속: 한 세션에 너무 많은 작업 포함
- 컨텍스트 없이 요청: 막연한 "코드 개선해줘" 같은 요청
- Privacy Mode 미사용: 민감한 코드 작업 시 보안 설정 무시
- 백업 없이 대규모 변경: Git 커밋 없이 큰 리팩토링
- 단일 모델만 고집: 작업에 맞는 AI 모델 선택 무시
Cursor는 단순한 코드 자동완성 도구가 아닌, AI와 협업하는 새로운 개발 패러다임입니다. 체계적으로 활용하면, 개발 생산성을 획기적으로 향상시킬 수 있습니다. 핵심은 AI를 도구로 활용하되, 개발자의 판단과 검증을 거치는 것입니다. AI가 제안한 코드를 무비판적으로 수용하지 말고, 항상 코드 리뷰하듯 검토하고 개선하는 자세가 필요합니다.
728x90
그리드형(광고전용)
댓글