Vue 프론트엔드를 구축하고 백엔드에 연결하는 방법?

이 튜토리얼에서는 vue를 사용하여 할 일 목록 애플리케이션을 구축하고 이를 관리되는 백엔드 서비스에 연결합니다 이 가이드는 필수 crud(생성, 읽기, 업데이트, 삭제) 작업을 마스터하고 직관적인 사용자 인터페이스를 구축하고자 하는 분들에게 완벽합니다 마지막에는 귀하의 앱이 back4app으로 구동되는 백엔드와 완전히 상호작용하게 됩니다 풀스택 애플리케이션 개발은 복잡한 백엔드 설정, 데이터베이스 관리 및 사용자 인증을 포함할 수 있습니다 뛰어난 vue 프론트엔드를 제작하는 데 집중할 수 있도록, 우리는 back4app을 사용하여 백엔드를 손쉽게 관리할 것입니다 back4app은 즉시 사용할 수 있는 데이터베이스, 인증, 사용자 정의 서버 로직을 위한 클라우드 코드 및 앱과 통합할 수 있는 sdk를 제공합니다 이를 통해 서버 유지 관리의 번거로움 없이 확장 가능한 애플리케이션을 배포할 수 있습니다 주요 내용 이 튜토리얼을 따르면 다음을 수행할 수 있습니다 업계 표준 도구를 사용하여 현대적인 vue 프로젝트를 설정합니다 애플리케이션의 데이터를 처리하기 위해 백엔드 서비스를 원활하게 통합합니다 동적인 할 일 목록 을 위한 필수 crud 작업을 구현합니다 back4app에서 컨테이너화된 워크플로우를 통해 완전한 기능을 갖춘 애플리케이션을 배포합니다 전제 조건 시작하기 전에 다음을 확인하세요 node js 및 npm 이 컴퓨터에 설치되어 있는지 확인하세요 설치 여부는 node v 와 npm v 로 확인할 수 있습니다 기본 vue 지식 , 구성 요소, 반응형 데이터 및 이벤트 처리 포함 vue 3의 composition api에 대한 친숙함이 도움이 됩니다 백엔드 서비스를 관리하기 위한 back4app 계정 이 필요합니다 아직 등록하지 않았다면 back4app https //www back4app com/ 에서 등록하세요 이 모든 것이 준비되면 프로젝트를 설정할 준비가 된 것입니다 프로젝트 설정 로컬 개발 환경을 준비하고 vite로 vue 프로젝트를 초기화하여 빠르고 현대적인 빌드 경험을 시작하세요 node js (lts 버전) 이 설치되어 있는지 확인하세요 설치되어 있지 않다면 nodejs org https //nodejs org/ 에서 다운로드하세요 다음 명령어를 실행하여 vue 프로젝트를 생성하세요 npm create vite\@latest todo app 3\ 프로젝트 디렉토리로 변경 cd todo app 4\ 의존성 설치 npm install 5\ 모든 것이 작동하는지 확인하기 위해 개발 서버를 시작 npm run dev 제공된 url을 브라우저에서 엽니다 vue 프론트엔드가 준비되면, 다음 단계는 back4app에서 백엔드를 설정하는 것입니다 todo 백엔드 만들기 back4app은 parse , nosql 데이터베이스, 사용자 인증, 클라우드 코드 및 자동 api 생성을 갖춘 완전 관리형 백엔드 서비스를 제공합니다 백엔드를 만들기 위해 다음 단계를 따르세요 로그인 하여 back4app 대시보드 https //www back4app com/ 를 클릭하고 "새 앱 만들기" 앱 이름 지정하기 (예 todoapp ) 및 nodejs/parse 를 백엔드 유형으로 선택합니다 "데이터베이스" > "브라우저"로 이동하여, "클래스 만들기" , 그리고 "사용자 정의" 를 선택합니다 클래스를 task 로 이름 짓고, 공개 읽기 및 쓰기를 허용하는 권한을 설정합니다 (나중에 이를 세부 조정할 수 있습니다) "task" 클래스에 다음 필드를 추가합니다 title (문자열) – 작업 제목 description (문자열) – 작업에 대한 세부정보 completed (부울) – 작업 완료 상태 duedate (날짜) – 작업 마감일 "저장" 을 클릭하여 스키마를 생성합니다 vue와 back4app 통합하기 당신은 parse javascript sdk 를 사용하여 vue 프론트엔드와 back4app 백엔드 간의 통신을 할 것입니다 parse sdk 설치하기 npm install parse sdk를 구성하려면 src/main js 를 편집하세요 sdk를 가져오고 application id 와 javascript key 를 back4app 대시보드에서 초기화하세요 ( 앱 설정 > 보안 및 키 ) import { createapp } from 'vue'; import app from ' /app vue'; import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; createapp(app) mount('#app'); 백엔드가 연결되었으므로 이제 to do 리스트 인터페이스를 구축하고 crud 작업을 통합할 수 있습니다 프론트엔드 개발하기 당신의 vue 애플리케이션은 작업을 추가, 표시, 업데이트 및 제거하는 구성 요소로 구성됩니다 vue의 반응성을 활용하여 상태를 관리하고 원활한 업데이트를 보장할 것입니다 구성 요소 구조화하기 당신의 vue 구성 요소를 보관하기 위해 components 폴더를 src 안에 생성하세요 mkdir src/components touch src/components/taskform vue src/components/tasklist vue src/components/taskitem vue taskform vue 이 컴포넌트는 새로운 작업을 추가하는 기능을 처리합니다 사용자 입력을 캡처하기 위해 제어된 양식을 사용합니다 \<template> \<form @submit prevent="handlesubmit"> \<input type="text" placeholder="task title" v model="title" required /> \<input type="text" placeholder="description" v model="description" required /> \<button type="submit">add task\</button> \</form> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskform', props \['fetchtasks'], data() { return { title '', description '' }; }, methods { async handlesubmit() { try { const task = parse object extend('task'); const task = new task(); task set('title', this title); task set('description', this description); task set('completed', false); await task save(); this fetchtasks(); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } }; \</script> tasklist vue 이 컴포넌트는 작업 목록을 표시하고 작업 작업을 통합합니다 \<template> \<div> \<p v if="!tasks length">no tasks available\</p> \<taskitem v for="task in tasks" \ key="task id" \ task="task" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import taskitem from ' /taskitem vue'; export default { name 'tasklist', components { taskitem }, props \['tasks', 'fetchtasks'] }; \</script> taskitem vue 이 컴포넌트는 개별 작업을 나타내며 완료로 표시하거나 삭제하는 작업을 포함합니다 \<template> \<div \ class="\['task item', { completed task completed }]"> \<div> \<h3>{{ task title }}\</h3> \<p>{{ task description }}\</p> \</div> \<div> \<button @click="handlecomplete"> {{ task completed ? 'undo' 'complete' }} \</button> \<button @click="handledelete">delete\</button> \</div> \</div> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskitem', props \['task', 'fetchtasks'], methods { async handlecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(this task id); tasktoupdate set('completed', !this task completed); await tasktoupdate save(); this fetchtasks(); } catch (error) { console error('error updating task ', error); } }, async handledelete() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this fetchtasks(); } catch (error) { console error('error deleting task ', error); } } } }; \</script> app vue에서 상태 관리하기 주 컴포넌트에서 vue의 반응형 데이터와 생명주기 훅을 사용하여 작업 목록을 관리합니다 \<template> \<div class="container"> \<h1>to do list\</h1> \<taskform \ fetchtasks="fetchtasks" /> \<tasklist \ tasks="tasks" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import { ref, onmounted } from 'vue'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform vue'; import tasklist from ' /components/tasklist vue'; export default { name 'app', components { taskform, tasklist }, setup() { const tasks = ref(\[]); const fetchtasks = async () => { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } }; onmounted(fetchtasks); return { tasks, fetchtasks }; } }; \</script> 애플리케이션 스타일링 기본 스타일링을 추가하기 위해 styles css 파일을 src 에 생성하세요 container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } 스타일시트를 main js 임포트하세요 import ' /styles css'; back4app 웹 배포에서 프론트엔드 배포하기 back4app 웹 배포를 통해 docker로 프로덕션을 위한 vue 애플리케이션을 컨테이너화할 수 있습니다 프로덕션을 위한 vite 구성 컨테이너화된 환경에 맞게 기본 경로를 설정하기 위해 vite config js 를 조정하세요 import { defineconfig } from 'vite'; import vue from '@vitejs/plugin vue'; export default defineconfig({ plugins \[vue()], base ' /', }); 프로덕션 빌드를 생성하세요 npm run build dockerfile 생성하기 루트 디렉토리에 dockerfile 을 생성합니다 \# stage 1 build the vue app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 로컬에서 docker 컨테이너 테스트하기 docker 이미지를 빌드합니다 docker build t todo frontend 컨테이너를 실행합니다 docker run p 8080 80 todo frontend 다음 주소를 방문하여 http //localhost 8080 에서 vue 앱이 올바르게 제공되는지 확인합니다 back4app에 배포하기 git 저장소를 초기화하고, 파일을 추가한 후 커밋합니다 git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main 다음에 로그인합니다 back4app 웹 배포 https //www back4app com/containers "새 앱 만들기"를 클릭하고, 프로젝트 이름을 제공한 후 github 저장소 를 선택합니다 back4app이 귀하의 저장소에 접근할 수 있도록 승인하고 dockerfile 배포 를 선택합니다 빌드 설정을 확인하고 "배포" 를 클릭하여 첫 번째 빌드를 트리거합니다 배포 모니터링 배포 후, back4app 대시보드를 사용하여 디버깅을 위한 로그 보기 리소스 사용량 및 컨테이너 재시작 모니터링 새 커밋에서 재배포하려면 "trigger build" 옵션을 사용하세요 필요한 경우 사용자 정의 도메인 구성 라이브 애플리케이션에 접근하려면 https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ 테스트 및 디버깅 배포 후, vue 프론트엔드가 back4app 백엔드와 올바르게 통신하는지 확인하세요 api 호출 확인 브라우저의 개발자 도구(f12 → 네트워크)를 열어 api 요청을 검사합니다 작업 추가 및 검색 앱 인터페이스를 사용하여 작업을 추가하고 back4app 데이터베이스 브라우저를 확인합니다 crud 작업 작업을 완료하고 삭제한 후, 백엔드에서 변경 사항을 확인합니다 엣지 케이스 양식 입력을 검증하고 느린 네트워크 조건을 시뮬레이션하여 성능을 평가합니다(chrome devtools 사용) 일반적인 문제 해결 cors 오류 허용된 헤더 및 도메인 을 back4app에서 업데이트합니다(대시보드 > 앱 설정 > 보안 및 키)하여 프론트엔드 url을 포함합니다 인증 오류 (401) 애플리케이션 id와 javascript 키가 올바른지 확인합니다 백엔드 배포 문제 back4app 대시보드에서 컨테이너 로그를 확인하고 필요시 컨테이너를 재시작합니다 vue와 함께 back4app 사용을 위한 모범 사례 애플리케이션을 최적화하려면 효율적인 데이터 요청 여러 작업에 대해 배치 요청을 사용합니다 const tasks = \[task1, task2, task3]; parse object saveall(tasks); 쿼리 최적화 필요한 필드만 요청하기 query select('title', 'completed'); 환경 변수 민감한 키를 env 파일에 저장하기 vite parse app id=your app id vite parse js key=your js key 보안 acl을 사용하여 접근 제한하기 task setacl(new parse acl(parse user current())); 클라우드 코드 복잡한 로직을 백엔드 함수로 오프로드하여 api 노출을 줄이기 결론 vue 프론트엔드를 설정하고 back4app의 백엔드와 통합하며 컨테이너화된 워크플로우를 통해 배포하여 풀스택 할 일 목록 애플리케이션을 성공적으로 구축했습니다 이 튜토리얼은 로컬 개발에서 클라우드 배포까지의 간소화된 경로를 보여주며, vue ui와 백엔드 서비스 간의 원활한 상호작용을 보장합니다 앞으로는 고급 사용자 관리, 실시간 업데이트 및 서드파티 서비스 통합과 같은 향상을 고려해 보세요 더 많은 정보는 back4app 문서 https //www back4app com/docs 를 방문하고 커뮤니티 리소스를 탐색하세요