How to Build a Blitz.js Frontend and Connect It to a Backend?

이 가이드에서는 blitz js를 사용하여 할 일 목록 애플리케이션을 구축하고 back4app의 관리형 백엔드에 연결합니다 이 단계별 튜토리얼은 필수 crud 작업을 구현하고 blitz js를 사용하여 동적 사용자 인터페이스를 만드는 데 도움을 주기 위해 설계되었습니다 풀스택 애플리케이션을 구축하는 것은 프론트엔드와 백엔드 시스템을 모두 관리해야 할 경우 복잡할 수 있습니다 back4app을 활용하면 확장 가능한 baas 를 통해 백엔드 관리를 간소화할 수 있으며, blitz js 인터페이스 구축에 집중할 수 있습니다 back4app은 즉시 사용할 수 있는 nosql 데이터베이스, 인증, 클라우드 함수 및 api 엔드포인트를 포함한 백엔드 서비스 모음을 제공합니다 이러한 기능을 통해 서버 유지 관리의 부담 없이 애플리케이션을 신속하게 개발하고 배포할 수 있습니다 주요 내용 이 튜토리얼이 끝나면 다음을 수행할 수 있습니다 업계 표준 도구를 사용하여 현대적인 blitz js 프로젝트를 설정합니다 parse sdk를 사용하여 blitz js 애플리케이션과 back4app 백엔드를 통합합니다 할 일 목록을 관리하기 위해 crud 작업을 구현합니다 to do list back4app의 웹 배포를 사용하여 blitz js 앱을 컨테이너화하고 배포합니다 사전 요구 사항 시작하기 전에 다음 사항을 확인하세요 node js 및 npm 이(가) 설치되어 있어야 합니다 설치 여부는 node v 및 npm v 를 터미널에 입력하여 확인하세요 기본 blitz js 지식 , 라우팅, 쿼리 및 변이를 포함합니다 blitz js는 react를 기반으로 하므로 react에 대한 친숙함이 도움이 됩니다 back4app 계정 이(가) 백엔드 서비스를 구성하고 관리하는 데 필요합니다 아직 가입하지 않았다면 back4app https //www back4app com/ 에서 가입하세요 이러한 전제 조건이 충족되면, blitz js 프로젝트를 초기화하고 강력한 백엔드와 통합할 준비가 된 것입니다 프로젝트 설정 blitz js 애플리케이션을 설정하는 것으로 시작하세요 blitz js는 next js의 강력함과 풀스택 프레임워크를 결합하여 간소화된 개발자 경험을 제공합니다 다음 명령어를 실행하여 새로운 blitz js 프로젝트를 생성하세요 todo app 을(를) 원하는 프로젝트 이름으로 바꾸세요 npx blitz new todo app 프로젝트 디렉토리로 이동하세요 cd todo app 개발 서버를 실행하여 모든 것이 올바르게 설정되었는지 확인하세요 npm run dev 터미널에 표시된 url을 방문하여 blitz js 앱이 실행 중인지 확인하세요 back4app에서 todo 백엔드 설정하기 back4app은 애플리케이션의 데이터 관리를 간소화하는 관리형 parse 백엔드를 제공합니다 이 섹션에서는 할 일 목록을 저장할 데이터 모델을 생성합니다 백엔드 애플리케이션 만들기 당신의 back4app 대시보드 https //www back4app com/ 에 로그인하고 "새 앱 만들기" 애플리케이션의 이름을 제공하세요 (예 todoblitzapp ) 그리고 백엔드 유형으로 nodejs/parse 를 선택하세요 "데이터베이스" > "브라우저" 섹션에서 "클래스 만들기" 를 클릭하고 "사용자 정의" 를 선택하세요 클래스를 task 로 이름 짓고 클래스 수준 권한을 설정하여 공개 읽기 및 쓰기를 허용하세요 (이 설정은 나중에 조정할 수 있습니다) 다음 필드를 task 클래스에 추가하세요 title (문자열) – 작업의 제목 description (문자열) – 작업에 대한 세부정보 completed (부울) – 작업이 완료되었는지 여부 duedate (날짜) – 작업의 마감일 "저장" 을 클릭하여 스키마를 생성하세요 blitz js와 back4app 통합하기 blitz js 앱을 back4app에 연결하려면, parse javascript sdk를 설치하세요 npm install parse 다음으로, blitz js 프로젝트에서 parse sdk를 구성하세요 새 구성 파일을 생성하세요 (예 src/parseclient js ) 그리고 아래와 같이 parse를 초기화하세요 자리 표시자를 앱 설정 > 보안 및 키 )에서 back4app 자격 증명으로 교체하세요 // src/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; 이제 이 구성을 blitz js 쿼리 및 변형에 가져와서 백엔드와 상호작용할 수 있습니다 blitz js로 프론트엔드 구축하기 백엔드가 설정되었으므로 이제 blitz js에서 할 일 목록 인터페이스를 구축할 시간입니다 crud 작업을 수행하기 위해 blitz js의 내장 쿼리 및 변형을 사용할 것입니다 페이지 및 api 호출 구조화하기 blitz js에서는 페이지가 src/pages 디렉토리 아래에 있습니다 src/pages/index tsx 를 열고 페이지를 설정하고, back4app에서 작업을 쿼리하며, 작업 추가, 토글 및 삭제를 위한 변이를 정의하는 다음 코드를 추가하세요 // src/pages/index tsx import layout from "src/core/layouts/layout" import { blitzpage } from "@blitzjs/next" import { usequery } from "@tanstack/react query" import parse from " /parseclient" import { usestate } from "react" const fetchtasks = async () => { const task = parse object extend("task") const query = new parse query(task) const results = await query find() return results map((task) => ({ id task id, task tojson() })) } const addtask = async (title string, description string) => { 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() } const toggletask = async (id string, currentstatus boolean) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) task set("completed", !currentstatus) await task save() } const deletetask = async (id string) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) await task destroy() } const home blitzpage = () => { const { data tasks, refetch, isloading } = usequery(\["tasks"], fetchtasks) const \[title, settitle] = usestate("") const \[description, setdescription] = usestate("") if (isloading) return \<div>loading \</div> return ( \<layout title="home"> \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={async (e) => { e preventdefault() await addtask(title, description) settitle("") setdescription("") await refetch() }} classname="form" \> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<div key={task id} classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={async () => { await toggletask(task id, task completed) await refetch() }} \> {task completed ? "undo" "complete"} \</button> \<button onclick={async () => { await deletetask(task id) await refetch() }} \> delete \</button> \</div> )) )} \</div> \</div> \</layout> ) } export default home 이 페이지는 tanstack의 쿼리 훅을 활용하여 작업을 가져오고 사용자 작업을 처리하여 back4app 백엔드와의 원활한 통합을 보장합니다 작동하도록 하려면 usequery 를 사용하려면 전체 애플리케이션을 queryclientprovider 로 감싸야 합니다 이는 src/pages/ app tsx 파일에서 수행합니다 다음 코드 블록으로 src/pages/ app tsx 파일의 코드를 교체하세요 // src/pages/ app tsx import { errorfallbackprops, errorcomponent, errorboundary, appprops } from "@blitzjs/next" import react from "react" import { withblitz } from "src/blitz client" import { queryclient, queryclientprovider } from "@tanstack/react query" const queryclient = new queryclient() function rooterrorfallback({ error } errorfallbackprops) { return ( \<errorcomponent statuscode={(error as any)? statuscode || 400} title={error message || error name} /> ) } function myapp({ component, pageprops } appprops) { const getlayout = component getlayout || ((page) => page) return ( \<queryclientprovider client={queryclient}> \<errorboundary fallbackcomponent={rooterrorfallback}> {getlayout(\<component { pageprops} />)} \</errorboundary> \</queryclientprovider> ) } export default withblitz(myapp) 전역 스타일 추가하기 앱의 기본 스타일을 정의하려면 다음 코드 블록을 src/styles/globals css 파일에 추가하세요 / src/styles/globals css / 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; 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; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items 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; } } 전역 스타일을 가져오려면 다음 줄을 추가하세요 src/pages/ app tsx (또는 사용자 정의 앱 컴포넌트 파일) / src/pages/ app tsx / import " /styles/globals css"; 당신의 blitz js 앱은 이제 back4app과 통합된 완전한 기능의 할 일 목록 인터페이스를 표시합니다 back4app에서 blitz js 앱 컨테이너화 및 배포 back4app 웹 배포는 배포 프로세스를 간소화하는 컨테이너화된 환경을 제공합니다 당신은 blitz js 앱을 docker 컨테이너에 패키징하고 원활하게 배포할 것입니다 생산을 위한 blitz js 앱 준비하기 먼저, blitz js 애플리케이션을 프로덕션용으로 빌드하세요 blitz build dockerfile 생성하기 다음 내용을 포함하여 프로젝트의 루트 디렉토리에 dockerfile 을 생성하세요 from node 18 arg database url arg port=3000 env database url ${database url} workdir /usr/src/app copy package json / run npm install run npm install g blitz copy run blitz build expose 3000 cmd \["blitz", "start", " p", "3000"] 이 dockerfile은 blitz js 프로젝트를 빌드하고 경량 node js 런타임을 사용하여 프로덕션 이미지를 준비합니다 dockerfile을 생성한 후, dockerignore 파일을 생성하고 gitignore 파일을 복사하여 붙여넣으세요 docker 컨테이너 빌드 및 테스트 로컬에서 docker 이미지를 빌드하세요 docker build t todo blitz frontend 컨테이너를 실행하여 테스트하세요 docker run p 3000 3000 todo blitz frontend 브라우저에서 http //localhost 3000 에 방문하여 blitz js 앱이 올바르게 실행되고 있는지 확인하세요 back4app 웹 배포를 통한 앱 배포 프로젝트를 github에 푸시하세요 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을 승인하세요 "todo blitz" 리포지토리를 선택하세요 "dockerfile 배포"를 선택하고 빌드 설정을 확인하세요 "배포"를 클릭하여 배포 프로세스를 시작하세요 배포가 완료되면 back4app 대시보드를 사용하여 로그를 모니터링하고, 빌드를 관리하며, 필요에 따라 사용자 도메인을 설정하세요 애플리케이션 테스트 및 디버깅 배포 후, 다음을 통해 앱이 예상대로 작동하는지 확인하세요 api 연결 확인 브라우저의 개발자 도구를 사용하여 작업 추가, 전환 및 삭제를 위한 api 요청이 성공적인지 확인하십시오 데이터 지속성 확인 ui를 통해 작업을 추가하고 페이지를 새로 고쳐 back4app 데이터베이스에 저장되었는지 확인하십시오 crud 작업 테스트 작업을 전환하고 삭제할 수 있는지 확인하고 오류에 대한 콘솔 로그를 검사하십시오 엣지 케이스 처리 유효성 검사의 강건성을 테스트하기 위해 잘못된 입력을 제출해 보십시오 모범 사례 및 최적화 팁 안전하고 효율적인 애플리케이션을 위한 다음 권장 사항을 고려하십시오 api 요청 최적화 배치 처리를 사용하고 쿼리된 필드를 제한하여 네트워크 오버헤드를 줄이십시오 환경 변수 보안 민감한 자격 증명(애플리케이션 id 및 javascript 키)을 안전한 env 파일에 저장하십시오 액세스 제어 구현 동적 acl을 사용하여 권한이 있는 사용자만 데이터 수정이 가능하도록 하십시오 클라우드 코드 활용 복잡한 로직을 back4app 클라우드 코드로 오프로드하여 성능과 보안을 향상시키십시오 결론 이제 blitz js와 back4app 백엔드를 통합하여 전체 스택 할 일 목록 애플리케이션을 구축했습니다 이 튜토리얼은 프로젝트 초기화, 백엔드 통합 및 컨테이너화된 배포를 안내했습니다 앞으로 나아가면서 고급 사용자 관리, 실시간 업데이트 및 타사 통합과 같은 기능으로 앱을 확장하는 것을 고려하십시오 추가 통찰력을 얻으려면 back4app 문서 https //www back4app com/docs 및 blitz js 리소스를 탐색하십시오