Cursor AI 사용기

https://www.cursor.com/

Cursor

Cursor AI를 사용하는 유튜브를 보게 되었다.

정말 AI가 개발자를 대체할 수 있을지 테스트해보고 싶었다.

---

목표

기존에 있는 프로젝트를 잘 이해하고, 기획상 요구되는 사항을 반영하기 쉬운지 확인한다.

기존 프로젝트의 언어를 모르는 사람도 이해할 수 있게 설명을 해주고, 매우 간단한 수정과 클릭으로만 원하는 기능이 구현되는지 확인한다.

개발 환경

macbook pro m1

cursor AI IDE (메인)

프로젝트 언어

JS

마크다운

html

---

기존 프로젝트 세팅

동아리 영수증 취합을 편하게 하기 위한 간단한 프로젝트를 타겟으로 한다.

프론트 페이지를 통해 사용자가 영수증 사진과 이름, 해달 월을 post 하면, OCR 을 통해 영수증 사진에서 일자와 금액을 읽고, exel에 저장하는 단순한 프로젝트이다.

기존 파일 구조

 

영수증을 저장하면 이런식으로 올린 사람의 정보가 취합된다.

불편했던 점은, 삭제 버튼이 없어서 잘못 올린 경우에 삭제가 불가능 하다는 것!

 

Cursor AI에 프롬프팅과 매우매우 간단한 수정만을 통해 이런 요구사항을 해결 할 수 있는지 확인해보자!!

두근두근 도키도키

---

Cursor IDE에 프로젝트를 로드한 모습

자 이제 시작이야~~ 레츠고 고 고!!!

 

먼저 command + i 를 눌러 프롬프트 창을 띄워본다.

 

Cursor AI의 장점인 프로젝트 안의 여러 파일을 참조 시킬 수 있는 기능이 먼저 눈에 보인다.

프롬프팅을 먼저 해보자.

 

내가 원하는 기능을 위해 수정해야 할 것 같은 파일들을 로드하고, 위와 같이 내가 원하는 기능을 프롬프트에 넣었다.

 

 

이렇게 각 파일별로 어떤 것을 수정해야 하는지 알려주는데, 꽤 ... 맞는 것 같은 이야기를 한다.

각 파일을 클릭하면 어떤 부분이 수정되어야 하는지 코드로 보여준다.

 

server.js

 

각 파일별로 Accept를 눌러 코드에 반영할 수도 있고, 마음에 들지 않는다면 Reapply를 통해 재생성 할 수도 있다.

 

 

나는 일일 이용권~~장비 구매 까지의 컬럼을 추가하는 것을 요청하지 않았는데, "exel에서 가져온 데이터를 표시한다." 라는 말 때문인지, exel 컬럼에 있는 것들까지 추가를 한 모습도 볼 수 있다.

이 것도 프롬프트에 요청해서 수정해보자.

 

 

꽤 잘 알아먹는다.

html 파일을 수정했으니, 이에 맞게 나머지 파일도 수정해보라고 하자.

 

 

진짜 클릭과 프롬프팅만 했다.

이때 결과는?

 

오...! 삭제 컬럼이 생기고, 버튼도 생겼다.

근데...! 동작은 안된다!!! 이유가 뭘까?

 

 

여기에서 부터는 그냥 모르쇠... 해버리는 AI... (역시 AI 가 미래다...)

onClick 이벤트가 발생한 이후 delete function 이 어디서 돌아가는지 찾아보자.

 

 

function은 만들어져있지만, 호출이 되고 있지 않는다고 알려준다.

친절하게도, AI Chat 으로 바로 해당 문제를 넘겨주는 버튼이 지원된다.

버튼을 눌러보면,

 

 

오홍...! 문제가 있던 코드 파일과 line을 지정해서 알아서 채팅을 만들어준다.

그리고 이에 따른 해결 방법도 바로 알려준다.

apply 버튼을 눌러 적용해본다.

 

 

전역 변수로 잘 들어갔다.

실행을 해보았지만, 삭제 버튼이 눌리는 순간 새로고침만 될 뿐, 실제 데이터가 삭제되지 않았다.

코드를 통해 보면,

 

 

"delete_success" type을 서버로 부터 받으면 페이지를 새로고침 하도록 되어있다.

삭제 버튼을 눌렀을 때 페이지가 새로고침이 되고 있으므로,

서버에서 excel 파일을 지우는 부분만 에러가 있다는 것으로 볼 수 있다.

server.js로 가보자.

 

 

data.type이 delete로 들어왔고, 모든 라인을 실행한 후 delete_success를 보냈을 것이다.

그러므로 엑셀 파일을 읽어오는 부분 부터 write를 하는 부분 사이에 문제가 있을 것이다.

 

좀 의심이 가는 부분은 readFile 에서 어떤 file을 가져오고 있는가 정도..?

get_excel_path 를 찾아보자.

 

 

세상에 마상에... get excel path 를 하면 무조건 현재 시간 기준으로 동작하고 있었다.

지금은 11월인데, 10월 데이터를 지우려고 했으니, 11월 데이터를 지우고 지나갔던 것이였다.

이런 무시무시한 코드가 어디있나...

이 문제를 어떻게 해결하면 좋을지 물어보자.

 

 

똑똑한 녀석.

생각보다 똑똑하게 어떤 부분을 고쳐야 할지 바로바로 캐치하는 모습이 인상적이다.

 

apply를 해보면..!

잘 동작 하는군..!

---

후기

이렇게 Cursor AI와 함께 새로운 기능을 추가 하는 여정을 해보았다.

페어 프로그래밍을 하는데, 나는 뒤에서 훈수만 두고, 코드만 읽으면서 막상 개발은 동료 개발자가 해주는 듯한 느낌을 받았다.

 

장점 

편하다. 나는 JS를 잘 모르는 데도 불구하고, 코드의 느낌과 함수의 호출만 보고 유추해가며 기능 개발을 할 수 있다.

단점

사용 하는 사람이 에러가 있는 부분을 직접 파악할 줄 알아야 한다. 그리고 그것을 프롬프트에 매우 잘 설명을 해야 한다.

즉, 완벽하지는 않다.

 

개발자... 대체 까지는 아직 힘들지도 모르겠다.

하지만 개발에 대한 이해를 하고 있는 기획자라면... 매우 유용할 것 같다.

 

 

유료 버전을 사용하고 싶은 마음이 조금 생겼다. 잘 모르는 프로젝트에 투입이 되는 상황에서 생산성 향상에 도움이 될 것 같다.

AI가 미래다...!