https://www.builder.io/blog/cursor-ai-tips-react-nextjs

오늘날 Cursor와 같은 AI 기반 코드 에디터를 사용하지 않고 있다면, 가능한 한 빠르게 움직이거나 현명하게 작업하고 있지 않은 것입니다.

이 가이드는 Cursor를 사용하여 여러분을 초보자에서 전문가로 만들어 줄 것입니다. 다음 단계를 따르면 코드를 작성하는 효율성과 기술을 급상승시킬 수 있습니다. 특히 React, Next.js, Tailwind CSS와 함께 Cursor AI를 사용하는 이상적인 설정에 중점을 둘 것이지만, 이 단계 중 많은 부분이 모든 기술 스택에 적용됩니다.

Cursor AI 설정 미세 조정하기

이 체크리스트를 따르면 더 이상 읽지 않고도 거의 완벽한 Cursor AI 설정을 얻을 수 있습니다:

설정 + 규칙

오른쪽 상단 모서리에 있는 톱니바퀴 아이콘을 눌러 Cursor 설정을 엽니다. 그런 다음 다음을 활성화합니다:

Features Tab 열기

다음 설정을 확인합니다:

• Cursor Tab

  • Cursor Tab 활성화

    • 이유: 핵심 기능입니다. 탭 완성 기능을 터보차지해 줍니다.

  • Suggestions in Comments 활성화

    • 이유: Cursor Tab이 주석 및 문서를 작성할 수 있도록 합니다.

  • Auto Import 활성화

    • 이유: 필요한 import 문을 자동으로 추가합니다. 시간을 크게 절약해 줍니다.

• Chat

  • 기본 새 채팅 모드를 `Agent`로 설정

    • 이유: 복잡한 작업 및 코드 생성에 이상적입니다.

  • Auto-refresh chats 활성화

    • 이유: 컨텍스트가 변경됨에 따라 채팅 뷰를 자동으로 업데이트합니다.

  • Auto-scroll to bottom 활성화

    • 이유: 채팅 창에서 항상 최신 AI 메시지를 볼 수 있도록 합니다.

  • Auto-apply to files outside context in edit mode 활성화

    • 이유: AI 편집이 `@`를 통해 명시적으로 추가되지 않은 관련 파일에 영향을 미칠 수 있도록 합니다. 리팩토링에 매우 유용합니다.

  • auto-run mode 활성화

    • 이유: AI가 명시적인 확인 없이 특정 작업(도구 호출 등)을 실행할 수 있도록 합니다. 엄청난 효율성 향상을 가져옵니다.

  • auto-run 내에서 `Delete file protection`, `MCP tools protection`, `Dot files protection` 및 `Outside workspace protection` 활성화

    • 이유: 자동 실행 작업 중 우발적인 파괴적인 작업을 방지하기 위한 합리적인 안전 장치를 추가합니다.

  • Large context 활성화

    • 이유: AI가 더 많은 코드와 정보를 고려할 수 있도록 하여 복잡한 작업에 대한 이해도를 높입니다.

  • Iterate on lints 활성화

    • 이유: 생성/편집된 코드에서 린터 오류에 대한 AI 자동 수정 시도를 가능하게 합니다.

  • Web Search Tool 활성화

    • 이유: AI가 최신 정보나 문서를 웹에서 검색할 수 있는 기능을 부여합니다.

• Codebase Indexing

  • Index new folders by default 활성화

    • 이유: 프로젝트에 새로 추가된 코드가 AI의 컨텍스트에 자동으로 포함되도록 합니다.

  • Git graph files relationships를 `default`로 설정

    • 이유: Git 기록을 사용하여 AI가 파일 관계를 이해하고 더 관련성 높은 컨텍스트를 제공하도록 돕습니다.

• Docs

  • `+ Add new doc` 클릭 후 공식 React 문서 링크 추가

    • 이유: AI가 공식 React 문서를 즉시 컨텍스트로 사용할 수 있도록 합니다.

  • `+ Add new doc` 클릭 후 공식 Next.js 문서 링크 추가

    • 이유: AI가 공식 Next.js 문서를 즉시 컨텍스트로 사용할 수 있도록 합니다.

  • `+ Add new doc` 클릭 후 공식 Tailwind CSS 문서 링크 추가

    • 이유: AI가 공식 Tailwind CSS 문서를 즉시 컨텍스트로 사용할 수 있도록 합니다.

• Editor

  • Show chat/edit tooltip 활성화

    • 이유: AI 채팅 또는 편집 작업이 가능할 때 시각적 힌트를 제공합니다.

  • Auto select for Ctrl/Cmd + K input 활성화

    • 이유: Cmd+K 바에서 프롬프트 텍스트를 자동으로 선택하여 수정하기 쉽게 만듭니다.

  • Use themed diff backgrounds 활성화

    • 이유: AI 생성 변경 사항의 가독성을 높입니다.

• Terminal

  • Terminal hint 활성화

    • 이유: 터미널에 직접 AI 기반 제안을 제공합니다.

  • Show terminal hover hint 활성화

    • 이유: 관련 터미널 콘텐츠 위에 마우스를 올릴 때 힌트를 표시합니다.

• Models Tab 열기

  • 이유: Cursor Pro 계정이 아니면서 자체 AI 모델(Gemini, Claude 3.5 Sonnet 등)에 액세스할 수 있는 경우 여기에 API 키를 추가합니다.

    • 참고: 자체 모델을 Cursor에 가져오는 것은 빠르게 비용이 많이 들 수 있습니다. Cursor 파워 유저가 되려면 Cursor Pro를 지불하는 것이 훨씬 저렴한 경우가 많습니다.

• Rules Tab 열기

  • + Add new rule 클릭

    • 이유: AI를 위한 사용자 지정 지침 세트를 만드는 과정을 시작합니다.

  • React, Next.js, Tailwind CSS용 포괄적인 규칙 복사하여 붙여넣기

    • 이유: React, Next.js, Tailwind 모범 사례와 일치하는 코드를 생성하기 위한 특정하고 상세한 지침을 AI에 제공합니다.

Notepads

Cursor 설정을 닫습니다. 이제 Cursor 사이드바의 "Notepads" 섹션에서 `+` 버튼을 눌러 새 메모장을 추가합니다(또는 명령 팔레트를 사용합니다).

• 메모장을 만들고 React 컴포넌트 개발 표준을 붙여넣기

  • 이유: 쉬운 AI 참조를 위해 React 표준을 저장합니다.

• 두 번째 메모장을 만들고 Next.js 개발 표준을 붙여넣기

  • 이유: 쉬운 AI 참조를 위해 Next.js 표준(App Router 패턴 등)을 저장합니다.

• 세 번째 메모장을 만들고 Tailwind CSS 사용 지침을 붙여넣기

  • 이유: 쉬운 AI 참조를 위해 Tailwind CSS 지침을 저장합니다.

ESLint 추가

• ESLint가 설치 및 활성화되어 있는지 확인

  • 이유: ESLint는 코드 품질 문제를 식별합니다; `Iterate on lints`를 활성화하면 Cursor가 자동으로 이 문제를 수정하여 코드 품질을 향상시킬 수 있습니다.

Visual Editor CLI 사용

• Cursor + Builder.io의 Visual Editor CLI를 사용하여 전문적인 UI 디자인 추가

  • 이유: Figma 디자인에서 Cursor를 벗어나지 않고 세련된 UI로 전환합니다. 디자인과 개발 사이의 누락된 연결 고리를 제공합니다.

Cursor AI의 설정 및 기능에 집중하기

위 단계를 따랐다면 이미 상당히 견고한 Cursor 설정을 갖추셨을 겁니다. 이제 심층적으로 살펴보겠습니다.

먼저 코드 에디터의 핵심 설정과 기능을 사용하여 워크플로우를 강화하는 방법을 살펴본 다음, 완벽한 Cursor AI 설정을 위한 마지막 단계를 완료할 것입니다. React 및 Next.js용 개발 환경을 완성하고 싶다면 "Cursor의 테스트 기반 코드 생성 루프 설정" 섹션으로 건너뛰세요.

코드 에디터의 Cursor AI 'Tab' 기능

Cursor는 코드에 대한 초강력 자동 완성 기능처럼 작동하는 탭 완성 기능을 제공합니다. 지능적인 코드 제안을 생성하고, 여러 줄 편집을 수행하며, 최근 변경 사항이나 린터 오류까지 고려할 수 있습니다.

이 기능은 Cursor 설정의 Features > Tab Completion에서 활성화할 수 있으며, 주석에 대해 비활성화하는 등의 옵션도 사용자 지정할 수 있습니다. 사용하려면 Tab을 눌러 제안을 수락하고 다음 편집으로 이동하거나, Esc를 눌러 무시하거나, Ctrl/⌘ →를 눌러 한 단어씩 수락합니다.

코드 생성을 위한 Cursor AI 'Chat' 기능

Cursor Chat은 사이드바에 있는 AI 어시스턴트로, 평범하고 자연스러운 언어로 코드베이스에 대해 논의할 준비가 되어 있습니다. 프로젝트에 대한 질문을 하거나, 여러 파일에 걸친 코드 생성을 요청하거나, 전체 코드베이스를 이해하는 데 도움을 받거나, 터미널 명령에 대한 도움을 받을 수도 있습니다.

설정은 많이 필요하지 않습니다; ⌘+L (Mac) 또는 Ctrl+L (Windows/Linux) 바로 가기를 사용하여 액세스할 수 있습니다. 일단 열리면 자연어로 프롬프트를 입력하고, 복잡한 코딩 작업에는 'Agent' 모드를, 쿼리에는 'Ask' 모드를 선택한 다음, Cursor AI가 강력한 코드 생성 기능으로 지원하도록 하면 됩니다. 채팅은 유용한 코드 제안을 제공하고 제공된 컨텍스트를 기반으로 선택된 코드 블록을 스마트하게 재작성할 수 있습니다.

예를 들어, React, Next.js, Tailwind CSS와 함께 작업할 때:

• Agent 모드 예시: Agent에 자연어로 다음과 같이 말할 수 있습니다: "새로운 재사용 가능한 React 컴포넌트 PrimaryButton을 만드세요. children과 표준 버튼 props를 허용해야 합니다. Tailwind 클래스를 사용하여 파란색 배경, 흰색 텍스트, 패딩, 둥근 모서리, 미묘한 호버 효과를 가지도록 스타일링하세요. 이 컴포넌트에 대한 코드를 생성하세요."
  
  

• Ask 모드 예시: 자연어로 다음과 같이 물어볼 수 있습니다: "`app/posts/[id]/page.tsx`의 서버 컴포넌트 내에서 특정 블로그 게시물에 대한 데이터를 검색하는 데이터 가져오기가 어떻게 작동하는지 설명해 주세요. 또한 게시물의 게시 상태에 따라 조건부 Tailwind 클래스를 제목에 적용하는 가장 좋은 방법은 무엇인가요? 관련 코드를 검토해 주세요."

Cursor 규칙

Cursor Rules를 사용하면 AI에게 코딩 표준이나 프로젝트별 지침 설정과 같은 영구적인 지침을 제공하여 반복할 필요가 없게 할 수 있습니다. AI에 대한 "붙임 메모"라고 생각할 수 있으며, 컨텍스트에 따라 자동으로 적용되거나 수동으로 호출할 때 적용되어 코드베이스 이해를 향상시킵니다.

프로젝트 내 .cursor/rules 폴더에 .mdc 파일을 추가하거나 Cursor 설정에서 전역 규칙을 설정하여 프로젝트별 규칙을 만들 수 있습니다. 규칙을 사용하려면 자동으로 적용되도록 구성하거나(예: 항상 또는 특정 파일이 관련될 때) 코드를 생성할 때 @ruleName을 사용하여 명시적으로 호출할 수 있습니다.

저희는 이미 React, Next.js, Tailwind CSS용 포괄적인 규칙에 링크했습니다. 더 많은 것을 찾고 있다면 커뮤니티 구성원들이 최고의 Cursor 규칙을 제출하는 cursor.directory를 확인하세요. 훌륭한 자료입니다.

Cursor AI `@docs` 기능

Cursor의 `@docs` 기능은 사용하는 라이브러리나 프레임워크에 대한 외부 문서를 제공하여 AI의 기능을 향상시킬 수 있도록 합니다. Cursor는 이 문서를 다운로드하고 색인화하여 AI가 질문에 답하거나 코드를 작성할 때 직접 참조할 수 있도록 합니다.

설정은 간단합니다: Settings > Features > Docs로 이동하여 포함하려는 문서의 URL을 추가합니다. 그런 다음 AI와 채팅할 때 프롬프트에 @docs를 언급하기만 하면 AI가 해당 문서를 참조하여 관련 코드에 대한 더 좋고 컨텍스트 인식적인 답변을 제공하도록 지시할 수 있습니다.

이전에 추가한 React, Next.js, Tailwind 문서와 관련된 몇 가지 예시는 다음과 같습니다:

• React 훅 쿼리: "`@docs`를 사용하여 React의 useMemo와 useCallback의 차이점을 설명하고 우리 컴포넌트 라이브러리 내에서 각각의 사용 예시를 제공해 주세요."

• Next.js API 라우트: "Next.js의 `@docs`를 참조하여 슬러그 매개변수를 허용하고 해당 데이터를 가져오는 동적 API 라우트를 만드는 방법을 보여주세요."

• Tailwind 레이아웃: "Tailwind를 사용하여 반응형 3열 그리드 레이아웃을 어떻게 만들 수 있나요? 모범 사례에 대해 `@docs`를 참조해 주세요."

Cursor AI `@web` 기능

Cursor의 `@web` 기능은 AI가 채팅에서 직접 인터넷을 검색하여 실시간 정보를 개발 워크플로우로 가져올 수 있도록 합니다. 이는 새로운 라이브러리 버전을 찾거나 문서에 아직 색인화되지 않은 최근 API 변경 사항을 확인하는 등 절대적으로 최신 정보가 필요할 때 엄청나게 유용합니다.

활성화하려면 Settings > Features > Chat으로 이동하여 Web Search Tool이 켜져 있는지 확인합니다. 사용하려면 채팅에 @web을 입력한 다음 쿼리를 입력하면 AI가 웹 검색을 수행하여 질문에 답하도록 유도합니다.

React/Next.js/Tailwind 스택과 관련된 몇 가지 예시는 다음과 같습니다:

• 최신 버전 확인: "`@web`을 사용하여 framer-motion 라이브러리의 최신 안정 버전을 찾고 React 18과의 호환성을 확인하세요."

• 새 기능 연구: "최신 Next.js 카나리 릴리스에 서버 컴포넌트와 관련된 새로운 실험적 기능이 있나요? `@web`을 사용하여 검색해 주세요."

• Tailwind 플러그인 발견: "복잡한 그라데이션을 만들기 위한 Tailwind 플러그인이 필요합니다. `@web`으로 인기 있는 옵션과 사용법을 찾아주세요."

Cursor AI 'Notepads' 기능

Cursor는 Notepads(현재 베타)를 제공하며, 이는 에디터 내에서 공유 가능한 전역 문서로 프로젝트 컨텍스트, 지침 또는 코드 스니펫을 저장할 수 있습니다. 파일을 첨부하고 다양한 정보를 결합하여 팀 또는 개인 워크플로우를 위한 재사용 가능한 리소스를 생성함으로써 단순한 규칙 이상의 기능을 제공합니다.

사이드바의 Notepads 섹션에서 + 버튼을 클릭하고 이름을 지정하여 새 메모장을 만들 수 있습니다. 채팅이나 다른 AI 상호 작용에서 해당 내용을 사용하려면 @ 기호 뒤에 메모장 이름을 붙여 참조하면 됩니다(예: @my-react-patterns).

저희는 이미 React 컴포넌트, Next.js의 App Router 패턴, Tailwind CSS에 대한 세 가지 메모장에 링크했습니다.

Cursor AI의 자동 린트 수정으로 코드 품질 향상

때때로 Cursor가 생성한 코드는 작은 오류를 발생시킵니다. Cursor의 자동 린팅 해결은 AI가 변경 사항을 적용하거나 새 코드를 생성한 후 발생할 수 있는 린트 오류를 수정하려고 시도하여 코드를 깨끗하게 유지하는 데 도움이 됩니다. AI 에이전트가 코드를 수정한 직후 설치된 린터(예: ESLint)의 출력을 자동으로 확인하는 방식으로 작동합니다.

설정하려면 프로젝트에 ESLint와 같은 린터가 구성되어 있는지 확인한 다음, 채팅 설정(Settings > Features > Chat)에서 Iterate on Lints 옵션을 활성화합니다. Agent 모드를 사용하면 Cursor AI는 초기 코드 생성 또는 새 코드 수정 후 나타나는 새로운 린트 경고 또는 오류를 자동으로 해결하려고 시도합니다. 기존 코드를 여러 줄 및 파일에 걸쳐 정리할 수도 있습니다.

React/Next.js/Tailwind 스택과 관련된 몇 가지 예시는 다음과 같습니다:

• React 훅 규칙: Agent가 훅 규칙을 위반하는 코드(예: 조건문 내에서 useState 호출)를 생성하는 경우, ESLint가 이를 플래그하고 Cursor는 컴포넌트를 최상위 수준에서 훅을 올바르게 사용하도록 리팩토링하려고 시도합니다.

• 사용되지 않는 import/변수: Agent가 유틸리티 함수에 대한 import를 추가했지만 최종 코드에서 사용하지 않는 경우가 있습니다. 린터가 사용되지 않는 import를 플래그하고 Cursor는 불필요한 줄을 자동으로 제거합니다.

• TypeScript 타입 오류: Agent가 TypeScript ESLint 플러그인에 의해 감지된 타입 불일치를 유발하는 TypeScript 코드를 생성하는 경우, Cursor는 오류를 해결하기 위해 타입 또는 코드 로직을 조정하려고 시도합니다.

Cursor의 테스트 기반 코드 생성 루프 설정

Cursor의 반복 기능을 활용하여 테스트 주도 개발(TDD) 워크플로우를 따를 수 있습니다. TDD에서는 실제 코드 구현 전에 테스트를 작성합니다. AI 에이전트에게 빌드하려는 특정 함수 또는 컴포넌트에 대한 테스트 케이스를 생성하도록 지시하는 것으로 시작하여 예상되는 입력과 출력을 명확하게 설명해야 합니다.

테스트가 작성되면(그리고 TDD에서 예상대로 실패하면), 에이전트에게 해당 테스트를 통과하도록 특별히 설계된 구현 코드를 작성하고 모든 테스트가 통과할 때까지 반복하도록 지시합니다. 초기 코드가 모든 테스트를 통과하지 못하면 에이전트의 스마트 재작성이 모든 테스트가 빨간색(실패)에서 녹색(통과)으로 전환될 때까지 코드를 개선합니다.

React + Next.js + Tailwind 스택과 관련된 몇 가지 예시는 다음과 같습니다(팁: 일반적인 TDD 패턴을 메모장으로 저장할 수도 있습니다):

• 유틸리티 함수 TDD: "숫자를 받아 포맷된 통화 문자열(예: $1,234.56)을 반환하는 유틸리티 함수 formatCurrency(value: number)에 대한 Jest 테스트를 작성하세요. 양수, 0, 음수에 대한 케이스를 다루세요." 그런 다음 테스트를 검토한 후: "이제 이 테스트를 통과하도록 formatCurrency 함수를 작성하세요. 모든 테스트가 녹색이 될 때까지 반복하세요."

• React 컴포넌트 상호 작용 테스트: "React Testing Library를 사용하여 컴포넌트에 대한 테스트를 작성하세요. 초기 카운트 0을 표시하고, 'Increment' 버튼을 클릭하면 증가하고, 'Decrement' 버튼을 클릭하면 감소해야 합니다." 이어서: "버튼에 대한 기본적인 Tailwind 스타일링을 포함하여 이 테스트를 만족시키는 컴포넌트 구현을 생성하세요. 모든 테스트가 녹색이 될 때까지 반복하세요."

• API 라우트 로직 테스트: "이메일 필드가 있는 POST 요청을 허용하는 Next.js API 라우트 /api/validateEmail에 대한 테스트를 작성하세요. 테스트는 기본 정규식 패턴에 따라 유효한 이메일에는 200 상태를, 유효하지 않은 이메일에는 400 상태를 반환하는지 확인해야 합니다." 그런 다음: "방금 작성한 테스트를 통과하도록 /api/validateEmail API 라우트 핸들러를 구현하세요. 모든 테스트가 녹색이 될 때까지 반복하세요."

Cursor에 MCP 추가

Model Context Protocol (MCP)은 Cursor의 플러그인 시스템처럼 작동하여 외부 도구 및 데이터 소스를 AI 에이전트에 직접 연결할 수 있도록 합니다. 이러한 심층 통합은 Cursor AI의 기능을 향상시켜 수동으로 정보를 제공할 필요 없이 데이터베이스, API 또는 기타 서비스와 상호 작용할 수 있도록 합니다.

MCP 서버는 전역적으로 ~/.cursor/ 또는 프로젝트별로 .cursor/에 mcp.json 파일을 생성하여 구성하며, Cursor가 도구에 연결하는 방법(예: 실행할 명령 또는 SSE 엔드포인트)을 지정합니다. 일단 설정되면 Agent는 관련 MCP 도구를 자동으로 감지하고 사용할 수 있으며, 특정 작업에 이러한 통합을 활용하도록 직접 프롬프트할 수도 있습니다.

React/Next.js/Tailwind 스택과 관련된 몇 가지 예시는 다음과 같습니다:

• 데이터베이스 스키마 통합: 프로젝트 데이터베이스에 연결하는 MCP 서버를 구성합니다. 그런 다음 Agent에게 다음과 같이 질문할 수 있습니다: "데이터베이스 MCP 도구를 사용하여 users 테이블의 스키마를 가져오고, 스키마를 기반으로 적절한 TypeScript 타입을 포함하여 ID로 사용자를 검색하는 Next.js API 라우트(/api/users/[id])를 생성하세요."

• 헤드리스 CMS 연결: 헤드리스 CMS(예: Contentful 또는 Sanity)용 MCP 도구를 설정합니다. 그런 다음 다음과 같이 프롬프트할 수 있습니다: "CMS MCP 도구를 사용하여 blogPost에 대한 콘텐츠 모델을 가져오고, 필요한 게시물 데이터를 가져와 전달하기 위해 pages/blog/[slug].js에 getStaticProps 함수를 생성하세요."

• 
  

cursor.directory에서 커뮤니티에서 생성한 Cursor + MCP 통합의 대규모 목록을 확인하세요.

Cursor AI의 설정을 철저히 구성하고 Agent 모드, Rules, @docs, @web, Notepads와 같은 강력한 기능을 활용함으로써 React 및 Next.js 개발에 최적화된 AI 기반 코드 에디터를 구축했습니다. 이 설정은 소프트웨어 개발 속도를 크게 높이고, 복잡한 작업을 간소화하며, 코딩 효율성을 향상시키고, 새 코드에 대한 높은 품질 표준을 유지하도록 설계되었습니다.

AI 지원을 마스터하는 것은 지속적인 과정임을 기억하십시오. 프롬프트를 지속적으로 개선하고, 코드 변경 사항을 자주 커밋하고, 새로운 AI 모델을 시도하고, 올바른 컨텍스트를 사용하며, 이러한 기술을 특정 프로젝트에 맞게 조정하십시오. AI를 협업 파트너로 받아들이면 생산성과 코딩 숙련도의 새로운 수준을 열 수 있습니다.