[커서(Cursor AI)] 최적의 Cursor AI 설정을 찾아보자 (with React)

[커서(Cursor AI)] 최적의 Cursor AI 설정을 찾아보자 (with React)

안녕하세요! 갓대희 입니다. :- )

오늘은 요즘 개발자 커뮤니티에서는 선두주자로 여겨지는 AI 코드 에디터 Cursor 설정  최적화를 해보려고 한다. 

 

다만 최근 내가 진행했던 구성인 React 그리고 Tailwind CSS를 예시로 개발 환경 기준으로 최적의 세팅을 고민해보려 한다.

( 이 글의 영감과, 많은 내용의 출처는 https://www.builder.io/blog/cursor-ai-tips-react-nextjs ) 해당 글에서 영감을 받았고, 기존의 내 설정과 해당 내용의 설정을 조합하여 설정 해보려 한다.

 

아직 AI활용에 있어 초보이지만

나만의 프롬프트, 컨텍스트를 찾아가는 과정이라고 생각하고 봐주시면 좋을 것 같다.

 

---

1. Cursor AI 설치 및 방향

 - 이미 커서 설치(Cursor AI 설치) 방법에 대해서는 해당 글에서 간단하게 다뤘으니 참고 하면 될 것 같다.

2025.06.19 - [00. AI/2. AI for 개발자] - [ Cursor ] Cursor 설치 및 기본 설정 가이드 [AI 코드 편집기 사용기]

 

 - 내가 참고한 글에서 이미 좋은 가이드를 해 주고 있었고, 그 중 참고할 만한 내용 및 내가 사용하고 있는 설정, 앞으로의 설정을 어떻게 변경할지 쭉 이어 가보려고 한다. 

---

2. 세팅 하기

 - 우측 상단의 톱니바퀴 모양의 설정을 열자

( 커서는 빠르게 업데이트를 내놓는 편인것 같다. 생각보다 자주 업데이트 and 재기동 창이 뜬다. ) 

( 이때마다 못보던 기능, 실험적인 기능이 생기는 것 같아 자주 들어가 보고, 계속 내 설정에 맞춰 변경해주다보면 최적화가 되지 않을까? )

2.1) Chat

현재 내 Cursor 버전 1.1.3 v

• Default new chat mode : Agent ( 복잡한 작업/코드 생성에 좋다. )
• Auto-Clear Chats : 맥락 바뀔 때 채팅 자동으로 변경 한다.
• Scroll to New Message : 최신 AI 메시지를 항상 보도록 설정 한다.
• Web Search Tool : 웹에서 최신 정보/문서 검색
• Backspace Removes Context : 입력란 맨 앞에서 백스페이스 누르면 마지막 context 를 제거 한다. 

• Out-of-Context Edits in Manual Mode  : 이전 글에서(또는 하이 이미지 참고) @Add context 기능을 통해 특정 소스 파일 단위, 라인단위로 지정하여 명시하여 채팅을 하는 예제를 보여줬다.
  이때 수정시에 명시된 context이외에도 관련 파일까지 자동으로 수정한다고 한다. (매우 효율적인 기능이니 필수)
• Auto Fix Lints : 린트 오류 자동 수정
• Auto-Accept on Commit : Git 커밋 시 변경된 파일 자동 승인 (커밋된 파일에 대한 context clean-up 자동화)

 

 

• auto-run mode( 예전 버전에서는 yolo mode 였다고 한다.) : 커서의 Auto-run 모드는 사용자가 미리 지정한 허용 목록(allowlist)과 차단 목록(denylist)에 따라 명령어를 자동으로 실행 하도록 한다.
  (이또한 매우 효율적이지만, 사용함 V 를 하려면 다음과 같은 경고를 볼 수 있을 것 이다.)

 

▶ 이는 다음과 같은 여러 위험 요소들이 발생할 수 있기 떄문이다.

ex) Prompt Injection 위험
외부 소스(예: 인터넷에서 복사한 프롬프트, 타인이 작성한 코드 등)에서 입력된 명령어에 악의적인 코드가 포함될 수 있다.
이런 경우, 허용 목록에 포함된 명령어라면 의도치 않은 명령이 자동 실행될 수 있으므로 보안상 위험이 존재한다.
예를 들어, 중요한 파일을 삭제하거나 시스템에 영향을 줄 수 있는 명령어가 방심하는 사이 실행될 수 있는 것 이다.

 

▶ 즉, 사용자 책임이 따르기 떄문에 주의하여야 한다. 
Auto-run 모드를 사용할 때는, 반드시 신뢰할 수 있는 프롬프트와 명령만 사용해야 하며, 외부에서 가져온 프롬프트는 특히나 주의해서 사용해야 한다.

 

※ 설정에 따라 자동 실행 범위를 제한(허용/차단 목록 설정)하거나, 중요한 파일 보호 기능 등을 추가로 설정할 수 있으니 살펴 보자. 

ex) 나의 경우 React + Vite + TypeScript + pnpm 환경의 프로젝트이고 이에 도움이 되는 Auto-run Allowlist & Denylist 를 작성해 보았다. 

 

▶ Allowlist

pnpm install
(패키지 설치 및 업데이트)

pnpm run dev
(개발 서버 실행)

pnpm run build
(프로덕션 빌드)

pnpm run test
(테스트 실행)

pnpm run lint
(코드 린트)

pnpm run format
(코드 포매팅)

tsc
(타입스크립트 컴파일)

vitest
(테스트 프레임워크 사용 시)

mkdir, touch
(폴더/파일 생성)

rm -rf dist
(빌드 결과물 정리, 단 이 명령어는 프로젝트 루트에서만 안전하게 사용)

이 외에도, 프로젝트에서 자주 사용하는 커스텀 스크립트 등

 

 

▶ Denylist

rm -rf /
(시스템 전체 삭제 위험)

rm -rf *
(프로젝트 전체 파일 삭제 위험)

sudo로 시작하는 모든 명령
(시스템 권한 명령)

curl, wget, npx 등 외부에서 코드를 받아 실행하는 명령
(의도치 않은 외부 코드 실행 방지)

chmod, chown
(권한 변경)

git reset --hard, git clean -fdx
(로컬 변경사항 강제 삭제)

shutdown, reboot, poweroff

dd, mkfs, fdisk 등 디스크 조작 명령

이 외에도, 프로젝트의 중요 파일(예: .env, package.json, pnpm-lock.yaml, tsconfig.json 등)을 삭제하거나 변경할 수 있는 명령어

 

 

• Toolbar on Selection : 코드 선택 시 "Add to Chat" 및 "Quick Edit" 버튼 표시하여. 빠르게 에이전트 호출 가능 하다. 
• Auto-Select Code Regions for Quick Edit (Ctrl+K) : Ctrl+K 시 자동으로 코드 범위 지정 된다. 
• Themed Diff Backgrounds : 코드 diff 시 테마 배경색 적용
• Terminal Tooltips : 터미널에서 “Add to Chat” 등 툴팁 표시
• Terminal Hint  : Ctrl+K 사용법을 터미널에 힌트로 표시 

 - 이로써 조금 길었던 Chat설정이 끝났다. 주로 Chat을 통해 AI와 협업, 소통할 것이니 가장 중요한 챕터 였고,

혹시나 위 설명하지 않은 이외 설정들도 혹시 궁금하다면 하기 이미지를 참고하자.

 

2.2 Tab 

1.1.3 v

• Cursor Tab : 탭 자동완성의 핵심 기능이라고한다. 탭 자동완성 기능이 매우 향상된다고 한다. 
• Suggestions in Comments : 커서 탭을 통해 주석/문서화 조차도 AI가 작성 가능하다.
• Auto import: 필요한 import문 자동 추가

 

2.3 Models

• Pro 계정이 아니라면, Gemini, Claude 등 API 키 추가 가능하지만.. 
  하기 이전 포스팅을 참고하자면, 괜히 api Key를 발급받아 사용했을떄 2시간만에 5.5$를 소진하였던 기억이 있다.
  아마도, 차라리 cursor를 구독하는게 더 비용이 저려할 것이다. 

2025.06.19 - [00. AI/2. AI for 개발자] - [ Cursor ] Cursor 설치 및 기본 설정 가이드 [AI 코드 편집기 사용기]

 

2.4 Rules

• Generate Memories : 내가 사용한 chat기반으로 알아서 규칙을 학습하여 메모리에 적재 시킨다. Beta기능이지만 최근 많은 유튜브에서 설명해 주었다. 
  

ex) 채팅을 통해 알아서 학습된 내용이 Rules에 추가된 것을 볼 수 있다.

• + Add new rule로 React, Tailwind CSS 개발 기준을 규칙으로 저장 할 수 있다. 
  해당 링크 참고. (https://raw.githubusercontent.com/zuchka/cursor-setup-react-nextjs-tailwind/refs/heads/main/NextJSRules.md)
  ( 출처 :  https://www.builder.io/blog/cursor-ai-tips-react-nextjs )

 

2.5 Indexing & Docs 

• Index new folders : 새 코드를 추가하면 자동으로 인식하여 컨텍스트에 추가 한다.
• 문서는 2개의 공식 문서를 추가 하여 주었다. 

1. React : 내 프로젝트 18.x version 에 맞는 doc : https://18.react.dev/reference/react

            혹시 최신 19.x version인 경우  https://react.dev/reference/react

 

2. Tailwind CSS(이전 포스팅에서 작성하였듯 내 프로젝트 사용 버전 3.4.17 에 맞는 링크) : https://v3.tailwindcss.com/docs/installation

 

 - 추가하면 indexing 하는 모습도 실시간으로 확인 가능 하다.

ex) 인덱싱 중

 

ex) 인덱싱 완료

 

2.6 Notepads

• 프로젝트 관련 메모를 자동으로 대화 컨텍스트에 포함시켜주는 기능

---

3. 코드 품질 자동화

• ESLint, Prettier 설치 및 활성화

위에서 Auto Fix Lints(린트 오류 자동 수정) 기능을 설정하였기 떄문에 코드 품질 문제를 AI가 자동으로 고쳐줄 것이다.

---

4. 이외 몇가지 Cursor의 주요 기능

4.1 Tab 자동완성

• 함수, 컴포넌트, Tailwind 클래스까지 제안해 줄 것이다.
• Tab 키로 수락, Esc로 무시, Ctrl/⌘+→로 단어 단위 수락 가능하다.

4.2 Chat(Agent/Ask) 모드

• "이 컴포넌트 리팩토링 해줘" , "이 코드 설명해줘" 등 자연어로 요청 가능하다.
• Agent 모드는 복잡한 코드 생성/리팩토링, Ask 모드는 빠른 질의응답에 적합 하다고 한다.

4.3 @docs, @web

• 공식 문서/최신 정보가 필요할 때, @docs, @web 명령어로 바로 검색 가능 하다.

---

5. 마무리 하며

사실 대부분 default 설정이고, 전반적으로 어떤 설정이 있는지 살펴본 것이라고 봐도 될 것 같다. 현재 내 사애에서 1달위 나의 cursur 설정이 얼마나 달라졌는지 볼 수 있는 기록이라고도 생각한다. 

혹시 더 좋은 내용이 있고, 잘못 표현한 부분이 있다면 댓글 남겨주시면 수정/보완 하도록 하겠습니다.