커서를 사용하여 백엔드를 구축하는 방법?

현대 웹 및 모바일 프로젝트는 종종 첫 번째 장애물에서 멈추게 됩니다 아이디어를 생산 준비가 된 백엔드로 전환하는 것입니다 데이터 모델을 수동으로 설계하고, 보일러플레이트 crud 로직을 작성하고, 인프라를 배포한 다음 프론트엔드를 동기화하는 데는 며칠 또는 몇 주의 귀중한 엔지니어링 시간이 소모될 수 있습니다 이 튜토리얼은 back4app의 백엔드 플랫폼, 모델 컨텍스트 플랫폼(mcp) 프로토콜, 그리고 cursor의 ai 지원 ide가 함께 그 마찰을 어떻게 없애는지를 보여줍니다 간단한 이벤트 관리 앱의 생성 과정을 통해 이러한 도구들이 어떻게 완전한 기능을 갖춘 백엔드와 일치하는 프론트엔드를 스캐폴드, 배포 및 통합할 수 있는지를 확인할 수 있습니다 주요 내용 cursor의 ai 에이전트와 mcp 프로토콜을 사용하여 back4app에서 몇 분 만에 생산 준비가 된 백엔드를 스캐폴드하는 방법을 알아보세요 조직자와 참석자 워크플로우를 깔끔하게 분리하는 재사용 가능한 validateuserrole 헬퍼를 사용하여 깔끔한 역할 기반 접근 제어를 시행하는 방법에 대한 통찰력을 얻으세요 back4app rest api를 자동으로 소비하는 반응형 next js 프론트엔드를 생성하고 연결하는 방법을 배우세요 back4app 컨테이너를 사용하여 github에서 전체 스택 이벤트 관리자 앱을 기록적인 시간에 배포하는 컨테이너화 및 원클릭 배포를 탐색하세요 프로젝트 개요 이 튜토리얼에서는 사용자가 이벤트를 생성하고, 관심 있는 이벤트에 등록하고, 다가오는 이벤트나 등록된 이벤트를 보고, 필요할 때 등록을 취소할 수 있는 간단한 이벤트 관리자 앱 을 구축합니다 이 앱의 백엔드는 back4app의 mcp 도구를 사용하여 구축할 것입니다 mcp 도구는 대형 언어 모델(llms) https //en wikipedia org/wiki/large language model 인 claude 4 소네트 및 cursor와 같은 ai 에이전트/도구와 함께 back4app 백엔드와 원활하게 상호작용할 수 있게 해줍니다 mcp를 사용하면 ai 코드 어시스턴트가 앱을 생성하고, 데이터베이스를 관리하며(crud 작업, 쿼리), 클라우드 코드를 배포하고, 사용자 인증을 처리하는 등 back4app 프로젝트에서 다양한 작업을 수행할 수 있습니다 이 튜토리얼에서는 cursor , 대형 언어 모델을 통합하여 코드 작성, 리팩토링 및 개발 환경 내에서 코드 이해를 돕는 ai 기반 코드 편집기를 사용할 것입니다 cursor와 mcp를 사용하면 자연어를 사용하여 백엔드 작업을 요청할 수 있어 개발 프로세스가 더 빠르고 직관적입니다 프로젝트 설정 이 튜토리얼에서 달성할 내용을 더 잘 이해했으니, cursor와 mcp로 백엔드를 구축하기 위한 프로젝트 요구 사항을 설정하세요 사전 요구 사항 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app 계정 계정이 없으면 무료로 가입할 수 있습니다 https //www back4app com/signup cursor https //www cursor com/ 가 개발 머신에 설치되어 있어야 합니다 백엔드 개발 개념에 대한 기본적인 이해 node js v22 이상 1단계 back4app 프로젝트 만들기 첫 번째 단계는 back4app 계정에 로그인하고 “ eventmanager ” 라는 새 프로젝트를 만드는 것입니다 2단계 계정 키 만들기 cursor 내에서 mcp를 설정하고 mcp 서버가 back4app 계정에 접근할 수 있도록 back4app 계정 키를 생성해야 합니다 계정 키 설정으로 이동합니다 그곳에서 계정 키에 이름을 지정하고 + 버튼을 클릭하여 생성합니다 이제 생성된 계정 키와 만료 날짜를 확인할 수 있습니다 3단계 cursor 내에서 mcp 구성하기 cursor와 back4app을 연결하는 방법을 배우려면 이 비디오를 시청하세요 cursor 앱을 열고 설정 > cursor 설정 > mcp 로 이동하면 cursor ai에서 mcp 서버를 구성할 수 있는 페이지를 찾을 수 있습니다 “ 새 글로벌 mcp 서버 추가 ” 버튼을 클릭하여 mcp json 파일을 생성합니다 이 파일 내에서 mcp에 대한 구성을 작성할 것입니다 cursor에서 back4app mcp 서버를 구성하려면 다음 구성을 mcp json { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } 이제 \<account key> 를 3단계에서 생성한 저장된 back4app 계정 키로 바꾸십시오 이 튜토리얼을 windows 머신에서 따르고 있다면 command 키의 값을 npx cmd 로 변경하십시오 이러한 구성이 완료되면 back4app mcp와 cursor를 사용하여 back4app 백엔드를 구축할 준비가 되었습니다 cursor와 back4app으로 백엔드 구축하기 귀하의 이벤트 관리자는 다음과 같은 기능을 갖추게 됩니다; 사용자가 새 이벤트를 생성할 수 있습니다 사용자가 이벤트에 등록할 수 있습니다 사용자가 등록한 이벤트 목록을 표시합니다 사용자의 다가오는 이벤트 목록을 표시합니다 사용자가 이벤트 등록을 취소할 수 있습니다 이 기능을 만족시키기 위해, 샘플 데이터베이스 스키마는 다음과 같습니다 커서를 열고 채팅 을 전환하여 ai 패널, 을 선택한 후 에이전트 모드를 선택하여 앱을 변경합니다 또한 새로운 claude 4 sonnet 모델과 같은 선호하는 llm을 선택합니다 채팅 상자 안에 설계된 스키마를 생성하기 위한 프롬프트를 작성합니다 이를 달성하기 위한 예시 프롬프트는 다음과 같습니다 design a back4app backend database for my "event manager" application \ the app allow users to create events or register for created events as an organizer or attendee \ an organizer can then create events for attendees to view, register for and see their registered events \ an attendee can cancel events they previously registered for create the following classes to support these features; user name(string), role (organizer or attendee), email(string) event title(string), location(string), date(date), eventimage(file) and organizer(pointer = user) registration event(pointer = event), attendee(pointer = user), registered(boolean) ensure you create all specified pointer relationships mcp의 도구를 사용하기 위한 요청을 승인해야 합니다 승인되면 요청이 실행됩니다 데이터베이스가 성공적으로 생성되었다는 응답을 받을 수 있어야 합니다 새로 생성된 클래스에 대해 앱 대시보드 를 확인하여 성공을 확인할 수 있습니다 이제 백엔드를 생성하고 애플리케이션의 데이터베이스 테이블을 추가했으므로 애플리케이션 로직을 구현할 것입니다 mcp로 사용자 기능 구현하기 애플리케이션 설명에서 이 앱은 별도의 유형의 사용자가 이벤트 생성 및 등록과 같은 다양한 작업을 수행할 수 있도록 해야 합니다 여기에서 이러한 기능을 처리하기 위해 구축된 함수를 정의할 것입니다 액세스 제어 구현하기 앱의 주요 유틸리티 함수는 validateuserrole 로 호출됩니다 이 함수는 어떤 기능이 어떤 사용자 역할에 대해 사용 가능한지를 검증하는 역할을 합니다 다음 프롬프트를 사용하여 이 함수를 생성할 수 있습니다 \ create a utility function inside a new `utils js` file that validates if a function is being called by a user with the required role \ if a user does not have the required role then the function will not continue and throw an error 계속해서 utils js 가 validateuserrole 로 생성되었는지 확인하세요 사용자 기능 생성하기 사용자 생성 기능을 구현하기 위해 사용자 이름 , 비밀번호 , 이메일, 및 역할 이 전달되어야 합니다 누구나 이 함수를 호출할 수 있습니다 아래 프롬프트를 사용하여 사용자 생성 로직을 구현하세요 \ create an asynchronous cloud code function named `createuser` inside the backend's `main js` \ this function creates a user with the following string parameters username, role, email, and password \ the function should validate all input to ensure they conform to expected types and formats before saving \ check if a role was provided, if not, throw an error with a message indicating that a role is required if present, compare the inputed role against the list of valid roles; \["organizer", "attendee"] if inputed role is not valid, throw an error message "select a valid role" if the role is valid, allow the save to proceed as normal \ ensure the user being created/saved does not already exist 'user' by searching through the saved usernames 함수가 성공적으로 생성되었다는 응답을 받아야 합니다 이제 이벤트 관리자 를 위해 새로운 사용자를 생성할 수 있습니다 이벤트 생성 기능 한 주최자 역할은 새로운 이벤트를 생성할 수 있습니다 이를 위해 함수는 새로운 이벤트 객체를 생성하고 주최자 역할을 가진 사용자가 함수를 호출하고 있는지 검증합니다 이 검증을 달성하기 위해 이전에 생성된 유틸리티 함수를 사용할 것입니다 아래 프롬프트를 사용하여 이 로직을 구현하세요 create an asynchronous cloud function that allows users to create a new event in the app use the utility function in `utils js` to ensure this can only be called by a user with the organizer role \ this function will take in the following parameters title(string), location(string), date(date), image(file), organizer(pointer) \ the event organizer attribute will have a pointer value to the user that calls the function \ perform proper error handling if the wrong user calls this function or if wrong parameter types are passed 함수는 main js 파일 내에 생성됩니다 더미 데이터를 사용하여 cursor 내에서 간단한 테스트를 수행하고 노출된 back4app rest api를 호출할 수 있습니다 이벤트 기능 등록 사용자가 이벤트에 등록하려면 참석자 역할이 있어야 합니다 이 역할을 가진 모든 사용자는 3가지 기능에 접근할 수 있습니다 첫 번째는 생성된 이벤트에 등록하는 것입니다 이 기능은 새로운 등록 객체를 생성하고 사용자의 등록 불리언 값을 true로 설정합니다 이 논리를 달성하기 위해 다음 프롬프트 또는 유사한 프롬프트를 입력하세요 generate an asynchronous cloud code function called `registerforevent` use the validate role utility function to ensure only users with the attendee role can sucessfully call this \ `registerforevent` will accept 2 paramaters from a request body; `useid` and `eventid` \ the function should validate all paramaters are of the required type and formats expected in the registration class \ the function will register a user to an event by creating a new object in the registration class this object will set "registered" to a boolean type value of true \ upon successfully registering for event, the function should throw an operation sucessfull message 다음으로, 사용자가 등록된 모든 이벤트를 쿼리하는 함수가 필요합니다 이 함수를 listupcomingevents 라고 부를 것입니다 이 함수를 다음과 같은 프롬프트로 생성하세요 create a simple async cloud code function called `listupcomingevents` \ this function will query for all upcoming events a user(attendee) has registered for \ it must only show events with future dates \ perform appropriate error handling if no upcoming registered events are found 함수가 main js 안에 성공적으로 생성되었는지 확인하고 필요에 따라 수동으로 또는 커서 프롬프트를 사용하여 코드를 수정합니다 이 프롬프트에서 함수 매개변수가 cursor의 ai 에이전트에 대해 지정되지 않았음을 주목하십시오 이는 에이전트가 데이터베이스 스키마를 검사하여 함수가 요구하는 매개변수를 유추하는 방법을 보여줍니다 그러나 프롬프트에 필요한 만큼의 맥락을 제공하는 것은 항상 좋은 습관입니다 등록 취소 기능 앱의 요구 사항을 충족하기 위한 마지막 기능은 등록 취소 기능입니다 이를 구현하기 위해 함수는 선택된 이벤트 등록의 eventid 와 userid 를 가져와서 해당 불리언 값을 업데이트합니다 위의 논리를 비슷한 프롬프트를 사용하여 백엔드 애플리케이션에 추가합니다 create an asynchronous cloud code function called `canceleventregistration` that cancels an event for a user(attendee) when called \ this function is responsible for canceling an event the user is registered for and setting the boolean value of `registration resgistered` in the object to false \ when a users event is sucessfully canceled, delete that registration object from the class and throw a success response \ implement error handling to catch and log any issues during the process, returning a relevant error message in case of failure cursor와 mcp가 생성한 모든 코드를 검토하고 필요에 따라 수정할 수 있습니다 앱 대시보드 → 클라우드 코드 , 아래 이미지와 같이 이 기능들로 인해 이제 이벤트 관리자 애플리케이션의 백엔드에 대한 모든 요구 사항을 충족했습니다 cursor를 사용하여 mcp로 백엔드에 대한 프론트엔드를 구축하세요 이제 백엔드가 성공적으로 구축되고 배포되었습니다 앱을 위한 프론트엔드 ui를 스캐폴딩할 것입니다 이 ui는 back4app의 rest api 엔드포인트를 사용하여 back4app 백엔드를 소비합니다 이를 위해 mcp는 백엔드 스키마 메타데이터를 가져오고, cursor는 이 메타데이터를 사용하여 애플리케이션의 ui를 다음 프롬프트 사양으로 구축합니다 build a responsive frontend app in next js that connects and consumes my "event management" backend app this frontend should have the following pages; \ a signup/signin page with a form for new and old users \ a homepage showing all events created in the backend \ if the signed in user has the attendee role the homepage should also show all upcoming registered events for the user \ a register for event page \ be sure to initialize parse properly with event manager `application id` and `javascript key` handle dynamic routing for both user roles and make the ui intuitive 이 프롬프트는 단일 단계에서 next js 프론트엔드를 스캐폴드하는 것을 목표로 합니다 cursor의 생성에 만족하지 않으면 항상 추가 변경을 요청할 수 있습니다 cursor가 이를 처리하지 못할 경우를 대비하여 애플리케이션 id 및 자바스크립트 키 로 parse가 올바르게 초기화되었는지 확인하세요 이러한 변수는 백엔드 애플리케이션에 요청을 할 수 있게 해줍니다 위 이미지는 cursor와 back4app의 mcp를 사용하여 단일 명령으로 생성된 next js 애플리케이션을 보여줍니다 애플리케이션 배포 마지막으로, back4apps의 웹 호스팅 기능을 사용하여 전체 스택 애플리케이션을 배포합니다 next js 애플리케이션을 배포하려면, 프로젝트의 루트 디렉토리에 dockerfile 을 생성하고 다음 코드를 붙여넣으세요 \# stage 1 build the next js app from node 20 alpine as builder workdir /app copy package json package lock json / run npm install copy \# build with default or placeholder env vars arg next public parse application id arg next public parse javascript key arg next public parse server url run npm run build \# stage 2 run the next js app from node 20 alpine workdir /app copy from=builder /app / expose 3000 cmd \["npm", "start"] 이 dockerfile은 다음과 같은 작업을 수행합니다 공식 node js 14 런타임에서 시작합니다 작업 디렉토리를 /app 로 설정합니다 docker 이미지에 package json 및 package lock json 을 복사하고 종속성을 설치합니다 나머지 애플리케이션 코드를 docker 이미지에 복사합니다 next js 애플리케이션을 빌드합니다 애플리케이션을 위해 포트 3000을 노출합니다 애플리케이션을 시작하는 명령을 정의합니다 또한 dockerignore 파일이 필요합니다 프로젝트의 루트 디렉토리에 하나를 생성하고 다음 명령을 추가하세요 \# node modules (reinstalled in docker) node modules \# next js build output next out \# logs npm debug log yarn debug log yarn error log pnpm debug log \# env files (optional — only if you handle secrets another way) env env local env development env production env test \# os / ide / editor junk ds store thumbs db vscode idea \# git git gitignore 이제 터미널에서 다음 명령을 실행하여 docker 이미지를 빌드하고 테스트하세요 docker build t event manager frontend docker run p 3000 3000 event manager frontend 구축한 docker 이미지는 http //localhost 3000 애플리케이션이 의도한 대로 실행되는지 확인했다면, 코드를 github 리포지토리에 푸시하고 back4app을 통해 배포할 시간입니다 back4app 대시보드에서 event manager 앱을 열고 웹 배포 거기에서 back4app이 귀하의 계정 리포지토리를 볼 수 있도록 권한을 부여하고 배포하려는 프론트엔드 앱을 푸시한 리포지토리를 선택하세요 프로젝트에 이름을 지정하고 (예 event manager) 위 이미지에 표시된 “배포” 버튼을 클릭하여 애플리케이션을 배포하세요 성공하면 배포 준비 완료 메시지를 볼 수 있습니다 아래 배포 화면에서 back4app이 제공한 링크로 웹에서 배포된 애플리케이션에 접근할 수 있습니다 축하합니다, back4app에서 애플리케이션을 성공적으로 배포했습니다 이 튜토리얼에서 구축한 event manager 프로젝트를 여기 https //eventmanager3 3jqdnkfk b4a run/ 에서 방문할 수 있습니다 결론 이 기사에서는 사용자가 주최자 또는 참석자로서 이벤트를 관리할 수 있는 백엔드 이벤트 관리 앱을 설계하고 배포했습니다 또한 next js를 사용하여 애플리케이션의 프론트엔드를 구축하고, 개발 속도를 높이기 위해 cursor를 사용했습니다 cursor의 ai 강화 개발 환경과 back4app의 mcp를 결합하면 개발 시간을 대폭 단축하고 back4app 백엔드를 더 쉽게 구축할 수 있는 강력한 개발 워크플로우가 생성됩니다 행복한 코딩!