How to Build a CRUD App with SvelteKit? A Comprehensive Tutorial

개요 이 가이드에서는 sveltekit을 사용하여 간단한 crud(생성, 읽기, 업데이트, 삭제) 애플리케이션을 만들 것입니다 표준 데이터 작업을 수행하고 back4app을 사용하여 웹 앱의 백엔드를 관리하는 방법을 보여드리겠습니다 튜토리얼은 basic crud app sveltekit ,이라는 제목의 back4app 프로젝트 설정으로 시작됩니다 이는 귀하의 강력한 백엔드 역할을 합니다 그런 다음 수동으로 컬렉션과 필드를 생성하거나 back4app ai 에이전트를 활용하여 적응 가능한 데이터베이스 스키마를 설계합니다 이를 통해 데이터 모델이 효율적인 crud 작업에 최적화됩니다 다음으로, back4app admin app—코드 없이 드래그 앤 드롭 도구—를 사용하여 컬렉션을 관리하고 데이터 관리 프로세스를 간소화합니다 마지막으로, rest api를 사용하여 sveltekit 프론트엔드를 back4app과 통합합니다 접근 제어와 같은 고급 보안 조치도 구성되어 백엔드를 보호합니다 이 튜토리얼이 끝나면 crud 작업과 사용자 인증 및 동적 데이터 업데이트를 지원하는 프로덕션 준비가 완료된 웹 애플리케이션을 갖게 됩니다 주요 사항 신뢰할 수 있는 백엔드로 데이터를 효과적으로 처리하는 crud 애플리케이션 생성 마스터하기 확장 가능한 데이터베이스를 구조화하고 sveltekit 프론트엔드와 연결하는 방법 이해하기 데이터 작업을 원활하게 수행하기 위해 시각적 관리 도구(back4app admin app)를 활용하는 방법 배우기 애플리케이션을 신속하게 배포하기 위한 전략 탐색, docker 컨테이너화 포함 필수 조건 시작하기 전에 다음을 확인하세요 새 프로젝트가 준비된 back4app 계정입니다 back4app 시작하기 https //www back4app com/docs/get started/new parse app 에 대한 안내를 참조하세요 sveltekit 개발 환경입니다 공식 문서 https //kit svelte dev/docs 를 따라 sveltekit을 설치하세요 javascript, sveltekit 및 rest api에 대한 기본 이해입니다 sveltekit 문서 https //kit svelte dev/docs 를 확인하여 자세한 내용을 알아보세요 1단계 – 프로젝트 초기화 새 back4app 프로젝트 설정하기 back4app 대시보드에 로그인하세요 “새 앱” 버튼을 클릭하세요 대시보드에서 프로젝트 이름을 입력하세요 basic crud app sveltekit 및 화면의 안내에 따라 프로젝트를 생성하세요 새 프로젝트 만들기 생성 후, 새로운 프로젝트가 대시보드에 나타나며 백엔드 구성을 위한 안정적인 플랫폼을 제공합니다 2단계 – 데이터베이스 스키마 작성 데이터 모델 수립하기 우리의 crud 앱을 위해 여러 컬렉션을 생성해야 합니다 crud 작업을 수행하기 위한 데이터베이스 스키마를 설정하기 위해 필요한 컬렉션과 필드를 설명하는 예시입니다 1\ 항목 수집 이 수집은 각 항목에 대한 세부 정보를 포함합니다 필드 데이터 유형 설명 id 객체 id 자동 생성된 기본 키 제목 문자열 항목의 제목 설명 문자열 항목에 대한 간략한 개요 생성일 날짜 항목이 생성된 타임스탬프 업데이트됨 날짜 최신 업데이트의 타임스탬프 2\ 사용자 수집 이 컬렉션은 사용자 자격 증명 및 프로필 세부 정보를 저장합니다 필드 데이터 유형 설명 id 객체 id 자동 생성된 기본 키 사용자 이름 문자열 사용자를 위한 고유 식별자 이메일 문자열 고유 사용자 이메일 주소 비밀번호 해시 문자열 인증을 위한 암호화된 비밀번호 생성일 날짜 계정 생성 타임스탬프 업데이트됨 날짜 최신 프로필 업데이트의 타임스탬프 back4app 대시보드에서 각 컬렉션에 대해 새로운 클래스를 설정하고 해당 열을 추가하여 수동으로 이러한 컬렉션을 생성할 수 있습니다 새 클래스 만들기 각 필드를 적절한 데이터 유형을 선택하고, 이름을 지정하고, 기본값을 설정하며, 필요한 경우 필수로 표시하여 정의하십시오 열 만들기 back4app ai 에이전트를 통한 스키마 생성 자동화 back4app ai 에이전트는 대시보드에서 직접 스키마 설정 프로세스를 간소화합니다 컬렉션과 필드를 설명하는 프롬프트를 입력하면 데이터베이스 구조를 자동으로 생성할 수 있습니다 ai 에이전트 사용 방법 ai 에이전트에 접근하기 back4app 대시보드를 열고 프로젝트 설정 내에서 ai 에이전트로 이동합니다 모델 설명하기 필요한 컬렉션과 필드를 설명하는 자세한 프롬프트를 붙여넣습니다 검토 및 확인하기 제출 후 생성된 컬렉션과 필드 정의를 검토한 다음 프로젝트에 적용합니다 샘플 프롬프트 create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) 이 접근 방식은 시간을 절약하고 스키마가 일관되고 최적화되도록 보장합니다 3단계 – 관리 앱 활성화 및 crud 작업 실행 관리 앱 소개 back4app 관리 앱은 백엔드를 손쉽게 관리할 수 있는 시각적 인터페이스를 제공합니다 드래그 앤 드롭 기능을 통해 crud 작업을 간단하게 수행할 수 있습니다 관리자 앱 활성화 “더보기” 섹션으로 이동 당신의 back4app 대시보드에서 “관리자 앱” 선택 그런 다음 클릭 “관리자 앱 활성화 ” 관리자 자격 증명 설정 역할을 설정하기 위해 초기 관리자 사용자를 생성합니다 (예 b4aadminuser ) 및 시스템 컬렉션 관리자 앱 활성화 활성화 후, 관리자 앱에 로그인하여 데이터를 관리하기 시작하세요 관리자 앱 대시보드 관리자 앱으로 crud 작업 관리하기 관리자 앱 내에서 다음을 수행할 수 있습니다 레코드 추가 새 항목을 생성하려면 모든 컬렉션(예 항목)에서 “레코드 추가” 버튼을 클릭하세요 레코드 보기 및 편집 레코드를 선택하여 세부정보를 보거나 필드를 수정하세요 레코드 제거 더 이상 필요하지 않은 항목을 삭제 옵션을 사용하여 제거하세요 이 직관적인 인터페이스는 데이터 관리 프로세스를 상당히 간소화합니다 4단계 – sveltekit을 back4app과 연결하기 관리자 앱을 통해 백엔드를 구성했으므로, 이제 sveltekit 프론트엔드를 back4app에 연결할 차례입니다 sveltekit에서 rest api 활용하기 rest api 호출을 사용하여 crud 작업을 수행합니다 데이터 가져오기 예제 back4app에서 항목을 검색하는 sveltekit 엔드포인트 또는 구성 요소를 만듭니다 \<! src/routes/items svelte > \<script> import { onmount } from 'svelte'; let items = \[]; const loaditems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); items = data results; } catch (error) { console error('failed to fetch items ', error); } }; onmount(loaditems); \</script> \<h2>items\</h2> \<ul> {#each items as item (item objectid)} \<li>{item title} – {item description}\</li> {/each} \</ul> 생성, 업데이트 및 삭제 작업을 위해 sveltekit 구성 요소 내에서 유사한 api 호출을 통합합니다 5단계 – 백엔드 보안 액세스 제어 목록(acl) 구성 각 객체에 대해 acl을 설정하여 데이터를 보호합니다 예를 들어, 개인 항목을 생성하려면 async function createprivateitem(itemdata, ownerid) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } 클래스 수준 권한(clp) 설정 back4app 대시보드에서 각 컬렉션에 대한 clp를 구성하여 권한이 있는 사용자만 민감한 데이터에 접근할 수 있도록 합니다 6단계 – 사용자 인증 구현 사용자 계정 관리 back4app은 인증을 위해 parse의 사용자 클래스를 사용합니다 sveltekit 앱에서 back4app과 rest api 호출을 통해 상호작용하는 등록 및 로그인 양식을 설정합니다 예시 사용자 등록 \<! src/routes/signup svelte > \<script> let username = ''; let email = ''; let password = ''; const handlesignup = async () => { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data objectid) { alert('registration successful!'); } else { alert('sign up failed ' + data error); } } catch (error) { console error('error during sign up ', error); } }; \</script> \<form on\ submit|preventdefault={handlesignup}> \<input type="text" placeholder="username" bind\ value={username} /> \<input type="email" placeholder="email" bind\ value={email} /> \<input type="password" placeholder="password" bind\ value={password} /> \<button type="submit">register\</button> \</form> 사용자 로그인 및 세션 관리를 위해 유사한 방법을 구현할 수 있습니다 7단계 – sveltekit 프론트엔드 배포 back4app의 웹 배포 기능을 사용하면 github 리포지토리에 연결하여 sveltekit 프론트엔드를 호스팅할 수 있습니다 이 섹션에서는 프로덕션 파일을 빌드하고, 소스 코드를 푸시하며, 사이트를 배포하는 방법을 다룹니다 7 1 프로덕션 빌드 생성 프로젝트 디렉토리에서 터미널을 엽니다 빌드 명령어를 실행합니다 npm run build 이것은 최적화된 정적 자산이 포함된 build (또는 output ) 폴더를 생성합니다 빌드 확인 빌드 폴더에 index html 및 모든 필요한 자산 디렉토리가 포함되어 있는지 확인합니다 7 2 코드 구조화 및 업로드 저장소에는 전체 sveltekit 소스 코드가 있어야 합니다 일반적인 구조는 다음과 같을 수 있습니다 basic crud app sveltekit/ ├── node modules/ ├── static/ │ └── global css ├── src/ │ ├── routes/ │ │ ├── items svelte │ │ └── signup svelte │ └── lib/ │ └── api js ├── package json └── readme md 샘플 api 파일 src/lib/api js export const fetchitems = async () => { const res = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await res json(); return data results; }; github에 커밋하기 git 초기화 (아직 하지 않았다면) git init 파일 추가하기 git add 변경 사항 커밋하기 git commit m "sveltekit 프론트엔드의 초기 커밋" github 리포지토리 생성하기 예를 들어, basic crud app sveltekit 이라고 이름 짓습니다 코드 푸시하기 git remote add origin https //github com/your username/basic crud app sveltekit git git push u origin main 7 3 github 리포지토리와 웹 배포 연결하기 웹 배포 열기 back4app에 로그인하고, 프로젝트 (basic crud app sveltekit)로 이동한 후 웹 배포 옵션을 선택합니다 github에 연결하기 back4app이 리포지토리에 접근할 수 있도록 github 계정을 연결하는 안내를 따릅니다 리포지토리 및 브랜치 선택하기 sveltekit 리포지토리 (예 basic crud app sveltekit )와 코드가 포함된 브랜치 (보통 main )를 선택합니다 7 4 배포 설정하기 다음 추가 설정을 제공하십시오 빌드 명령어 사전 빌드 폴더가 없으면 명령어를 설정하십시오 (예 npm run build ) 출력 디렉토리 정적 파일을 보관하는 폴더를 지정하십시오 (일반적으로 build 또는 output )입니다 환경 변수 api 키와 같은 필요한 변수를 추가하십시오 7 5 sveltekit 애플리케이션 도커화하기 docker가 배포 선택인 경우, dockerfile 을(를) 리포지토리에 포함하십시오 \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire source code and build the app copy run npm run build \# use nginx to serve the built files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 선택한 경우 docker를 사용하여 웹 배포를 구성하십시오 7 6 애플리케이션 배포하기 배포 버튼 클릭 구성이 완료되면 배포 버튼을 클릭하세요 배포 모니터링 back4app이 코드를 가져오고, 빌드를 실행하며, 컨테이너에 앱을 배포합니다 url 가져오기 배포가 성공적으로 완료되면 back4app이 호스팅된 sveltekit 앱의 url을 제공합니다 7 7 배포 검증하기 url 방문하기 제공된 url을 브라우저에서 엽니다 기능 테스트 앱이 올바르게 로드되고, 라우트가 작동하며, 모든 자산이 제대로 제공되는지 확인합니다 필요시 디버깅 브라우저 개발자 도구를 사용하여 오류를 검사하고, 문제 해결을 위해 back4app 로그를 검토합니다 8단계 – 마무리 및 향후 방향 sveltekit과 back4app을 사용하여 완전한 crud 애플리케이션을 구축한 것을 축하합니다! " basic crud app sveltekit "라는 프로젝트를 설정하고, 항목 및 사용자에 대한 자세한 컬렉션을 작성했으며, 관리 앱을 통해 백엔드를 관리했습니다 또한, rest api를 통해 sveltekit 프론트엔드를 통합하고 엄격한 접근 제어를 적용했습니다 향후 개선 사항 프론트엔드 확장 상세 보기, 검색 기능 및 실시간 알림으로 sveltekit 앱을 향상시키세요 고급 기능 추가 서버 측 로직(예 클라우드 함수)을 구현하거나, 타사 api를 통합하거나, 역할 기반 권한을 활성화하세요 지식 심화 back4app 문서 https //www back4app com/docs 를 방문하고 성능 개선 및 사용자 정의 통합을 위한 더 많은 튜토리얼을 탐색하세요 이 튜토리얼은 back4app을 사용하여 sveltekit 애플리케이션을 위한 확장 가능한 crud 백엔드를 만드는 데 필요한 기술을 제공합니다 코딩을 즐기고 행복한 빌딩 되세요!