900===생활/트렌드
🚀 Cursor IDE 200% 활용법: AI가 내 코드를 대신 짜준다고?
블로글러
2025. 6. 17. 05:31
╔═══════════════════════╗
║ 🤖 CURSOR IDE ║
║ ┌─────────────┐ ║
║ │ AI + Code │ ║
║ │ = 🚀 │ ║
║ └─────────────┘ ║
║ [Tab] → Complete ║
╚═══════════════════════╝
오늘 팀원이 "너 아직도 Copilot 쓰니?"라고 물어봤습니다.
Cursor IDE로 갈아탄 지 일주일, 개발 속도가 2배는 빨라진 것 같아요.
VSCode 쓰던 분들이 이거 한 번 써보면 못 돌아갑니다. 진짜로요.
⚡ TL;DR
Cursor = VSCode + ChatGPT가 만났다
Tab 한 번에 함수 전체 완성, Cmd+K로 코드 리팩토링 자동화
목차
1. 배경
VSCode + GitHub Copilot 조합으로 만족하고 있었는데, Cursor를 써보니 차원이 달랐습니다.
기존 문제점
- Copilot은 한 줄씩 제안 → 맥락 파악 부족
- ChatGPT 웹에서 코드 복붙 → 컨텍스트 스위칭 지옥
- 리팩토링할 때 일일이 수정 → 시간 낭비
Cursor가 다른 이유
| 기능 | VSCode + Copilot | Cursor |
|---|---|---|
| AI 모델 | GitHub Copilot | GPT-4, Claude 3 선택 가능 |
| 코드 생성 | 한 줄씩 | 전체 파일/함수 단위 |
| 컨텍스트 인식 | 현재 파일만 | 프로젝트 전체 파악 |
| 대화형 코딩 | ❌ | ✅ (채팅창 내장) |
2. 핵심 개념
Cursor IDE = AI가 내장된 코드 에디터
VSCode 포크 버전으로, AI와 대화하며 코딩하는 새로운 개발 경험
주요 기능 3가지
1) Tab Autocomplete
// 주석만 쓰면 함수 전체를 생성
// JWT 토큰을 검증하고 유저 정보를 반환하는 미들웨어
[Tab 누르면...]
const verifyToken = async (req, res, next) => {
try {
const token = req.headers.authorization?.split(' ')[1];
if (!token) {
return res.status(401).json({ error: '토큰이 없습니다' });
}
const decoded = jwt.verify(token, process.env.JWT_SECRET);
req.user = decoded;
next();
} catch (error) {
return res.status(403).json({ error: '유효하지 않은 토큰' });
}
};
2) Cmd+K (인라인 편집)
- 코드 선택 → Cmd+K → "이 코드를 TypeScript로 변환해줘"
3) Cmd+L (AI 채팅)
- 프로젝트 전체 컨텍스트를 이해하고 답변
- "@파일명"으로 특정 파일 참조 가능
3. 실습
① 설치 & 초기 설정
# 1. cursor.com에서 다운로드
# 2. VSCode 설정 자동 임포트 (Extensions, Settings 모두)
# 3. API 키 설정 (무료 사용 가능)② 실전 활용 예제
시나리오: React 컴포넌트를 Next.js 14 App Router로 마이그레이션
// 기존 React 컴포넌트 (pages/users.jsx)
import { useState, useEffect } from 'react';
export default function Users() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('/api/users')
.then(res => res.json())
.then(data => setUsers(data));
}, []);
return (
<div>
{users.map(user => (
<div key={user.id}>{user.name}</div>
))}
</div>
);
}
Cmd+K 활용법:
- 전체 코드 선택
- Cmd+K 입력: "Next.js 14 app router의 서버 컴포넌트로 변환해줘"
// app/users/page.jsx (Cursor가 생성한 코드)
// 서버 컴포넌트로 변환 - 클라이언트 사이드 상태 관리 불필요
async function getUsers() {
const res = await fetch('http://localhost:3000/api/users', {
cache: 'no-store' // 실시간 데이터 페칭
});
if (!res.ok) {
throw new Error('Failed to fetch users');
}
return res.json();
}
export default async function UsersPage() {
const users = await getUsers();
return (
<div className="p-4">
<h1 className="text-2xl font-bold mb-4">사용자 목록</h1>
<div className="space-y-2">
{users.map((user) => (
<div key={user.id} className="p-2 border rounded">
{user.name}
</div>
))}
</div>
</div>
);
}③ 고급 팁: AI 채팅 활용
Cmd+L로 프로젝트 전체 리팩토링:
💬 You: @package.json @tsconfig.json
현재 프로젝트를 보고 성능 최적화를 위한 제안을 해줘
🤖 Cursor: 프로젝트를 분석한 결과, 다음 최적화를 제안합니다:
1. 번들 사이즈 최적화
- tree shaking을 위해 lodash → lodash-es 변경
- moment.js → date-fns 마이그레이션 (번들 80% 감소)
2. Next.js 최적화
- next.config.js에 다음 설정 추가:4. 모범 사례
효과적인 프롬프트 작성법
| 패턴 | 좋은 예시 | 피해야 할 예시 |
|---|---|---|
| 구체적 요구사항 | "이 함수에 에러 핸들링과 로딩 상태를 추가해줘" | "코드 개선해줘" |
| 컨텍스트 제공 | "@types/user.ts 타입을 참고해서 validation 추가" | "타입 체크 넣어줘" |
| 스타일 가이드 | "Airbnb 스타일 가이드에 맞춰 리팩토링" | "깔끔하게 정리" |
단축키 마스터하기
🎯 필수 단축키 TOP 5
├── Tab : AI 자동완성
├── Cmd+K : 선택 영역 AI 편집
├── Cmd+L : AI 채팅창 열기
├── Cmd+Shift+L : 터미널에서 AI 질문
└── Ctrl+I : 인라인 Diff 보기.cursorrules 파일 활용
프로젝트 루트에 .cursorrules 파일을 만들어 AI 동작 커스터마이징:
# 프로젝트 코딩 규칙
1. 모든 함수에 JSDoc 주석 필수
2. 변수명은 camelCase, 상수는 UPPER_SNAKE_CASE
3. 에러 처리는 try-catch 사용
4. 한국어 주석 작성
5. console.log 대신 디버깅용 logger 사용5. 마치며
Cursor IDE를 일주일 써본 후기:
- ✨ 반복 작업 90% 감소 (특히 테스트 코드 작성)
- 🚀 새로운 라이브러리 학습 곡선이 완만해짐
- 💡 AI가 제안하는 더 나은 패턴을 배울 수 있음
프로 팁: 처음엔 무료 버전으로 시작하고, 프로젝트에 본격 도입할 때 Pro 버전($20/월) 고려하세요.
혹시 이미 Cursor 쓰고 계신 분들은 본인만의 꿀팁을 댓글로 공유해주세요!
참고자료
728x90
반응형