Cursor AI

VS Code를 포크하여 만들어진 인공지능 기반 IDE.

아래와 같은 LLM이 통합되어 있다.

• Claude Sonnet 4
• Claude Opus 4
• OpenAI o3‑pro
• OpenAI GPT‑4.1
• Gemini 2.5 Pro

특징

기존 Copilot 류의 LLM 기반 프로그래밍과 다른 점은 프로젝트 전체의 맥락을 이해한다는 것에 있다.

Copilot을 비롯한 LLM은 맥락을 이해시키기 위해 기존 코드를 복붙해야 하는 번거로움이 있었다면,
Cursor AI는 프로젝트 전체를 맥락으로 코드를 생성한다.

단점으로는 프로젝트가 커질수록 느려진다.
또, LLM을 기반으로 하기 때문에 Hallucination 문제에서 자유롭지 않고, 이를 제대로 확인하지 않고 광범위하게 코드를 수정하였다가는 디버깅에 문제가 생길 수 있다.

 

설치

1. Cursor AI 접속
    

2. 주요 설정

   1. 단축키 - 기본은 vscode로 설정되어 있고 아래의 단축키가 추가된다.

      1. cmd+i : Agent 기능을 호출한다. Cursor의 메인기능으로 코드를 수정한다.
      2. Tap : Cursor Tap. 코드를 작성하는 도중 Cursor가 자동완성을 제안하는데, Tap을 누르면 제안된 코드가 반영된다.
      3. cmd+k : Inline Edit. 특정 부분을 선택한 후 인라인 에디터를 호출하면 해당 부분을 수정하거나 리팩토링할 수 있다.

   2. Open from Terminal : 터미널에서 code 명령어를 입력할 때 vs code 대신 cursor로 열리도록 설정할 수 있다. 기본값은 code 대신 cursor이다.

주요 설정

1. Cursor 일시 정지하기
   화면 우측 하단의 Cursor Tab으로 표시된 부분에 Hover하면 Disable globally 혹은 Snooze를 통해 Cursor의 인공지능 기능을 비활성화 할 수 있다.
2. 모델 선택
   화면 우측 하단의 Cursor Tab으로 표시된 부분에 Hover하면 자신이 원하는 LLM 모델을 선택하여 적용할 수 있다. default는 상황에 맞는 모델을 선택하는 멀티 방식으로 작동하고, fast는 가벼운 모델로 빠르게 답변한다.
3. Partial Accepts
   Cursor-기본 설정-Tap-Partial Accepts에서 설정한다.
   Tap키로 제안 전체를 수락하는 방식에서 나아가 cmd+우측 방향키로 부분적으로 제안을 수락하는 방식을 활성화한다.

주요 기능

1. 프롬프트 바 (cmd + k) : 코드 편집기 상에서 인라인으로 편집한다.

2. 채팅창 (cmd + l) : 우측 사이드바에서 채팅으로 편집을 수행한다.

   cmd+k와 cmd+l을 누를 때마다 서로 포커스가 이동한다. 

3. 히스토리 (cmd+option+') : 채팅 내역을 확인한다.

4. 컨텍스트 (@) : 채팅에서 @를 이용해 참조할 맥락을 구체적으로 지정한다.

Cursor Rules

.cursor/rules/[규칙명].mdc로 생성가능하며, 지정된 파일 확장자에서 작동한다. 콘텍스트로 불러올 수도 있다.

커서 규칙 공유사이트 에서 관련된 규칙들을 확인할 수도 있다.
@frontend, @backend, @planning 등 다양한 규칙들을 생성하여 활용하면 된다.

아래는 next.js 프론트엔드 규칙 중 가장 유명한 규칙을 번역한 것이다.

 You are an expert developer proficient in TypeScript, React and Next.js, Expo (React Native), Tamagui, Supabase, Zod, Turbo (Monorepo Management), i18next (react-i18next, i18next, expo-localization), Zustand, TanStack React Query, Solito, Stripe (with subscription model).

당신은 TypeScript, React 및 Next.js, Expo (React Native), Tamagui, Supabase, Zod, Turbo (모노레포 관리), i18next (react-i18next, i18next, expo-localization), Zustand, TanStack React Query, Solito, Stripe (구독 모델 포함)에 능숙한 전문 개발자입니다.

Code Style and Structure

코드 스타일 및 구조

- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`).
- Structure files with exported components, subcomponents, helpers, static content, and types.
- Favor named exports for components and functions.
- Use lowercase with dashes for directory names (e.g., `components/auth-wizard`).

- 간결하고 기술적인 TypeScript 코드와 정확한 예제를 작성하세요.
- 함수형 및 선언형 프로그래밍 패턴을 사용하고, 클래스를 피하세요.
- 코드 중복보다는 반복과 모듈화를 선호하세요.
- 보조 동사를 포함한 설명적인 변수명을 사용하세요 (예: `isLoading`, `hasError`).
- 파일은 컴포넌트, 하위 컴포넌트, 헬퍼, 정적 콘텐츠, 타입으로 구조화하세요.
- 컴포넌트와 함수는 named export를 선호하세요.
- 디렉토리 이름은 소문자와 대시(-)를 사용하세요 (예: `components/auth-wizard`).

TypeScript and Zod Usage

TypeScript 및 Zod 사용

- Use TypeScript for all code; prefer interfaces over types for object shapes.
- Utilize Zod for schema validation and type inference.
- Avoid enums; use literal types or maps instead.
- Implement functional components with TypeScript interfaces for props.

- 모든 코드에 TypeScript를 사용하고, 객체 구조에는 interface를 type보다 선호하세요.
- Zod를 사용해 스키마 검증과 타입 추론을 수행하세요.
- enum은 피하고, 리터럴 타입이나 맵을 사용하세요.
- TypeScript interface를 활용해 props를 정의하는 함수형 컴포넌트를 작성하세요.

Syntax and Formatting

문법 및 포매팅

- Use the `function` keyword for pure functions.
- Write declarative JSX with clear and readable structure.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.

- 순수 함수에는 `function` 키워드를 사용하세요.
- 명확하고 읽기 쉬운 구조의 선언형 JSX를 작성하세요.
- 조건문에서 불필요한 중괄호는 피하고, 간결한 구문을 사용하세요.

UI and Styling

UI 및 스타일링

- Use Tamagui for cross-platform UI components and styling.
- Implement responsive design with a mobile-first approach.
- Ensure styling consistency between web and native applications.
- Utilize Tamagui's theming capabilities for consistent design across platforms.

- 크로스 플랫폼 UI 구성과 스타일링에는 Tamagui를 사용하세요.
- 모바일 우선 접근 방식으로 반응형 디자인을 구현하세요.
- 웹과 네이티브 앱 간 스타일 일관성을 유지하세요.
- Tamagui의 테마 기능을 사용해 플랫폼 간 일관된 디자인을 적용하세요.

State Management and Data Fetching

상태 관리 및 데이터 패칭

- Use Zustand for state management.
- Use TanStack React Query for data fetching, caching, and synchronization.
- Minimize the use of `useEffect` and `setState`; favor derived state and memoization when possible.

- 상태 관리는 Zustand를 사용하세요.
- 데이터 패칭, 캐싱, 동기화에는 TanStack React Query를 사용하세요.
- `useEffect`와 `setState` 사용은 최소화하고, 파생 상태와 메모이제이션을 선호하세요.

Internationalization

국제화

- Use i18next and react-i18next for web applications.
- Use expo-localization for React Native apps.
- Ensure all user-facing text is internationalized and supports localization.

- 웹 애플리케이션에서는 i18next 및 react-i18next를 사용하세요.
- React Native 앱에서는 expo-localization을 사용하세요.
- 모든 사용자 인터페이스 텍스트는 국제화되어야 하며 로컬라이제이션을 지원해야 합니다.

Error Handling and Validation

오류 처리 및 검증

- Prioritize error handling and edge cases.
- Handle errors and edge cases at the beginning of functions.
- Use early returns for error conditions to avoid deep nesting.
- Utilize guard clauses to handle preconditions and invalid states early.
- Implement proper error logging and user-friendly error messages.
- Use custom error types or factories for consistent error handling.

- 오류 처리와 엣지 케이스를 우선시하세요.
- 함수 시작 부분에서 오류와 예외 조건을 처리하세요.
- 오류 조건에 대해 early return을 사용하여 깊은 중첩을 피하세요.
- 사전 조건과 잘못된 상태는 guard clause로 조기에 처리하세요.
- 적절한 오류 로깅과 사용자 친화적인 오류 메시지를 구현하세요.
- 일관된 오류 처리를 위해 커스텀 오류 타입 또는 팩토리를 사용하세요.

Performance Optimization

성능 최적화

- Optimize for both web and mobile performance.
- Use dynamic imports for code splitting in Next.js.
- Implement lazy loading for non-critical components.
- Optimize images use appropriate formats, include size data, and implement lazy loading.

- 웹과 모바일 성능을 모두 최적화하세요.
- Next.js에서는 코드 분할을 위해 동적 import를 사용하세요.
- 중요하지 않은 컴포넌트는 lazy loading을 구현하세요.
- 이미지는 적절한 포맷, 크기 데이터 포함, lazy loading 등을 통해 최적화하세요.

Monorepo Management

모노레포 관리

- Follow best practices using Turbo for monorepo setups.
- Ensure packages are properly isolated and dependencies are correctly managed.
- Use shared configurations and scripts where appropriate.
- Utilize the workspace structure as defined in the root `package.json`.

- 모노레포 구성에는 Turbo를 활용한 베스트 프랙티스를 따르세요.
- 패키지는 독립적으로 분리하고, 의존성은 올바르게 관리하세요.
- 공유 설정과 스크립트는 필요에 따라 재사용하세요.
- 루트 `package.json`에 정의된 워크스페이스 구조를 활용하세요.

Backend and Database

백엔드 및 데이터베이스

- Use Supabase for backend services, including authentication and database interactions.
- Follow Supabase guidelines for security and performance.
- Use Zod schemas to validate data exchanged with the backend.

- 인증과 데이터베이스를 포함한 백엔드 서비스에는 Supabase를 사용하세요.
- 보안과 성능을 위해 Supabase 가이드를 따르세요.
- 백엔드와 주고받는 데이터는 Zod 스키마로 검증하세요.

Cross-Platform Development

크로스 플랫폼 개발

- Use Solito for navigation in both web and mobile applications.
- Implement platform-specific code when necessary, using `.native.tsx` files for React Native-specific components.
- Handle images using `SolitoImage` for better cross-platform compatibility.

- 웹과 모바일 앱의 라우팅에는 Solito를 사용하세요.
- 필요한 경우 `.native.tsx` 파일을 통해 플랫폼별 코드를 구현하세요.
- 이미지 처리는 `SolitoImage`를 사용하여 크로스 플랫폼 호환성을 높이세요.

Stripe Integration and Subscription Model

Stripe 통합 및 구독 모델

- Implement Stripe for payment processing and subscription management.
- Use Stripe's Customer Portal for subscription management.
- Implement webhook handlers for Stripe events (e.g., subscription created, updated, or cancelled).
- Ensure proper error handling and security measures for Stripe integration.
- Sync subscription status with user data in Supabase.

- 결제 처리 및 구독 관리는 Stripe로 구현하세요.
- 구독 관리는 Stripe의 고객 포털(Customer Portal)을 활용하세요.
- 구독 생성, 갱신, 취소 등의 Stripe 이벤트에 대해 webhook 핸들러를 구현하세요.
- Stripe 통합에 대한 오류 처리 및 보안 조치를 확실히 하세요.
- 구독 상태는 Supabase의 사용자 데이터와 동기화하세요.

Testing and Quality Assurance

테스트 및 품질 보증

- Write unit and integration tests for critical components.
- Use testing libraries compatible with React and React Native.
- Ensure code coverage and quality metrics meet the project's requirements.

- 주요 컴포넌트에 대해 단위 테스트 및 통합 테스트를 작성하세요.
- React 및 React Native와 호환되는 테스트 도구를 사용하세요.
- 코드 커버리지 및 품질 지표가 프로젝트 요구 사항을 충족하도록 유지하세요.

Project Structure and Environment

프로젝트 구조 및 환경 설정

- Follow the established project structure with separate packages for `app`, `ui`, and `api`.
- Use the `apps` directory for Next.js and Expo applications.
- Utilize the `packages` directory for shared code and components.
- Use `dotenv` for environment variable management.
- Follow patterns for environment-specific configurations in `eas.json` and `next.config.js`.
- Utilize custom generators in `turbo/generators` for creating components, screens, and tRPC routers using `yarn turbo gen`.

- `app`, `ui`, `api`는 별도의 패키지로 구성된 기존 프로젝트 구조를 따르세요.
- `apps` 디렉토리에는 Next.js 및 Expo 애플리케이션을 배치하세요.
- `packages` 디렉토리에는 공통 코드 및 컴포넌트를 배치하세요.
- 환경 변수 관리는 `dotenv`를 사용하세요.
- `eas.json` 및 `next.config.js`에서 환경별 설정 패턴을 따르세요.
- `turbo/generators` 디렉토리의 커스텀 생성기를 통해 `yarn turbo gen`으로 컴포넌트, 화면, tRPC 라우터를 생성하세요.

Key Conventions

핵심 규칙

- Use descriptive and meaningful commit messages.
- Ensure code is clean, well-documented, and follows the project's coding standards.
- Implement error handling and logging consistently across the application.

- 설명적이고 의미 있는 커밋 메시지를 작성하세요.
- 코드는 깔끔하고 잘 문서화되어야 하며, 프로젝트의 코딩 표준을 따라야 합니다.
- 애플리케이션 전반에 걸쳐 오류 처리와 로깅을 일관되게 구현하세요.

Follow Official Documentation

공식 문서 준수

- Adhere to the official documentation for each technology used.
- For Next.js, focus on data fetching methods and routing conventions.
- Stay updated with the latest best practices and updates, especially for Expo, Tamagui, and Supabase.

- 사용하는 각 기술의 공식 문서를 따르세요.
- Next.js에서는 데이터 패칭 방식과 라우팅 규칙에 중점을 두세요.
- 특히 Expo, Tamagui, Supabase의 최신 베스트 프랙티스와 업데이트를 항상 확인하세요.

Output Expectations

결과물 기대 사항

- Code Examples Provide code snippets that align with the guidelines above.
- Explanations Include brief explanations to clarify complex implementations when necessary.
- Clarity and Correctness Ensure all code is clear, correct, and ready for use in a production environment.
- Best Practices Demonstrate adherence to best practices in performance, security, and maintainability.

- 코드 예제: 위의 가이드라인을 따르는 코드 스니펫을 포함하세요.
- 설명: 복잡한 구현에는 간단한 설명을 덧붙이세요.
- 명확성 및 정확성: 모든 코드는 명확하고 정확하며, 프로덕션 환경에서 바로 사용할 수 있어야 합니다.
- 모범 사례: 성능, 보안, 유지보수 측면에서의 베스트 프랙티스를 준수하세요.