[Tool] Cursor AI IDE

Cursor 란?

 

Cusor - The IDE desined to pair-program with AI.

Cursor는 Anysphere라는 외국계 AI 소프트웨어 연구실에서 개발한 AI 기반 코드 에디터이다. 기존의 코드 편집기와는 달리, AI 기술을 통해 개발자의 의도를 이해하고 코드 작성을 지원한다.

 

주요 특징

• AI 기반 코드 제안 및 자동 완성
• 자연어로 코드 생성 가능
• 실시간 오류 감지 및 수정 제안
• 다양한 프로그래밍 언어 지원
• 직관적인 사용자 인터페이스
• VS CODE를 Forking 해서 만든 프로젝트
• VS CODE의 모든 기능 및 확장 프로그램 사용 가능
• 코드베이스 인덱싱
• privacy mode 지원

 

설치

Cusor

[0] 설치중

 

[1] 설치 후 화면 셋팅

 

[2] VSCode에서 사용하던 Extension 가져오기

 

[3] 코드베이스 인덱싱 여부를 결정하는 단계로, 초기 셋팅 단계에서 당연히 코드베이스 인덱싱이 되어 있지 않기 때문에 전 단계와 마찬가지로 프로젝트 사이즈에 따라 다소 시간이 걸릴 수 있다. 보안에 유의해서 선택해야 한다.

이후에, 이에 대한 셋팅은 ([Cursor Setting > Features])에서 변경할 수 있으며, 지금까지 인덱싱 된 데이터들도 모두 지울 수 있다.

 

[4] Cursor 회원가입 skip 하게되면 AI 사용이 불가능하다. 이메일, 구글, 깃헙 중에 선택할 수 있다.

 

[5] 계정 연결이 성공되면 Cusor IDE 사용가능

 

사용 방법

1. tab

• 에디터에서 약 1초간 동작이 없는 경우 Cursor Copilot++ 이(가) 자동으로 코드를 추천
• tab키를 누르면 Cursor Copilot++ 이(가) 자동으로 만들어주는 코드를 적용

2. Ctrl + K

• 간단한 코드를 생성하는 커맨드
• 에디터 내 사용자 쿼리를 입력할 수 있는 창이 나타남
• 간단한 함수를 만들거나 테일윈드, 부트스트랩 등 CSS 클래스명 붙일 때 편리
• @Codebase, @Docs, @Web 등 여러 가지 심볼을 프롬프트로 사용 가능

3. Ctrl + L

• 에디터 화면 오른쪽에 LLM에게 대화할 수 있는 채팅창을 여는 커맨드
• 복잡한 버그를 수정하거나 코드를 기술적인 도움이 필요한 경우 사용
• 코드를 드래그 후 Ctrl + L 커맨드 입력 시 채팅창으로 코드가 자동으로 복사됨.
• @Codebase, @Docs, @Web 등 여러 가지 심볼을 프롬프트로 사용 가능

• @Codebase : 코드베이스 기반 검색 기능
• @Docs : 문서기반 검색 기능
  • 설정 ( [Cursor Settings ⚙️ > Features] )에서 문서를 업로드하거나 채팅창에서 @Add로 문서 등록 가능
• @Web : 웹 기반 검색 기능
  • 설정  ( [Cursor Settings ⚙️ > Features] )에서 항상 사용할지 체크 가능(default : 사용 안 함)

4. Ctrl + Shift + L

• 특정 코드에 AI 집중 시키는 기능
• 코드를 선택하고 사용

5. with codebase 버튼

• 코드베이스 전체 질문
• 전체 저장소에 대한 질문을 할 수 있음

 

🙌 Cursor IDE의 특징 (가져옴)

👍 command-k

Command K를 사용하면 AI로 코드를 편집하고 작성할 수 있습니다.
편집하려면 일부 코드를 선택하고 '편집'을 클릭한 다음 코드를 어떻게 변경해야 하는지 설명하세요.

완전히 새로운 코드를 생성하려면 아무 것도 선택하지 않고 Command K만 입력하면 됩니다.

👍 copilot++

Copilot++는 Cursor의 기본 자동 완성 기능입니다. 하단 상태 표시줄에서 활성화할 수 있습니다.
이는 중간 라인 완성 및 전체 차이점을 제안할 수 있는 보다 강력한 Copilot 버전입니다.

👍 chat

Chat을 사용하면 코드베이스를 보는 AI와 대화할 수 있습니다.

채팅에서는 항상 현재 파일과 커서를 볼 수 있으므로 "여기에 버그가 있나요?"와 같은 질문을 할 수 있습니다.

👍 @symbols

@ 기호를 사용하면 AI에 코드를 쉽게 보여줄 수 있습니다. Command+K 또는 채팅에 "@"를 입력하면 폴더에 있는 모든 파일과 코드 기호의 드롭다운을 얻을 수 있습니다.
@ErrorPopup과 동일한 스타일 사용 같은 특정 종속성이 있는 코드를 생성할 수 있습니다.

파일에 대해 질문하는 데 @inlineDiffService.ts의 기능은 무엇입니까?처럼 이를 사용할 수 있습니다.

👍 Codebase Answers

Codebase Answers를 사용하면 AI에게 전체 코드베이스에 대해 물어볼 수 있습니다. 이를 사용하려면 채팅에서 Command+Enter로 입력하거나 입력 상자에서 "코드베이스 포함" 버튼을 클릭하세요.
"실행 취소, 다시 실행 논리는 어디에 있나요?" 와 같은 질문을 할 수 있습니다. 또는 "클라이언트 측에서 인증 토큰을 어떻게 처리합니까?"

👍 docs

이 기능은 타사 라이브러리에 대한 AI의 이해를 향상시킵니다. 문서를 사용하려면 채팅이나 명령 K에 @LibraryName을 입력하세요.
커서가 사용자 정의 문서를 크롤링하게 하려면 명령 K나 채팅에 "@Add"를 입력합니다. Add new doc를 드롭다운에서 클릭하여 URL을 제공할 수 있습니다.

👍 Auto-Debug

Auto-debug는 커서 터미널의 오류를 수정해줍니다. 이를 사용하려면 터미널 오류 후에 표시되는 파란색 "자동 디버그" 버튼을 클릭합니다. 클릭하면 AI가 파일을 살펴보고 문제 해결을 위해 도와줍니다.

👍 Fix Lints

커서를 사용하면 린트 오류를 빠르게 수정할 수 있습니다. 린트 오류 위로 마우스를 가져가서 표시되는 파란색 '수정' 버튼을 클릭합니다.

 

참고사이트

https://chucoding.tistory.com/143

Cursor IDE 동작원리 및 설치, 사용방법

https://www.magicaiprompts.com/blog/cursor-ai-code-editor-guide

커서 AI (Cursor AI) 사용법 : 코드 편집기의 새로운 혁명 | 프롬프트해커 대니

https://velog.io/@wns450/작업시간을-줄여줄-Cursor-IDE

VSCode의 Superset, Cursor IDE