애스트로 프론트엔드를 구축하고 백엔드에 연결하는 방법은?

이 튜토리얼에서는 astro를 사용하여 할 일 목록 애플리케이션을 구축하고 back4app에서 제공하는 관리형 백엔드 서비스에 연결합니다 이 가이드는 현대적이고 정적 프론트엔드와 동적 데이터를 사용하여 필수 crud(생성, 읽기, 업데이트, 삭제) 작업을 마스터하고자 하는 분들을 위해 설계되었습니다 이 튜토리얼이 끝나면 귀하의 애플리케이션은 데이터 저장, 인증 등을 처리하는 백엔드와 원활하게 상호작용할 것입니다 풀스택 애플리케이션을 개발하는 것은 백엔드 구성 및 데이터베이스 관리로 인해 어려울 수 있습니다 프로세스를 간소화하기 위해 back4app을 사용합니다— 강력한 백엔드 서비스 —그래서 빠르고 가벼운 astro 프론트엔드를 만드는 데 집중할 수 있습니다 back4app은 완전 관리형 nosql 데이터베이스, 사용자 인증, 사용자 정의 로직을 위한 클라우드 코드 및 원활한 통합을 위한 sdk를 제공합니다 이를 통해 서버 인프라를 관리하지 않고도 확장 가능한 애플리케이션을 구축하고 배포할 수 있습니다 주요 요점 이 튜토리얼을 따르면 다음을 수행할 수 있습니다 vite로 현대적인 astro 프로젝트를 초기화합니다 애플리케이션의 데이터를 관리하기 위해 백엔드 서비스를 통합합니다 다음에 대한 필수 crud 작업을 구현합니다 동적 할 일 목록 컨테이너화된 워크플로를 사용하여 완전한 기능을 갖춘 애플리케이션을 back4app에 배포합니다 사전 요구 사항 시작하기 전에 다음이 준비되어 있는지 확인하세요 node js 및 npm 이 컴퓨터에 설치되어 있습니다 node v 및 npm v 로 설치를 확인하세요 기본 astro 지식 , 파일 기반 라우팅 및 컴포넌트 생성 포함 백엔드 서비스를 관리하기 위한 back4app 계정 이 필요합니다 아직 가입하지 않았다면 back4app https //www back4app com/ 에서 가입하세요 이러한 사전 요구 사항이 준비되면 프로젝트를 구축할 준비가 된 것입니다 프로젝트 설정 로컬 개발 환경을 설정하고 새로운 astro 프로젝트를 초기화하는 것으로 시작하세요 다음이 설치되어 있는지 확인하세요 node js (lts 버전) 설치되어 있지 않다면, 다음에서 다운로드하세요 nodejs org https //nodejs org/ 다음 명령어를 실행하여 astro 프로젝트를 생성하세요 npm create astro\@latest todo app 프로젝트 디렉토리로 이동하세요 cd todo app 설정이 올바른지 확인하기 위해 개발 서버를 시작하세요 npm run dev 이제 astro 앱이 브라우저에서 열려야 합니다 프론트엔드가 준비되었으므로 back4app에서 백엔드를 생성하세요 할 일 백엔드 생성하기 back4app은 parse 에 의해 구동되는 완전 관리형 백엔드 서비스를 제공합니다 여기에는 nosql 데이터베이스, 인증, 클라우드 코드 및 자동 생성된 api가 포함됩니다 백엔드를 설정하려면 다음 단계를 따르세요 로그인 하여 back4app 대시보드 https //www back4app com/ 를 클릭하고 "새 앱 만들기" 앱 이름 지정하기 (예 todoapp ) 및 백엔드 유형으로 nodejs/parse 선택하기 "데이터베이스" > "브라우저"로 이동하여 , 클릭 "클래스 만들기" , 그리고 "사용자 정의" 선택하기 클래스를 task 로 이름 짓고 공개 읽기 및 쓰기를 허용하도록 권한을 설정하세요 (나중에 이를 수정할 수 있습니다) "task" 클래스에 다음 필드를 추가하세요 title (문자열) – 작업 제목 description (문자열) – 작업에 대한 세부정보 completed (부울) – 작업 완료 상태 duedate (날짜) – 작업의 마감일 "저장" 을 클릭하여 스키마를 생성하세요 astro와 back4app 통합하기 당신은 parse javascript sdk 를 사용하여 astro 앱을 back4app 백엔드에 연결할 것입니다 parse sdk 설치하기 npm install parse 전용 모듈을 생성하여 sdk를 구성합니다 예를 들어, src/lib/parseclient js 에 다음 내용을 포함하는 파일을 생성합니다 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; export default parse; 이제 이 모듈을 astro 구성 요소나 페이지에서 가져와 백엔드와 상호작용할 수 있습니다 프론트엔드 개발하기 당신의 astro 애플리케이션은 작업을 추가, 표시, 업데이트 및 삭제하기 위한 구성 요소와 페이지로 구성됩니다 astro의 파일 기반 라우팅 및 구성 요소를 사용하여 동적 할 일 목록을 만드세요 구성 요소 구조화하기 프론트엔드를 만들기 위해 solid js를 사용할 것입니다 astro에서 solid js를 사용하려면 solid js 패키지를 설치하세요 다음과 같이 npm install solid js ui 구성 요소를 정리하기 위해 src/components 폴더를 만드세요 mkdir src/components 다음 구성 요소를 생성할 것입니다 taskformsolid jsx – 새로운 작업을 추가하기 위한 것입니다 taskitemsolid jsx – 개별 작업을 나타내기 위한 것입니다 tasklistsolid jsx – 작업 목록을 표시하기 위한 것입니다 todoapp jsx – 전체 애플리케이션을 표시하기 위한 것입니다 taskformsolid jsx 이 구성 요소는 작업 세부 정보를 캡처하고 back4app에 제출하는 양식을 렌더링합니다 // taskformsolid jsx import { createsignal } from 'solid js'; import parse from ' /lib/parseclient'; export default function taskformsolid(props) { const \[title, settitle] = createsignal(''); const \[description, setdescription] = createsignal(''); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend('task'); const task = new task(); task set('title', title()); task set('description', description()); task set('completed', false); await task save(); if (props refreshtasks) { props refreshtasks(); } settitle(''); setdescription(''); } catch (error) { console error('error adding task ', error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title()} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description()} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } taskitemsolid jsx 이 컴포넌트는 개별 작업을 나타내며, 작업의 완료 상태를 전환하거나 작업을 삭제하는 버튼을 제공합니다 // taskitemsolid jsx import { createsignal } from 'solid js'; import parse from ' /lib/parseclient'; export default function taskitemsolid(props) { const \[iscompleted, setiscompleted] = createsignal(props task completed); const togglecomplete = async () => { try { const query = new parse query('task'); const tasktoupdate = await query get(props task id); const newcompletedstate = !iscompleted(); tasktoupdate set('completed', newcompletedstate); await tasktoupdate save(); setiscompleted(newcompletedstate); if (props refreshtasks) { props refreshtasks(); } } catch (error) { console error('error updating task ', error); } }; const deletetask = async () => { try { const query = new parse query('task'); const tasktodelete = await query get(props task id); await tasktodelete destroy(); if (props refreshtasks) { props refreshtasks(); } } catch (error) { console error('error deleting task ', error); } }; return ( \<div class={`task item ${iscompleted() ? 'completed' ''}`}> \<div> \<h3>{props task title}\</h3> \<p>{props task description}\</p> \</div> \<div> \<button onclick={togglecomplete}> {iscompleted() ? 'undo' 'complete'} \</button> \<button onclick={deletetask}>delete\</button> \</div> \</div> ); } tasklistsolid jsx 이 컴포넌트는 배열을 반복하여 각 taskitem을 렌더링함으로써 작업 목록을 표시합니다 // tasklistsolid jsx import { for, show } from 'solid js'; import taskitemsolid from ' /taskitemsolid'; export default function tasklistsolid(props) { return ( \<div class="task list"> \<show when={props tasks length > 0} fallback={\<p>no tasks available\</p>}> \<for each={props tasks}> {(task) => ( \<taskitemsolid task={task} refreshtasks={props refreshtasks} /> )} \</for> \</show> \</div> ); } todoapp jsx 이 컴포넌트는 다른 컴포넌트를 가져와서 표시합니다 전체 애플리케이션을 표시합니다 // todoapp jsx import { createsignal, onmount, createeffect } from 'solid js'; import parse from ' /lib/parseclient'; import taskformsolid from ' /taskformsolid'; import tasklistsolid from ' /tasklistsolid'; export default function todoapp() { const \[tasks, settasks] = createsignal(\[]); const fetchtasks = async () => { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error('error fetching tasks ', error); } }; onmount(() => { fetchtasks(); }); return ( <> \<taskformsolid refreshtasks={fetchtasks} /> \<tasklistsolid tasks={tasks()} refreshtasks={fetchtasks} /> \</> ); } 페이지 통합 주 페이지(예 src/pages/index astro )에서 작업의 상태를 관리하고 컴포넌트를 통합합니다 \ // index astro import todoapp from ' /components/todoapp'; import layout from ' /layouts/layout astro'; import parse from ' /lib/parseclient'; \ \<layout> \<div class="container"> \<h1>to do list\</h1> \<todoapp client\ load /> \</div> \</layout> 애플리케이션 스타일링 전역 기본 스타일을 추가하려면 아래 css 스타일을 layouts astro 파일에 추가하세요 src/layouts 디렉토리 container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } 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; } } 이제 is\ global 속성을 스타일 태그에 추가하세요 \<!doctype html> \<html lang="en"> \<head> \<meta charset="utf 8" /> \<meta name="viewport" content="width=device width" /> \<link rel="icon" type="image/svg+xml" href="/favicon svg" /> \<meta name="generator" content={astro generator} /> \<title>astro basics\</title> \</head> \<body> \<slot /> \</body> \</html> \<style is\ global> / your styles / \</style> back4app 웹 배포에서 프론트엔드 배포하기 back4app 웹 배포는 astro 애플리케이션을 호스팅할 수 있는 컨테이너화된 환경을 제공합니다 생산 빌드를 생성합니다 npm run build dockerfile 생성하기 다음 내용을 포함하여 프로젝트 루트에 dockerfile 을 생성합니다 \# build stage from node 18 alpine as build workdir /app \# copy package files and install dependencies copy package json package lock json / run npm ci \# copy all files and build the application copy run npm run build \# production stage from node 18 alpine workdir /app \# set environment variables env node env=production env host=0 0 0 0 env port=3000 \# copy the build output from the build stage copy from=build /app/dist/ /dist/ \# install the static file server run npm install g serve \# expose the port expose 3000 \# start serving the static files from the "dist" folder cmd \["serve", " s", "dist", " l", "3000"] 로컬에서 docker 컨테이너 테스트하기 docker 이미지를 빌드합니다 docker build t todo frontend 컨테이너를 실행합니다 docker run p 3000 3000 todo frontend 브라우저에서 http //localhost 3000 을 열어 astro 앱이 올바르게 제공되는지 확인합니다 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 대시보드를 사용하여 디버깅을 위한 로그 보기 컨테이너 성능 및 리소스 사용 모니터링 새 커밋에 대한 재빌드 트리거 필요한 경우 사용자 정의 도메인 구성 라이브 애플리케이션에 접근하려면 https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ 테스트 및 디버깅 배포 후, astro 프론트엔드가 back4app 백엔드와 제대로 통신하는지 확인하세요 api 검증 브라우저의 개발자 도구(f12 → 네트워크)를 사용하여 api 호출을 검사하세요 작업 운영 ui를 통해 작업을 추가, 완료 및 삭제하고 back4app 데이터베이스 브라우저에서 업데이트를 확인하세요 오류 처리 오류에 대한 콘솔 로그를 확인하고 빈 제출과 같은 엣지 케이스를 테스트하세요 성능 테스트 브라우저 도구를 사용하여 느린 네트워크 조건을 시뮬레이션하여 응답성을 평가하세요 astro와 back4app 사용을 위한 모범 사례 애플리케이션을 최적화하려면 효율적인 요청 여러 작업을 처리할 때 배치 작업을 사용하세요 const tasks = \[task1, task2, task3]; parse object saveall(tasks); 최적화된 쿼리 필요한 필드만 검색 query select('title', 'completed'); 환경 관리 민감한 키를 환경 변수에 저장 astro parse app id=your app id astro parse js key=your js key 보안 acl을 사용하여 접근 제한 task setacl(new parse acl(parse user current())); 백엔드 오프로드 복잡한 로직을 위해 클라우드 코드를 활용하여 api 노출을 줄입니다 결론 이제 astro 프론트엔드를 생성하고 back4app의 백엔드와 통합하며 컨테이너화된 워크플로를 사용하여 배포함으로써 전체 스택 할 일 목록 애플리케이션을 구축했습니다 이 튜토리얼은 로컬 개발에서 클라우드 배포까지 모든 단계를 안내하여 astro ui와 백엔드 서비스 간의 원활한 상호작용을 보장했습니다 앞으로 실시간 업데이트, 개선된 인증 및 타사 통합과 같은 향상을 고려하십시오 추가 학습을 위해 back4app 문서 https //www back4app com/docs 를 방문하고 커뮤니티 리소스를 탐색하십시오