.cursorrules 파일을 프로젝트의 루트 디렉토리에 넣고 쓰면 된다!

다른 사람들이 만들어 놓은 걸 보려면 여기를 참고하자. GitHub - PatrickJS/awesome-cursorrules: 📄 A curated list of awesome .cursorrules files

커서 규칙 사용 방법

커서(Curer)는 개발자들이 AI를 활용하여 코드를 작성하고 수정하는 데 도움을 주는 강력한 도구로, 특정 지침을 설정할 수 있는 "커서 규칙(Cursor Rules)" 기능을 제공합니다. 이 기능은 개발 환경에 맞게 AI의 행동을 커스터마이징하여 더욱 개인화된 코딩 경험을 가능하게 합니다.

커서 규칙이란 무엇인가?

커서 규칙은 커서 AI의 행동을 안내하는 사용자 지정 지침입니다. 이 규칙을 통해 코드를 해석하고, 제안하며, 질의에 응답하는 AI의 동작을 세부적으로 조정할 수 있습니다. 커서 규칙에는 두 가지 주요 유형이 있습니다:

1. 글로벌 규칙 (Global Rules): 모든 프로젝트에 적용되는 규칙으로, 커서 설정의 '일반 > AI 규칙'에서 설정할 수 있습니다.

2. 프로젝트별 규칙 (Project-Specific Rules): 특정 프로젝트에만 적용되는 규칙으로, 프로젝트 루트 디렉토리에 .cursorrules 파일을 생성하여 설정할 수 있습니다.

커서 규칙의 중요성

프로젝트 맥락 이해

AI에게 프로젝트 구조, 사용 기술, 특정 요청사항을 제공하여 프로젝트 맥락을 더 잘 이해하도록 할 수 있습니다.

적응적 행동

AI의 응답을 성능에 맞추어 조정함으로써 시간에 따라 AI의 행동을 세부 조정할 수 있습니다.

오류 수정

오해를 명확히 하거나 일반적인 실수를 바로잡게 하여 AI가 더 정확한 제안과 코드 생성을 할 수 있도록 합니다.

커서 규칙 설정 방법

글로벌 규칙 설정

1. 커서 설정을 엽니다.

2. '일반' > 'AI 규칙'으로 이동합니다.

3. 제공된 텍스트 영역에 사용자 지침을 입력합니다.

4. "저장"을 클릭하여 글로벌 규칙을 적용합니다.

예제 - 글로벌 규칙

1. 버그 수정:
   - 문제를 철저히 분석한 후 수정 제안을 합니다.
   - 정밀하고 타겟이 된 해결책을 제공합니다.
   - 버그의 근본 원인을 설명합니다.

2. 간단하게 유지:
   - 가독성과 유지보수를 우선시합니다.
   - 해결책을 과도하게 설계하지 않습니다.
   - 가능한 경우 표준 라이브러리 및 패턴을 사용합니다.

3. 코드 변경:
   - 변경 사항을 제안하기 전에 명확한 계획을 세웁니다.
   - 한 파일에 모든 수정을 적용합니다.
   - 관련이 없는 파일은 수정하지 않습니다.

프로젝트별 규칙 설정

1. 프로젝트 루트 디렉토리에 .cursorrules 파일을 생성합니다.

2. 이 파일에 사용자 지정 지침을 추가합니다.

예제 - 프로젝트별 규칙

당신은 TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Tailwind 전문가입니다.

코드 스타일 및 구조
- 정확한 예시를 포함한 간결하고 기술적인 TypeScript 코드를 작성하십시오.
- 함수형 및 선언형 프로그래밍 패턴 사용; 클래스를 피하십시오.
- 코드 중복을 피하고 반복 및 모듈화를 선호합니다.
- 보조 동사를 포함한 설명적인 변수 이름 사용(예: isLoading, hasError).
- 파일 구조: 내보낸 컴포넌트, 하위 컴포넌트, 헬퍼, 정적 콘텐츠, 타입.

네이밍 컨벤션
- 디렉토리 이름은 소문자와 대시를 사용합니다(예: components/auth-wizard).

TypeScript 사용
- 모든 코드에 TypeScript를 사용하고, 인터페이스를 타입보다 선호합니다.
- 열거형을 피하고 대신 맵을 사용합니다.
- TypeScript 인터페이스를 사용하는 함수형 컴포넌트 사용.

구문 및 서식
- 순수 함수에 "function" 키워드 사용.
- 조건문에서 불필요한 중괄호 피하기; 간단한 문에는 간결한 구문 사용.
- 선언형 JSX 사용.

UI 및 스타일링
- 컴포넌트 및 스타일링에 Shadcn UI, Radix, Tailwind 사용.
- Tailwind CSS로 반응형 디자인 구현; 모바일 우선 접근법 사용.

성능 최적화
- 최소한의 'use client', 'useEffect', 'setState' 사용; React 서버 컴포넌트(RSC)를 선호합니다.
- 클라이언트 컴포넌트를 Suspense로 감싸고 대체 콘텐츠를 설정합니다.
- 비핵심 컴포넌트는 동적으로 로드합니다.
- 이미지를 최적화: WebP 형식 사용, 크기 데이터 포함, 지연 로딩 구현.

커서 규칙 작성 모범 사례

• 일관성 유지: 규칙 간에 상충되는 부분이 없도록 합니다.

• 다양한 측면 다루기: 코딩 스타일, 문서화, 오류 처리, 성능 고려사항을 포함합니다.

• 프로젝트별 맥락 포함: 주로 사용하는 프로그래밍 언어, 프레임워크, 독특한 아키텍처적 결정을 언급합니다.

• 유연성과 엄격성의 균형: AI가 혁신적인 솔루션을 제안할 수 있는 여지를 두되 핵심 원칙을 준수하도록 합니다.

• 예제 사용: 가능하면 선호하는 방법을 설명하는 간단한 코드 조각을 제공합니다.

결론

커서 규칙을 사용하는 것은 AI를 활용한 코딩 생산성과 코드 품질을 크게 향상시킬 수 있는 강력한 방법입니다. 간단한 규칙부터 시작하여 필요에 따라 규칙을 정교화시켜 커서의 기능을 최대한 활용해 보십시오. 더욱 나은 코딩 경험을 위해 커서 규칙을 작성하고 주기적으로 업데이트하는 것을 추천합니다.

행복한 코딩 되세요!