[DevTool] Cursor와 함께하는 React - CORS 에러 디버깅부터 백오피스까지

프로젝트에서 간단하게 백오피스 화면을 직접 개발하게 되면서, 처음으로 React 개발에 손을 대기 시작했다. (물론 이전에 html, css, js 활용한 개발 정도는 할 수 있었다ㅎㅎ. 아예 모른다 해도 Cursor만 조금 잘 활용하면 충분히 페이지 그리는 거 정도는 가능하다!) 그렇다고 효율성을 따지며 백엔드처럼 깊게 공부할 생각은 아직 없었고,, 요즘 AI가 워낙 좋으니 이걸 활용해서 테스트나, 간단한 관리 툴 정도는 만들 수 있겠다 싶었다.

 

(사실 나도 Cursor를 활용하면서 주위 프론트 개발자한테 커서 찬양을 했다. 그리고 무료 유료 버전이 있는데 나는 그냥 테스트 해볼 뷰만 만드는 데 활용하기 때문에 굳이 유료를 쓰진 않았다!)

 

1. Cursor로 리액트를 시작

내 주위에 Cursor 찬양자가 있다. 정말 써보면 편할거고 특히 프론트 개발할 때 빨리 개발할 수 있어서 좋았다고 했다.. 그치만 백엔드를 공부하기에도 바쁘다는 핑계로 미루고 미뤘다.

 

그러던 중 서버 개발을 하다 CORS 에러가 났다. gateway로 변경하면서 난 에러라 쉽게 고쳐지지 않았고,, 그때마다 프론트엔드 개발자분께 배포 후 테스트를 부탁드릴 수도 없었다. 그래서 그냥 이참에 Cursor를 활용해서 프론트도 직접 개발해 보자는 결심을 하게 되었다.

 

Cursor는 아래 공식 사이트에서 직접 설치할 수 있고, VSCode와 거의 비슷한 인터페이스라서 익숙하게 사용할 수 있다. 

https://www.cursor.com/

Cursor - The AI Code Editor

 

 

 

2. Cursor에서 React 프로젝트 만들기

Cursor를 설치하고 실행한 뒤, 리액트 프로젝트를 시작하는 데 걸린 시간은 5분도 채 안 됐다. 원하는 언어나 라이브러리, 프레임워크를 지정해서 프로젝트 만들어 달라고 하면 친절하게 순서대로 알려준다.
터미널 명령어도 직접 칠 필요 없다. 그냥 프롬프트에 내가 만들고 싶은 걸 구체적으로 입력하고, "▶ Run" 버튼만 누르면 알아서 필요한 설정과 폴더 구조가 생성된다.

 

3. 명령만으로 디자인과 뷰 생성 완료

Cursor를 써보면서 가장 편했던 건, 정말 말 한마디면 내가 원하는 화면이 자동으로 만들어진다는 점이었다.
“여기에 브랜드, 상품명, 가격 같은 정보를 표로 보여주고, 클릭하면 상세 내용을 보여주는 화면 만들어줘”라고 말하면, 진짜로 그런 구조의 뷰가 만들어진다.

 

특히 백오피스처럼 UI가 아주 세련될 필요는 없지만, 정리된 형태로 데이터를 보여주는 툴을 만들 때는 Cursor의 기본적인 뷰 생성 능력만으로도 충분히 괜찮은 결과물이 나온다. 디자인적인 부분조차도 어느 정도는 알아서 해준다.
나는 사실 디자인 감각도 없는 편이라서 "따뜻한 느낌의 테이블로 보여줘", "깔끔하게 정렬된 뷰로 만들어줘" 처럼 명령 해봤는데, Cursor는 이를 적당히 해석해서 색상, 여백, 정렬까지 나름 보기 좋게 맞춰줬다.

 

더 정확한 디자인을 원하면 사진을 첨부할 수도 있지만, 나는 간단하게 쓰고 싶어서 그냥 유명한 앱의 뷰를 예시로 들었다. “인스타그램 마이페이지 느낌으로 카드 정리해 줘”  이런 식으로 대표적인 앱의 구조를 예시로 들었고, 이 정도만으로도 충분히 괜찮은 결과물을 얻을 수 있었다. 이런 점에서 Cursor는 꼭 개발자만을 위한 도구가 아니라, 아이디어만 있으면 누구든 화면을 직접 구성해 볼 수 있는 개발/디자인/기획 만능 툴인 것 같다.

 

4. 구체적으로 말할수록 좋은 결과

 

Cursor에게 말을 걸 때 위 사진처럼 "뭐를 개선해줘!" 라고 막연히 말하는 것보다, 레퍼런스 코드나 UI 예시를 함께 주면서 구체적으로 설명하면 훨씬 좋은 결과물이 나온다. 서버 API를 연결할 때도 마찬가지다. 단순히 "이거 API랑 연결해 줘"라고 하는 것보다, Swagger 문서에서 나오는 실제 요청 예시, 특히 curl 코드를 붙여주는 게 가장 빠르고 정확했다. 

curl -X 'POST' \
  'http://localhost:~' \
  -H 'accept: */*' \
  -H 'Content-Type: application/json' \
  -d '{
    "name": "~",
    "profileImg": "string"
}'

예를 들어 위처럼 실제 작동하는 curl 코드를 그대로 주면, Cursor는 자동으로 이걸 이해하고, 요청 주소, 전송 방식(GET, POST, ..), 데이터 형식을 바탕으로 코드를 바로 만들어줬다.

 

5. Cursor가 GPT보다 좋았던 두 가지

1) 긴 코드도 빠르게 읽고 수정 가능

보통 GPT는 한 화면에 너무 많은 코드를 넣으면 렉이 걸리거나 응답 속도가 느려진다. 하지만 Cursor는 코드가 폴더 단위로 context에 추가되는 방식이라, 수십 수백 줄의 코드도 빠르게 읽고 필요한 곳만 수정해준다. 그리고 자체적으로 그 폴더 자체를 읽어올 수 있어서 알아서  해당 폴더나 파일의 코드를 직접 찾아 주기도 한다.

2) 결과물 자동 비교 & 적용 UI

변경된 코드는 자동으로 Diff가 나뉘어 보여지고, 각 파일 단위로 Accept, Reject를 클릭해 선택적으로 적용할 수 있다. 직접 코드를 복사해 붙이지 않아도 되는 이 UI는 정말 손이 편하다.

 

추가로 실제로 실행하다가 오류가 났을 경우 그 오류에 대해 중간에 처리해주기도 한다.. 이런 점들이 정말 미친 편리함인 것 같다.

 

마무리하며

 

원래 내가 참여 중인 프로젝트에는 상품 정보를 직접 관리할 수 있는 툴이 없었다. 그래서 데이터베이스에 직접 올려가며 수작업으로 처리해야 했고, 그 과정에서 개발 외적인 작업 시간도 점점 늘어났다. 그래서 생각한 게, "차라리 내가 백오피스를 직접 만들자" 였고, Cursor 덕분에 많은 시간과 리소스를 들이지 않고도 실제로 쓸 수 있는 수준의 관리 도구를 만들 수 있었다.

 

위 사진은 내가 Cursor를 사용해서 실제로 만든 백오피스 화면이다! 디자인도 Cursor가 직접 해줬고, "CSS를 좀 더 자연스럽게 해 줘"라고 하니 애니메이션, 모션 같은 기능도 자연스럽게 적용해 줬다. 게다가 내가 만들어둔 API도 각 기능에 맞게 알아서 연결해 줘서, 정말 최소한의 설명과 시간만으로 원하는 결과를 얻을 수 있었다.

 

물론 단점도 있다. 만약 Cursor로 개발을 시작해서 끝까지 맡게 된다면, 기본적인 구조나 개념 없이 단지 개발을 하다 보니, 문제가 발생했을 때 직접 원인을 파악하거나 수정하기가 어렵다.

하지만 그럼에도 불구하고, 프로그래밍에 대한 깊은 지식이 없어도 ‘진짜 쓸 수 있는 서비스’를 만들 수 있다는 건 굉장한 장점이라고 생각한다. 아이디어가 있고, 조금의 실행력만 있다면 누구나 원하는 걸 만들어볼 수 있는 세상이라는 걸 몸소 느꼈던 경험이었다.

AI 기술이 빠르게 발전하면서, 이제는 '서버 개발자도 서버만 하지 않는 시대'가 오고 있다. 주위만 봐도 그렇다. (서버 개발자가 프론트까지 하는 경우가 허다하다..) 예전처럼 역할이 딱 나뉘기보다는, 이제는 필요한 기능을 빠르게 구현하고 연결할 수 있는 역량이 점점 더 중요해지고 있다. 그런 흐름 속에서 이런 AI 도구를 빠르게 활용하는 것이 결국 개발자의 덕목이지 않을까 싶다.

 

결국 이렇게 빠르게 변화하는 개발 환경 속에서, 무엇이든 빠르게 시도해 보고 직접 만들어보는 경험이 제일 중요한 것 같다. 앞으로 백엔드 개발을 하면서도 종종 활용해서 다양하게 도전해 볼 것 같다ㅏ!!!!!!!!!!! 커서 최고..