커서(Cursor) IDE 사용기

gpt를 사용하다가, 코파일럿을 사용하다가 최종적으로 Cursor(커서)만 사용하고 있는 요즘. 커서의 마술 같은 성능에 놀라기도 하고 무섭기도 하고; 어쨌든 많은 도움을 받고 있는데요. 커서에게 어떤 도움을 받고 있는지 블로그로 남겨봅니다.

 

Cursor

간단하게 소개하자면 커서는 AI를 탑재한 IDE이며, vscode 기반이기 때문에 vscode 사용자라면 누구나 손쉽게 적응할 수 있습니다.

https://www.cursor.com/

Cursor

 

 

사용법

사실 사용법이랄게 크게 없습니다. 대부분의 기능은 vscode와 동일하다고 보시면 됩니다. 딱 세 가지만 외우면 되는데요. 

 

 

Ctrl(command) + L : 인공지능 Chat 

Ctrl(command) + K : 코드 수정 기능

Tab : 자동 추천 완성

 

Ctrl + L 

Ctrl + L 은 GPT에 질문하는 것과 같습니다. 장점은 드래그한 코드를 그대로 질문할 수 있다는 거.

그리고 다른 관련 스크립트 파일을 추가할 수 있다는 겁니다.

 

드래그한 코드가 Chat에 그대로 옮겨집니다.

다른 파일을 추가 참조할 수 있습니다. 이게 정말 편리해요

 

 

검색 엔진은 선택해서 사용할 수 있습니다. claude와 gpt가 제일 낫더라고요.

 

 

 

 

Ctrl + K 

질문하거나 명령한 대로 코드를 직접 바꿔줍니다.

 

저는 이런식으로 사용하기도 합니다. 텍스트를 복사해와서 객체로 바꾸는 등.. 타이핑이 귀찮은 작업을 맡기고 있습니다.. (더 잘 활용하지 못해 미안해..)

 

 

 

TAB

사실 위 두개는 그렇게 많이 활용하지는 않습니다. 제가 가장 많이 활용하는 것은 커서 꽃이자 핵심! TAB 기능인데요. 커서가 코드를 추천하고, tab을 누르면 코드가 완성됩니다. 

실제 활용하고 있는 예시를 몇개 보여드리겠습니다.

 

 

반복적 코드 작성에 최고

 

커서는 반복될 것 같은 코드는 거의 정확하게 자동완성 추천합니다. 예를들어 api 호출하는 구조를 만든들 때 아래 기본 틀을 잡습니다.

import request from '@/axios/index'

const prefixUrl = '/common/community/test'
const URL = {
  LIST: `${prefixUrl}/list`,
  DETAIL: `${prefixUrl}/detail`

}

/**
 * @param {object} data
 * @param {number} data.name - 이름
 * @param {number} data.id - 고유 번호
 * @param {string} data.title - 제목
 * @param {string} data.regDt - 등록일
 * @param {string} data.editDt - 수정일
 * @param {string} data.viewCnt - 조회수
 */


export const getTestList = async (params) => {
  const option = {
    url: URL.LIST,
    params
  }
  return await request.get(option)
}

 

 

이정도까지만 틀을 잡아주면 나머지는 커서가 대부분 해결해줍니다.

 

위에 list 호출하는 함수를 하나 만들었으니 이제 detail 조회 함수를 만든다고 했을 때, 리스트 함수를 기반으로 detail 함수 또한 완성해줍니다.

 

 

회색 처리는 추천이며, tab을 누르면 코드로 완성됩니다

 

 

 

다음은 저장하는 api를 만들어보겠습니다.

S까지 입력했는데 독심술이라도 있는지 save를 추천합니다.

 

 

 

tab으로 완성하고, 함수쪽으로 내려가봅니다. 

 

 

 

벌써 대기 중입니다. 무서운놈..

 

 

심지어 get 요청이 아니라 post 요청인 것까지 캐치했습니다.

 

gif

 

 

함수를 다 짜주는 커서

 

그리고 함수명만 잘 지어도 아래처럼 코드 추천을 합니다.

 

아래 예시는 tree 구조로 메뉴를 만든 vue 파일인데요.

선택한 요소의 부모 폴더를 찾는 함수를 만들고 싶어 'getParentMenu'라는 함수명까지만 입력했는데 부모 폴더를 찾는 코드를 추천해주더라고요. 정말 똑똑합니다. 

 

 

 

추천

나만 알고 싶기에는 너무 신세계라 여기저기 추천하고 다녔는데요. 같은 팀 동료분들께 추천했더니 설치하고 세팅하는 게 귀찮을 것 같다는 반응도 많더라고요. 아마 기존 사용하던 vscode 설정을 옮기기가 귀찮다고 생각하신 것 같아요. 근데 사용 중인 vscode의 설정이나 익스텐션을 그대로 동기화하기 때문에 귀찮을 것도 없다는 거! (무슨 커서 영업사원 같네요)

 

여튼 커서 덕에 현재 진행 중인 프로젝트에 도움을 많이 받았고, 일감도 빨리 쳐낼 수 있었습니다.

 

단점

아 근데 심각한 단점이 있습니다.

 

커서를 신나게 사용하다가 2주 무료 기간이 종료되어 커서 기능을 이용하지 못했는데요. 갑자기 바보가 된 느낌이었습니다. 코드를 어떻게 쳐야하는지 잠시 말문이 막히는 느낌. 함수명 지어놓고 자동완성만을 기다리는 내 모습... 커서를 많이 사용하면 아마 바보가 되고 말겁니다. 뭐든 똑같겠지만 적당히, 적절하게 잘 써야한다는 거~