Vue.js로 CRUD 앱을 개발하는 방법?

소개 이 가이드에서는 vue js를 사용하여 완전한 기능을 갖춘 crud(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 알아봅니다 우리는 back4app의 힘을 활용하여 백엔드를 손쉽게 처리할 것입니다 이 튜토리얼은 back4app 프로젝트 설정, 동적 데이터 모델 작성, vue js로 crud 작업 구현을 안내합니다 먼저, basic crud app vue 라는 이름의 back4app 프로젝트를 설정하여 애플리케이션에 강력한 비관계형 데이터베이스를 제공합니다 수집 및 필드를 수동으로 구성하거나 back4app의 지능형 ai 에이전트를 사용하여 데이터 모델을 설계합니다 다음으로, back4app 관리 앱을 사용하여 데이터를 관리합니다 이 사용자 친화적인 드래그 앤 드롭 인터페이스를 통해 레코드를 쉽게 생성, 읽기, 업데이트 및 삭제할 수 있습니다 마지막으로, vue js 프론트엔드를 rest api 호출(axios 사용)을 통해 back4app과 통합하여 안전하고 효율적인 crud 작업을 실행합니다 이 튜토리얼이 끝날 무렵, 필수 crud 기능과 안전한 사용자 인증 및 데이터 관리를 수행하는 프로덕션 준비가 완료된 vue js 애플리케이션을 갖게 될 것입니다 주요 요점 확장 가능한 백엔드로 지원되는 vue js 기반 crud 앱을 구축하는 방법을 배우세요 유연한 백엔드를 구조화하고 이를 vue js 프로젝트와 연결하는 방법을 이해하세요 back4app의 직관적인 관리 앱을 사용하여 원활한 crud 작업을 수행하는 방법을 알아보세요 vue js 애플리케이션을 위한 docker 컨테이너화 등 배포 기술을 탐색하세요 전제 조건 시작하기 전에 다음을 확인하세요 새 프로젝트가 설정된 back4app 계정입니다 도움이 필요하신가요? back4app 시작하기 https //www back4app com/docs/get started/new parse app 를 참조하세요 vue js 개발 환경입니다 vue cli 또는 vscode와 같은 좋아하는 ide를 사용하세요 vue js, 현대 javascript 및 rest api에 대한 기본 지식입니다 필요한 경우 vue js 문서 https //vuejs org/guide/introduction html 를 복습하세요 1단계 – 프로젝트 설정 새로운 back4app 프로젝트 만들기 back4app 계정에 로그인하세요 대시보드에서 “새 앱” 버튼을 클릭하세요 프로젝트 이름을 지정하세요 basic crud app vue 그리고 설정을 완료하기 위해 안내에 따라 진행하세요 새 프로젝트 만들기 프로젝트를 만든 후, 대시보드에 나타나며 백엔드의 기초를 마련합니다 2단계 – 데이터 모델 설계 데이터 구조화 이 crud 애플리케이션을 위해, back4app 프로젝트 내에 여러 컬렉션을 정의할 것입니다 아래의 예시는 crud 기능에 필요한 핵심 컬렉션과 그 필드를 설명합니다 1\ 아이템 컬렉션 이 컬렉션은 각 아이템에 대한 세부 정보를 저장합니다 필드 데이터 유형 설명 id 객체 id 자동으로 생성된 고유 id 제목 문자열 항목의 이름 설명 문자열 항목에 대한 간략한 요약 생성일 날짜 항목 생성의 타임스탬프 업데이트됨 날짜 마지막 업데이트의 타임스탬프 2\ 사용자 수집 이 컬렉션은 사용자 자격 증명 및 인증 데이터를 처리합니다 필드 데이터 유형 설명 id 객체 id 자동으로 생성된 고유 id 사용자 이름 문자열 사용자를 위한 고유한 사용자 이름 이메일 문자열 고유한 이메일 주소 비밀번호 해시 문자열 로그인을 위한 암호화된 비밀번호 생성일 날짜 계정 생성 타임스탬프 업데이트됨 날짜 마지막 계정 업데이트 타임스탬프 back4app 대시보드에서 이러한 컬렉션과 필드를 수동으로 추가할 수 있습니다 새 클래스 만들기 데이터 유형을 선택하고, 필드 이름을 제공하며, 기본값을 설정하고, 필요한 경우 필드를 필수로 표시하여 필드를 추가할 수 있습니다 열 만들기 스키마 설정을 위한 back4app ai 에이전트 활용하기 통합된 back4app ai 에이전트는 설명에 따라 데이터 스키마를 자동으로 생성할 수 있습니다 이 도구는 설정 속도를 높이고 모델이 crud 요구 사항을 충족하는지 확인합니다 ai 에이전트 사용 방법 ai 에이전트 열기 back4app 대시보드에 로그인하고 프로젝트 설정에서 ai 에이전트로 이동합니다 데이터 모델 설명하기 필요한 컬렉션과 필드를 설명하는 자세한 프롬프트를 입력합니다 검토 및 확인 ai 에이전트가 제안된 스키마를 생성하면 이를 검토하고 구성을 구현하기 위해 확인합니다 예시 프롬프트 create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) 이 ai 기반 접근 방식은 시간을 절약하고 최적화된 일관된 데이터 모델을 보장합니다 3단계 – 관리자 앱 활성화 및 crud 작업 관리 관리자 앱 개요 back4app 관리자 앱은 백엔드 관리를 위한 코드 없는 인터페이스를 제공합니다 드래그 앤 드롭 기능을 통해 레코드를 생성, 읽기, 업데이트 및 삭제하는 crud 작업을 손쉽게 수행할 수 있습니다 관리자 앱 활성화 “더보기” 메뉴로 이동 하여 back4app 대시보드에서 “관리자 앱” 선택 후 “관리자 앱 활성화 ” 관리자 자격 증명 설정 을 위해 첫 번째 관리자 계정을 생성합니다 이 과정은 또한 역할(예 b4aadminuser ) 및 시스템 컬렉션을 설정합니다 관리자 앱 활성화 활성화한 후, 관리자 앱에 로그인하여 데이터를 관리하기 시작하세요 관리자 앱 대시보드 관리자 앱을 통한 crud 작업 관리 관리자 앱 내에서 다음을 수행할 수 있습니다 새 레코드 생성 새로운 데이터를 삽입하려면 모든 컬렉션(예 항목)에서 “레코드 추가”를 클릭하세요 레코드 편집 또는 보기 레코드를 선택하여 세부정보를 보거나 필드를 수정하세요 레코드 삭제 더 이상 필요하지 않은 레코드를 제거하세요 이 인터페이스는 데이터 처리를 간소화하고 전반적인 사용자 경험을 향상시킵니다 4단계 – vue js 애플리케이션을 back4app과 연결하기 백엔드가 준비되면, vue js 앱을 back4app과 연결할 시간입니다 axios를 사용한 rest api 호출 crud 작업을 수행하기 위해 axios를 통해 rest api 호출을 사용할 것입니다 axios 설치 프로젝트 디렉토리에서 다음 명령을 실행하세요 npm install axios axios 설정 파일에 axios 인스턴스를 생성하세요 (예 api js ) // api js import axios from 'axios'; const apiclient = axios create({ baseurl 'https //parseapi back4app com', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' } }); export default apiclient; vue 컴포넌트에서 crud 메서드 구현 항목을 가져오고 생성하는 방법의 예는 다음과 같습니다 // itemsservice js import apiclient from ' /api'; export default { fetchitems() { return apiclient get('/classes/items') then(response => response data results) catch(error => console error('항목 가져오기 오류 ', error)); }, additem(title, description) { return apiclient post('/classes/items', { title, description }) then(response => response data) catch(error => console error('항목 추가 오류 ', error)); }, updateitem(objectid, title, description) { return apiclient put(`/classes/items/${objectid}`, { title, description }) then(response => response data) catch(error => console error('항목 업데이트 오류 ', error)); }, deleteitem(objectid) { return apiclient delete(`/classes/items/${objectid}`) then(response => response data) catch(error => console error('항목 삭제 오류 ', error)); } }; 이 api 메서드를 vue 컴포넌트에 통합하여 앱의 데이터를 관리하세요 5단계 – 백엔드 보안 설정 액세스 제어 목록(acl) 구성 기록에 대한 acl을 설정하여 데이터를 보호하세요 예를 들어, 소유자만 볼 수 있거나 수정할 수 있는 항목을 생성하려면 import apiclient from ' /api'; export function createprivateitem(title, description, userid) { const acl = { " " { "read" false, "write" false }, \[userid] { "read" true, "write" true } }; return apiclient post('/classes/items', { title, description, acl acl }) then(response => response data) catch(error => console error('error creating private item ', error)); } 클래스 수준 권한(clp) 설정 back4app 대시보드를 사용하여 인증된 사용자만 특정 컬렉션에 접근할 수 있도록 clp를 구성하세요 이렇게 하면 기본적으로 백엔드가 안전하게 유지됩니다 6단계 – 사용자 인증 구현 사용자 등록 및 로그인 설정 back4app은 인증을 위해 내장된 사용자 컬렉션을 활용합니다 vue js 앱에서 rest api 호출을 사용하여 사용자 가입 및 로그인을 관리할 수 있습니다 방법은 다음과 같습니다 // authservice js import apiclient from ' /api'; export default { register(username, password, email) { return apiclient post('/users', { username, password, email }) then(response => response data) catch(error => console error('registration error ', error)); }, login(username, password) { return apiclient get('/login', { params { username, password } }) then(response => response data) catch(error => console error('login error ', error)); } }; 이 설정은 세션 관리, 비밀번호 재설정 및 추가 인증 기능을 처리할 수 있게 해줍니다 7단계 – vue js 애플리케이션 배포 back4app은 배포 프로세스를 간소화합니다 docker 컨테이너화를 포함한 다양한 방법으로 vue js 애플리케이션을 배포할 수 있습니다 7 1 vue js 애플리케이션 빌드 컴파일 및 번들 vue cli를 사용하여 앱을 컴파일합니다 npm run build 빌드 검토 출력 폴더(보통 dist/ )에 모든 필요한 파일이 포함되어 있는지 확인합니다 7 2 프로젝트 구조 개요 일반적인 vue js 프로젝트 구조는 다음과 같을 수 있습니다 basic crud app vue/ \| public/ \| src/ \| | components/ \| | | itemlist vue \| | | itemform vue \| | services/ \| | | api js \| | | itemsservice js \| | | authservice js \| | app vue \| | main js \| package json \| readme md 7 3 vue js 앱 도커화 컨테이너화된 배포를 선호하는 경우, 프로젝트 루트에 dockerfile 을 포함하세요 \# use a node image for building the app from node 16 as build \# set the working directory workdir /app \# install dependencies and build the app copy package json / run npm install copy run npm run build \# use an nginx image to serve the app from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 back4app 웹 배포로 배포하기 github 리포지토리 연결 당신의 vue js 프로젝트가 github에 호스팅되어 있는지 확인하세요 배포 구성 back4app 대시보드에서 웹 배포 옵션을 선택하고, 리포지토리(예 basic crud app vue )를 연결한 후 원하는 브랜치를 선택하세요 빌드 명령 설정 빌드 명령(예 npm run build )을 지정하고 출력 폴더(예 dist )를 지정하세요 배포 배포 를 클릭하고 앱이 라이브로 전환될 때까지 로그를 지켜보세요 8단계 – 최종 생각과 다음 단계 축하합니다! back4app과 통합된 vue js 기반 crud 애플리케이션을 구축하셨습니다 당신은 basic crud app vue 라는 이름의 프로젝트를 구성하고, 아이템과 사용자에 대한 컬렉션을 설정했으며, 데이터 관리를 위해 back4app 관리 앱을 사용했습니다 또한, vue js 프론트엔드를 rest api 호출을 통해 연결하고 보안 조치를 마련했습니다 다음 단계 애플리케이션 확장 고급 필터링, 상세 아이템 보기 또는 실시간 업데이트와 같은 기능을 통합하세요 백엔드 기능 향상 클라우드 기능을 탐색하고, 외부 api를 통합하거나 역할 기반 접근 제어를 구현하세요 계속 배우기 당신의 앱을 더욱 정교하게 다듬기 위해 back4app 문서 https //www back4app com/docs 및 추가 리소스를 참조하세요 코딩을 즐기고 vue js crud 애플리케이션을 구축하는 것을 즐기세요!