.cursor/rules 모범 사례

.cursor/rules는 팀이 일관성 있는 코딩 표준을 유지하고 협업을 개선하는 데 도움이 되는 강력한 기능입니다. 이 가이드는 규칙을 효과적으로 설정하고 관리하기 위한 모범 사례를 다룹니다.

.cursor/rules 이해하기

.cursor/rules는 다음과 같은 구성 시스템입니다:

프로젝트 전반의 코딩 표준 정의
코드 구성 자동화
일관성 있는 패턴 적용
팀 협업 개선

기본 설정

규칙 파일 만들기

프로젝트 루트에 .cursor/rules 파일을 만듭니다:

mkdir .cursor
touch .cursor/rules

기본 구조

일반적인 규칙 파일 구조:

version: 1.0
rules:
  - name: "컴포넌트 구조"
    pattern: "src/components/**/*.{ts,tsx}"
    template: |
      import React from 'react'
      
      interface ${ComponentName}Props {
        // props
      }
      
      export const ${ComponentName}: React.FC<${ComponentName}Props> = () => {
        return (
          <div>
            {/* 컴포넌트 내용 */}
          </div>
        )
      }

  - name: "서비스계층"
    pattern: "src/services/**/*.ts"
    template: |
      import { ApiClient } from '../utils/apiClient'
      
      export class ${ServiceName}Service {
        private client: ApiClient
        
        constructor() {
          this.client = new ApiClient()
        }
        
        // 서비스 메서드
      }

모범 사례

1. 일관성 있는 명명 규칙

규칙에 명확하고 설명적인 이름 사용:

rules:
  - name: "React 컴포넌트"
    description: "표준 React 컴포넌트 구조"
    pattern: "src/components/**/*.tsx"

  - name: "API 서비스"
    description: "REST API 서비스용 템플릿"
    pattern: "src/services/**/*.ts"

2. 모듈별 구성

3. 템플릿변경

설명적인 템플릿변경 사용:

rules:
  - name: "컴포넌트 템플릿"
    pattern: "src/components/**/*.tsx"
    template: |
      interface ${ComponentName}Props {
        ${PropName}: ${PropType}
      }
      
      export const ${ComponentName} = ({
        ${PropName}
      }: ${ComponentName}Props) => {
        return (
          <div>
            {${PropName}}
          </div>
        )
      }

4. 문서포함

규칙에 명확한 문서 포함:

rules:
  - name: "API 서비스"
    description: |
      API 서비스 클래스용 템플릿
      표준 CRUD 작업 및 오류 처리 포함.
    pattern: "src/services/**/*.ts"
    template: |
      /**
       * ${ServiceName} 서비스
       * ${ServiceDescription} 처리
       */
      export class ${ServiceName}Service {
        // 구현
      }

5. 오류 처리

오류 처리 패턴 포함:

rules:
  - name: "서비스 오류 처리"
    pattern: "src/services/**/*.ts"
    template: |
      try {
        // 서비스 로직
      } catch (error) {
        if (error instanceof ApiError) {
          // API 오류 처리
        } else {
          // 기타 오류 처리
        }
        throw error
      }

고급 패턴

1. 조건부 템플릿

템플릿에 조건 사용:

rules:
  - name: "Props가 있는 컴포넌트"
    pattern: "src/components/**/*.tsx"
    template: |
      ${HasProps ? `
      interface ${ComponentName}Props {
        // props
      }
      ` : ''}
      
      export const ${ComponentName}${HasProps ? ': React.FC<${ComponentName}Props>' : ''} = () => {
        // 구현
      }

2. 공유 패턴

재사용 가능한 패턴 정의:

patterns:
  typescript-header: |
    /**
     * @file ${FileName}
     * @description ${FileDescription}
     * @created ${Date}
     */

rules:
  - name: "컴포넌트"
    pattern: "src/components/**/*.tsx"
    template: |
      ${patterns.typescript-header}
      // 컴포넌트 구현

최적화 팁

파일 구성
- 관련된 파일 그룹
- 일관성 있는 디렉토리 구조 사용
- 명명 규칙 준수
템플릿 효율성
- 템플릿을 집중적으로 유지
- 중복 코드 방지
- 공통 요소를 공유 패턴 사용
성능 고려사항
- 패턴 복잡도 제한
- 구체적인 파일 패턴 사용
- 너무 광범위한 일치 방지

일반적인 패턴

React 컴포넌트

rules:
  - name: "React 함수형 컴포넌트"
    pattern: "src/components/**/*.tsx"
    template: |
      import React from 'react'
      import styles from './${ComponentName}.module.css'
      
      export interface ${ComponentName}Props {
        // props
      }

결론

.cursor/rules를 효과적으로 사용하면 코드 품질과 팀 생산성을 크게 향상시킬 수 있습니다. 이러한 모범 사례를 따르는 팀은:

일관성 있는 코드 유지
개발 속도 향상
코드 품질 개선
팀 협업 강화

.cursor/rules 이해하기​

기본 설정​

규칙 파일 만들기​

기본 구조​

모범 사례​

1. 일관성 있는 명명 규칙​

2. 모듈별 구성​

3. 템플릿변경​

4. 문서포함​

5. 오류 처리​

고급 패턴​

1. 조건부 템플릿​

2. 공유 패턴​

최적화 팁​

일반적인 패턴​

React 컴포넌트​

결론​