메뉴

Cursor

1. Cursor 입문 / 소개

[사용자]
  | 
  v
[프론트엔드 (Next.js)]
  |        (API 요청)
  |-------------------------------------->
  |<--------------------------------------
  |        (응답 데이터)
  |
  v
[백엔드 (Cursor가 작성한 코드)]
  | 
  |--- 인증 & 로그인(토큰/세션) ---> [DB: 사용자 계정/세션 관리]
  | 
  |--- API 키 발급/확인 ---> [DB: API 키 저장 & 레이트 리밋 정보]
  | 
  |--- GitHub Repo URL 분석 ---> [LLM + LangChain]
  | 
  v
[결과 요약/분석 응답 반환]
  |
  v
[프론트엔드] 
  |
  v
[사용자에게 결과 표시]
  1. 사용자가 웹 애플리케이션에 접근
  2. 프론트엔드(Next.js)가 사용자 요청을 받고, 백엔드 API 호출
  3. 백엔드는 인증, 로그인의 유효성 체크 및 DB에서 사용자 정보/세션 확인
  4. API 키가 유효하다면, GitHub Repo를 분석하여 LangChain + LLM을 통해 결과 생성
  5. 결과를 백엔드에서 프론트엔드로 전달
  6. 프론트엔드는 받은 데이터를 화면에 렌더링하여 사용자에게 표시

이렇게 전체 흐름에서 Cursor가 백엔드 및 일부 프론트엔드 코드를 자동 생성해주며, 개발자는 주로 프롬프트를 작성하고 결과물을 디버깅하는 작업을 하게 됩니다.

2. Cursor 입문 / 목표

이 공부는 Cursor IDE를 활용해 풀스택 AI 애플리케이션을 개발하는 방법을 소개합니다. 기존에 JS/HTML/CSS/Next.js 등에 대한 경험이 전무했음에도 불구하고 Cursor를 통해 빠르고 효율적으로 학습하고 실제로 작동하는 애플리케이션을 만들 수 있음을 시연합니다.

  1. Cursor IDE 숙련도 향상

    • Cursor의 핵심 기능과 베스트 프랙티스를 익히고,
    • 실제 개발 과정에서 가장 효과적인 워크플로우를 학습

  2. 개인용 end-to-end 마이크로 SaaS 애플리케이션 완성

    • 강의가 끝날 때쯤에는 직접 사용할 수 있는 AI 기반 웹 서비스를 보유
    • 이 구조(“스켈레톤”)를 바탕으로 자신만의 프로젝트를 발전시킬 수 있음

  3. 소프트웨어 개발의 미래 참여

    • Cursor와 같은 AI 코파일럿 도구의 보급으로 인해,
    • 향후에는 특정 언어가 아닌 자연어(Natural Language) 중심으로 개발이 이루어질 것이라는 비전 제시
    • “파이썬 개발자, 자바스크립트 개발자” 구분 없이, 소프트웨어 개발자로서 협업하게 될 미래 전망
[개발자(수강생)]
  |
  | (프롬프트 작성)
  v
[Cursor IDE]
  | (자동 코드 생성)
  v
[Next.js 프로젝트 구조/코드]
  |
  |--- (백엔드 로직) ---> [LangChain.js & LLM 연동]
  |
  |--- (DB 연동) ---> [Supabase (PostgreSQL)]
  |
  v
[애플리케이션 구동 및 디버깅]
  | (오류/버그 확인)
  v
[Cursor IDE에 수정 지시 or 직접 코드 수정]
  |
  v
[완성된 풀스택 AI 애플리케이션]
  |
  | (배포)
  v
[Vercel (호스팅)]
  |
  v
[최종 사용자에게 서비스 제공]
  1. 개발자가 프롬프트를 통해 원하는 기능을 Cursor에 지시
  2. Cursor IDE가 코드 제안 및 생성 → 생성된 코드를 Next.js 프로젝트에 반영
  3. Next.js 백엔드 로직에서 LangChain.js를 활용하여 LLM과 통신
  4. 데이터는 Supabase(PostgreSQL)와 연동하여 저장/조회
  5. 디버깅 과정에서 Cursor에 다시 수정 지시를 내리거나, 직접 코드를 수정
  6. 완성된 애플리케이션을 Vercel에 배포하여 최종 사용자가 접근 가능

이와 같은 과정을 거쳐, Cursor를 활용한 AI 코디 개발 프로세스를 실제로 경험하고, 완전한 마이크로 SaaS 애플리케이션을 구축할 수 있게 됩니다.

3. Cursor 입문 / 커서란?

[개발자]
  | 
  | (프롬프트 작성) 
  v
[Cursor 에디터 & LLM 연동]
  |--- (인덱싱한 코드베이스/문서 참고) --->
  |                (맥락 기반 코드 생성)
  |<---------------------------------------
  |
  v
[자동생성 코드 제안]
  |
  | (검토 후 코드 반영 or 수정 요청)
  v
[프로젝트 코드에 통합]
  |  
  |--- (테스트/디버깅) --->
  |<--- (오류 발견 시 프롬프트 수정 or 직접 수정) 
  |
  v
[최종 코드 확정]
  |
  v
[개발자 : 기능 구현, 배포, 운영 등 다음 단계 진행]
  1. 개발자가 Cursor 에디터에 프롬프트(어떤 기능이 필요, 어떤 스타일로 코드를 작성 등)를 입력
  2. Cursor가 미리 인덱싱한 코드베이스(또는 문서) 정보를 활용하여 맥락에 맞는 코드를 생성
  3. 개발자가 제안된 코드를 검토 → 일부 수정 or 디버깅 필요 시 다시 Cursor에 재지시
  4. 완성된 코드를 프로젝트에 반영 → 테스트 & 디버깅
  5. 최종 코드가 확정되면 배포 등 다음 개발 단계 진행

이 흐름을 통해 개발자는 별다른 맥락 전환 없이 Cursor와 AI를 활용하여 빠른 코드 작성 및 수정을 진행하고, 필요한 경우 반복적으로 프롬프트를 조정하여 원하는 결과물에 도달할 수 있습니다.

3. Cursor 준비하기 / The GIST of Cursor.

여기선 Cursor라는 AI 기반 코드 에디터를 사용하여 Next.js 애플리케이션을 빠르게 구축하는 과정을 시연하고 있습니다. 다음의 시연 내용은 “어떤 식으로 Cursor를 활용해 개발 속도를 높이고, 원하는 기능을 구현할 수 있는가”를 보여주기 위한 예시이며, 다음 내용 전반에서 구체적인 설정과 오류 해결 과정을 자세히 다룰 예정입니다.

  1. .cursorrules 파일

    • LM(대형 언어 모델)에 전달하는 추가 맥락(context)을 정의하는 파일.
    • 프로젝트별 요구사항, 개발 스타일, 인물(Persona) 설정 등을 기입해두면, 모든 프롬프트 요청 시 자동으로 고려됨.

  2. Cursor Composer

    • 여러 개의 파일에 걸쳐서 동시에 기능을 추가하거나 수정할 수 있는 강력한 프로덕션 워크플로우 도구.
    • 한 번에 다중 파일 편집·생성 가능.
    • (예) 스크린샷, 텍스트 등을 붙여넣고, “이 내용을 참고해 이런 기능을 만들어줘”라고 요청 가능.

  3. Diff View & Checkpoints

    • Diff View: Cursor가 제안한 변경사항(추가/삭제)을 시각적으로 확인 가능.
    • Checkpoints: 프롬프트 요청 시마다 코드를 스냅샷(체크포인트)으로 저장.
    • 롤백(Reset) 기능으로 특정 시점 이전 코드 상태로 간편 복원 가능.

  4. Index(인덱싱) 기능

    • 코드베이스 전체나 문서 등을 미리 인덱싱해 두면, 모델이 더 프로젝트 맥락에 맞는 코드 제안을 해줌.
    • 새로운 라이브러리, 최신 문서 등을 재인덱싱하여 반영할 수 있음.

  5. 자동완성 & 버그 수정

    • “버튼 기능이 안 된다” 같은 문제가 생기면, 해당 코드를 Composer에 추가 후 “고쳐줘”라고 지시하면 자동으로 버그 수정 코드를 제안.
    • 개발자는 제안된 코드가 적절한지 검토 후 수락(accept) 또는 재지시(prompt 수정) 가능.