AI Editor, cursor IDE 사용 후기

1.intro, 3줄 요약

SaaS, 외주, 아이디어  PoC 를 위한 개발 템플릿이 필요했음

원래 기술 스택은 vuejs 와 nodejs, dotnet, python 정도였음

리액트를 해보고 싶은데 러닝 커브 시간과, 빠른 아웃풋으로 실제 프로젝트를 진행해보고 싶었음

그래서 직접 트.라.이.

---

2.시작해볼까?

요즘 핫한 개발 툴로 cursor 가 뜨고 있길래 빠르게 사용해봄

먼저, 리액트 프론트를 처음부터 직접 개발하는 것은 시간이 오래 걸리니 admin 템플릿을 오픈소스에서 끌어 오기로 함

https://github.com/d3george/slash-admin

GitHub - d3george/slash-admin: A Modern React Admin Template. It is based on React 19, Vite and TypeScript. It's fast !

검색해본 결과 나름 괜찮은 오픈소스로 정함, vite 를 사용해서 속도랑, 디자인도 알리바바의 ant 쪽 오픈소스를 사용해서 채택

데모 사이트임 : https://admin.slashspaces.com/

Slash Admin

나름 주요 기능들이 있었음

이것을 기반으로 개발 템플릿을 만들기로 결정!!

커서를 다운로드 받고 해당 프로젝트를 열어보니........

 

https://www.cursor.com/

Cursor - The AI Code Editor

 

개발은 리액트로 처음 해보니 까막눈 그 차체......(쭈글)

그래도 vue2, 3 을 경험해봤기에......대충, 라우터, 레이아웃, store 정도는 이해 됬는데

너무 복잡하다는 생각이 확 들었다

3.나만의 리팩토링,  규칙을 세우자

유지보수성을 생각해서 어려운 코드 다 날려!!
핵심 기능만 템플릿화
cusor를 최대한 활용하자

이렇게 로그인, 회원가입 등 인증부 및 한국어 추가, 그 외에 개발 템플릿으로서 메뉴들 CRUD 를 만들어 두었다

물론 backend 도 cusor + 기존 지식 = nodejs api 로 빠르게 만들수 있었다

무엇보다 스웨거 문서 작성하는 부분을 한 문장("api 컨트롤러 파일 참고해서 스웨거 문서 만들어줘")으로 ai 말하니 다 해줬다

 

스웨거 문서도 나름 훌룡했음

 

실제 파일 지정을 많이 사용했다

어떤 파일인지 왜 수정해야 하는지 알려주면 더 잘하는거 같았다

그래서 결과는 아래와 같이 뽑을 수 있었다

물론 아직도 작업중!! 거의 완료

 

16시간, 약 2일 정도 모델이랑 api, front 까지 템플릿을 만드는데 소요한거 같다

 

알차게 쓴거 같다

4.하면서 느낀점

1.코드 리뷰, 코드 베이스로 관련 파일 처리, 코드 퀄리티도 갠춘했다(마음에 들어서 구독 했음.....내 지갑은 얇..)

2. 100 % 는 없다, 정확한 지시가 아니면 잘못된 파일을 import 하거나 코드 작성 규칙이 어긋나기도 한다

"다른 코드 참고해서" 라는 말을 많이 붙인 것 같다, 그리고 백엔드 코드 이야기 하다가 프론트엔드 코드 이야기 하면 잘 못알아들어서 새로운 채팅으로 각각 물어보며 처리했다

3. 가끔 응답이 영어로 나옴....ㅋㅋㅋㅋ, 커서 자체의 응답 깨지는 버그도 종종 있음!

PS 코파일럿이 이제 vscode 에서도 탑재되었다 무료로 가능하니 그것 먼저 사용해보시길 추천

저는 둘다 사용해 봤는데 코파일럿이 조금 더 불편했다....ㅜ