VS Code로 백엔드 구축하는 방법은?

vs code는 활성화된 mcp 서버가 있는 외부 도구를 mcp 프로토콜을 통해 통합할 수 있도록 해줍니다 이를 통해 ide를 떠나지 않고도 작업을 실행하고 해당 소스에서 데이터를 읽을 수 있습니다 이 튜토리얼에서는 back4app mcp 서버 를 사용하여 블로그 플랫폼의 백엔드와 사용자 인터페이스(ui)를 구축하고 back4app 컨테이너에 배포하는 방법을 배웁니다 주요 내용 vs code와 mcp 서버를 사용하여 back4app에서 백엔드를 구축하는 방법을 배웁니다 back4app에서 클래스 간의 관계가 어떻게 모델링되는지 탐색합니다 back4app의 내장 클래스를 사용하여 인증 및 역할 기반 권한 부여가 어떻게 구현되는지 탐색합니다 back4app 컨테이너를 사용하여 몇 번의 클릭으로 앱을 배포합니다 이 튜토리얼에서 구축된 라이브 블로그를 이 링크 에서 확인할 수 있습니다 전제 조건 이 튜토리얼을 따르려면 다음이 필요합니다 back4app 계정 계정이 없으면 무료로 가입할 수 있습니다 시스템에 설치된 vs code 백엔드 개발 개념에 대한 기본적인 이해 프로젝트 개요 블로그 이 튜토리얼에서는 블로그 게시물을 생성, 편집, 보기 및 삭제할 수 있는 간단한 블로그를 구축합니다 또한 댓글을 지원하며 블로그 게시물을 본 사람 수를 추적합니다 기본적으로 back4app에서 인증을 위해 제공되는 user 테이블 외에 블로그에는 세 개의 추가 테이블이 있습니다 게시물, 댓글 및 조회수 블로그에서 사용자가 계정을 생성하면 back4app은 user 테이블에 새 레코드를 생성하고 이후 요청에서 재사용할 수 있는 보안 세션 토큰을 발급합니다 인증된 사용자만 게시물을 게시할 수 있습니다 블로그 게시물이 게시되면 인증된 사용자와 인증되지 않은 사용자 모두 게시물을 읽을 수 있지만, 댓글을 달 수 있는 것은 인증된 사용자만 가능합니다 back4app 데이터베이스에서 블로그 게시물이 가져올 때마다 조회수가 증가합니다 이 기능을 남용하여 조회수를 부풀리는 것을 방지하기 위해 몇 가지 가드레일을 구현할 것입니다 이제 무엇을 구축할 것인지 대략적인 아이디어를 갖게 되었으니, 다음 섹션에서는 vscode를 back4app mcp 서버에 연결할 것입니다 vscode를 back4app mcp 서버에 연결하기 back4app 웹사이트로 이동하여 페이지 왼쪽 상단의 new app 버튼을 클릭합니다 “build a backend” 화면에서 앱 이름을 입력하고 create 버튼을 클릭합니다 앱 개요 페이지에서 mcp setup 버튼을 클릭합니다 “select your ide” 모달에서 vs code를 클릭하고 화면에 표시된 지침을 따라 vscode를 back4app mcp 서버에 자동으로 연결합니다 자동 설치 옵션을 따랐다면 계속 진행하기 전에 컴퓨터에서 vs code를 재시작해야 합니다 또는 모달을 수동 섹션으로 전환하여 back4app mcp 서버를 수동으로 연결할 수 있습니다(이 경우 구성에 대한 더 많은 제어를 제공합니다) back4app mcp 서버를 vscode에 연결하기 위해 모달에 설명된 단계를 따른 후, vscode 창의 검색 바를 클릭하고 “>mcp list servers”를 검색하여 명령을 실행하면 사용 가능한 mcp 서버 목록과 현재 상태(실행 중/중지됨)를 확인할 수 있습니다 이제 back4app mcp 서버를 vscode에 연결했으므로, 다음 섹션에서는 전체 애플리케이션을 구축할 프롬프트를 작성할 것입니다 블로그의 백엔드 구축 vscode와 github copilot을 사용하여 백엔드를 생성하려면 먼저 github copilot에서 에이전트 모드를 활성화해야 합니다 에이전트 모드를 활성화하려면 macos에서는 “ control + command + i” 를 누르고, windows에서는 “ctrl + i”를 누르세요 채팅 페이지에서 “ask” 레이블이 있는 드롭다운을 클릭하고 “agent” 모드를 선택하세요 다음으로, github copilot에 아래의 프롬프트 또는 유사한 내용을 입력하여 애플리케이션에 필요한 클래스를 생성하세요 위의 프롬프트는 “blogger”라는 새로운 back4app 백엔드를 생성하고, post, comment 및 view 클래스를 해당 필수 속성과 함께 채웁니다 이 프롬프트를 copilot로 실행하면, 채팅 창에 따라가는 단계를 기록하고 데이터에 변화를 주는 각 단계에 대해 허가를 요청합니다 최고의 결과를 얻으려면 03 mini 또는 claude sonnet 4와 같은 프리미엄 모델로 이러한 프롬프트를 실행하세요 copilot이 필요한 클래스를 생성한 후, 이제 블로그 데이터를 저장할 수 있는 구조화된 방법이 생겼습니다 다음 섹션에서는 앱의 인증을 구현할 것입니다 인증 구현하기 앱의 인증 요구 사항은 간단합니다 사용자가 블로그 게시물을 작성하고 댓글을 달기 위해서는 가입하고 로그인해야 합니다 그러나 인증 없이도 앱에서 블로그 게시물을 읽을 수 있습니다 아래의 프롬프트를 사용하여 앱의 인증 요구 사항을 구현할 수 있습니다 위의 프롬프트는 앱에 사용자 인증을 추가합니다 인증 로직은 사용자가 이메일, 사용자 이름 및 비밀번호를 사용하여 계정을 생성할 수 있도록 합니다 가입 후 사용자는 자동으로 로그인되며, 사용자가 로그아웃하면 현재 세션이 무효화됩니다 copilot이 인증 로직을 구현한 후, 사용자는 안전하게 가입하고 로그인할 수 있는 방법을 갖게 됩니다 다음 섹션에서는 게시물 및 댓글 생성을 위한 로직을 구현할 것입니다 게시물 및 댓글 생성하기 게시물 및 댓글 생성 기능을 구현하려면 두 개의 cloud functions와 인증된 사용자가 게시물을 게시하고 댓글을 추가할 수 있도록 지원하는 후크를 만들어야 합니다 아래의 프롬프트를 copilot에 제공하여 지원 후크를 생성하는 것으로 시작하세요 위의 프롬프트는 게시물이나 댓글이 생성되기 전에 수행되는 검사/작업을 구현합니다 게시물의 경우, 제목을 사용하여 고유한 슬러그가 생성되고 상태가 게시됨으로 변경되며, 현재 날짜가 게시 날짜로 설정됩니다 댓글의 경우, 연결된 게시물의 댓글 수가 단순히 업데이트됩니다 이제 위의 beforesave 훅과 관련된 클라우드 기능을 아래의 프롬프트 또는 유사한 방법으로 생성하세요 위의 프롬프트는 사용자가 게시물과 댓글을 생성할 수 있도록 하는 두 개의 클라우드 코드 기능을 노출합니다 또한 분당 5개의 게시물 생성과 15개의 댓글로 제한하여 앱을 남용으로부터 보호합니다 게시물과 댓글을 생성하는 데 관련된 주요 논리는 이전 프롬프트에서 생성된 beforesave 훅에 이미 구현되어 있습니다; 이 프롬프트는 프론트엔드가 사용할 수 있는 api를 노출합니다 copilot이 위의 논리를 구현한 후, 사용자는 게시물을 생성하고 댓글을 달 수 있는 방법을 갖게 됩니다 다음 섹션에서는 이러한 댓글과 게시물을 업데이트하는 데 필요한 논리와 각 블로그 게시물의 조회수를 계산하는 데 필요한 논리를 구현합니다 게시물, 댓글 및 조회수 업데이트 사용자가 자신의 게시물을 편집하고, 자신의 댓글을 수정하고, 페이지 조회수를 등록할 수 있는 기능을 구현하려면 두 개의 클라우드 기능이 필요합니다 updatepost, updatecomment 및 aftertrigger 아래의 프롬프트 또는 유사한 방법으로 updatepost 클라우드 기능을 구현할 수 있습니다 위의 프롬프트는 게시물을 업데이트하는 기능을 생성합니다 이는 업데이트가 게시물을 생성한 사용자만 수행할 수 있도록 보장하며, 제목이 변경되면 슬러그를 재생성합니다 아래의 프롬프트 또는 유사한 방법을 사용하여 updatecomment 클라우드 함수를 구현할 수 있습니다 위의 프롬프트는 게시물의 댓글을 업데이트하는 함수를 생성합니다 업데이트는 댓글 작성자만 수행할 수 있습니다 아래의 프롬프트 또는 유사한 방법을 사용하여 recordview 클라우드 함수를 구현할 수 있습니다 위의 프롬프트는 post 클래스에 afterfind 트리거를 생성합니다 백엔드가 단일 게시물(객체 id로 가져온) 을 반환할 때마다 트리거는 해당 게시물(로그인한 경우 현재 사용자) 을 가리키는 새 view 레코드를 자동으로 생성하고 게시물의 viewcount를 증가시킵니다 쿼리가 여러 게시물을 반환하면 트리거는 아무 작업도 하지 않습니다 이로써 블로그의 대부분 기능이 완료되었습니다 다음으로 사용자가 게시물을 삭제할 수 있는 기능을 구현할 것입니다 게시물 삭제 게시물을 삭제하려면 사용자가 해당 게시물을 작성한 사람이어야 합니다 게시물이 삭제되면 관련된 모든 콘텐츠(뷰, 댓글)도 함께 삭제됩니다 아래의 프롬프트 또는 유사한 방법을 사용하여 게시물 삭제 기능을 구현할 수 있습니다 위의 프롬프트는 게시물을 삭제하기 위한 필요한 논리를 구현합니다 이러한 추가로 인해 백엔드는 이제 전체 콘텐츠 생명 주기를 다루며, 저자들이 게시물을 게시, 수정 및 삭제할 수 있게 하고, 독자들이 논의할 수 있게 하며, 각 게시물에 대한 정확한 조회 통계를 유지합니다 다음 섹션에서는 애플리케이션의 ui를 생성할 것입니다 프론트엔드 생성 back4app에서 백엔드를 생성할 때 copilot이 가진 컨텍스트를 활용하여, 앱의 스키마와 요구 사항에 맞는 프론트엔드를 생성하도록 요청할 수 있습니다 아래의 프롬프트를 사용하여 예약 스케줄러를 위해 이를 달성할 수 있습니다 위의 프롬프트나 유사한 것을 사용하면, copilot은 백엔드의 스키마에 맞는 프론트엔드를 생성하고 이를 백엔드에 연결합니다 copilot이 제공한 지침을 사용하여 앱을 실행하고 원하는 대로 조정하세요 이제 프로젝트가 완료되었으므로, 다음 섹션에서는 back4app 컨테이너에 배포할 것입니다 back4app 컨테이너에 앱 배포하기 back4app 컨테이너를 사용하면 dockerfile과 github 리포지토리를 통해 앱을 쉽게 배포할 수 있습니다 back4app 컨테이너에 앱을 배포하려면 먼저 리포지토리에 dockerfile을 포함해야 합니다 아래의 프롬프트를 사용하여 claude에게 생성하도록 요청할 수 있습니다 또는 아래에 제공된 dockerfile을 사용할 수 있습니다 dockerfile을 추가하고 github에 푸시한 후, back4app 앱 대시보드로 이동하여 대시보드 드롭다운을 클릭하고 웹 배포 플랫폼 옵션을 선택합니다 배포 페이지에서 “웹 앱 배포” 버튼을 클릭하고 back4app에 배포할 리포지토리에 대한 액세스를 부여하세요 배포할 앱을 선택하고 배포 세부정보를 입력한 후 배포 버튼을 클릭하세요 버튼을 클릭하면 배포 프로세스가 시작되며, 완료되면 앱에 대한 라이브 url을 받게 됩니다 이 튜토리얼에서 만든 라이브 블로그를 이 링크 로 확인할 수 있습니다 결론 이 기사에서는 back4app mcp 서버와 github copilot을 사용하여 완전한 블로깅 플랫폼을 구축한 후 back4app containers로 배포했습니다 이것은 아이디어 구상에서 출시까지 최소한의 오버헤드로 이동할 수 있게 해주는 back4app의 전체 도구 모음을 보여줍니다 다음 단계로는 소셜 미디어 통합, 새로운 댓글에 대한 자동 이메일 알림, 고급 검색 기능 또는 게시물 참여 및 독자 행동에 대한 분석과 같은 기능으로 프로젝트를 확장할 수 있습니다 이 모든 향상된 기능은 동일한 back4app 워크플로우에 자연스럽게 통합됩니다 github copilot으로 새로운 클래스나 클라우드 기능을 설계하고 정의하고, beforesave 훅으로 보안을 강화하며, back4app containers를 통해 업데이트를 배포합니다 이 접근 방식은 사용자에게 방해가 되지 않으면서 블로그에 새로운 기능을 추가할 수 있게 해줍니다