How to a Basic CRUD App with Alpine.js?

개요 이 가이드에서는 alpine js를 사용하여 crud(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 배웁니다 이 튜토리얼은 back4app을 강력한 백엔드 서비스로 활용하여 데이터를 동적으로 관리하는 데 필요한 핵심 작업을 안내합니다 먼저, basic crud app alpinejs 라는 이름의 새로운 back4app 프로젝트를 설정합니다 이 프로젝트는 데이터를 관리하기 위한 백엔드 역할을 합니다 프로젝트를 초기화한 후, 컬렉션과 필드를 정의하여 유연한 데이터베이스 스키마를 설계합니다 이는 수동으로 하거나 back4app ai 에이전트의 도움을 받을 수 있습니다 이 단계는 신뢰할 수 있는 crud 작업을 위해 백엔드가 구조화되도록 보장합니다 다음으로, 사용자 친화적인 드래그 앤 드롭 도구인 back4app 관리 앱을 사용하여 컬렉션을 손쉽게 관리합니다 이 인터페이스는 데이터 관리 작업을 간소화합니다 마지막으로, rest 또는 graphql api를 사용하여 alpine js 프론트엔드를 back4app에 연결하고, 강력한 접근 제어로 백엔드를 보호합니다 이 튜토리얼이 끝나면 기본 crud 작업과 사용자 인증 및 안전한 데이터 업데이트를 지원하는 프로덕션 준비가 완료된 웹 앱을 갖게 됩니다 배울 내용 효율적인 백엔드 서비스로 crud 애플리케이션을 구축하는 방법 확장 가능한 데이터 모델을 설계하고 이를 alpine js 프론트엔드에 연결하는 방법 컬렉션 관리를 위한 드래그 앤 드롭 관리 도구 사용에 대한 팁 컨테이너화 및 웹 배포 기술을 사용하여 애플리케이션을 배포하는 전략 전제 조건 시작하기 전에 다음을 확인하세요 새 프로젝트가 준비된 back4app 계정 도움이 필요하면 back4app 시작하기 https //www back4app com/docs/get started/new parse app 를 참조하세요 alpine js 개발 환경 프로젝트 설정에 따라 cdn 또는 npm을 통해 alpine js를 포함하세요 javascript, alpine js 및 rest api 원칙에 대한 이해 자세한 내용은 alpine js 문서 https //alpinejs dev/start 를 참조하세요 1단계 – 프로젝트 시작하기 새로운 back4app 프로젝트 설정하기 back4app 대시보드에 로그인하세요 “새 앱” 버튼을 클릭하세요 프로젝트 이름을 입력하세요 basic crud app alpinejs 및 프롬프트를 따르세요 새 프로젝트 만들기 생성 후, 프로젝트가 대시보드에 나타나며 백엔드 구성을 준비합니다 2단계 – 데이터베이스 스키마 작성하기 데이터 모델 매핑하기 우리의 crud 앱을 위해, 몇 가지 주요 컬렉션을 설정할 것입니다 아래는 스키마 설정을 안내하기 위한 필드와 데이터 유형이 포함된 샘플 컬렉션입니다 이러한 컬렉션은 필수 crud 작업을 용이하게 합니다 1\ 아이템 컬렉션 이 컬렉션은 각 항목에 대한 세부 정보를 포함하고 있습니다 필드 유형 목적 id 객체 id 자동 생성된 기본 식별자 제목 문자열 항목의 이름 또는 제목 설명 문자열 항목에 대한 간략한 요약 생성일 날짜 항목 생성의 타임스탬프 업데이트됨 날짜 마지막 업데이트의 타임스탬프 2\ 사용자 수집 이 컬렉션은 사용자 자격 증명 및 세부 정보를 저장합니다 필드 유형 목적 id 객체 id 자동 생성된 기본 식별자 사용자 이름 문자열 고유 사용자 식별자 이메일 문자열 사용자의 고유 이메일 주소 비밀번호 해시 문자열 안전하게 저장된 해시된 비밀번호 생성일 날짜 계정 생성 타임스탬프 업데이트됨 날짜 마지막 계정 업데이트의 타임스탬프 이러한 컬렉션은 back4app 대시보드에서 각 컬렉션에 대해 새 클래스를 추가하고 열을 정의하여 수동으로 생성할 수 있습니다 새 클래스 만들기 필드를 설정하려면 유형을 선택하고, 이름을 지정하고, 기본값을 추가하고, 필수로 표시할 수 있습니다 열 만들기 스키마 생성을 위한 back4app ai 에이전트 활용하기 back4app ai 에이전트는 스키마 생성을 자동화하는 데 도움을 줍니다 원하는 필드를 설명하는 프롬프트를 기반으로 컬렉션을 생성합니다 ai 에이전트 사용 방법 back4app 대시보드에서 ai 에이전트를 엽니다 필요한 컬렉션과 필드에 대한 자세한 설명을 입력합니다 제안된 스키마를 검토하고 프로젝트에 적용합니다 샘플 프롬프트 create the following collections 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 대시보드의 “더보기” 섹션으로 이동합니다 “ 관리자 앱 ”을 선택한 후 관리자 앱 활성화 를 클릭합니다 첫 번째 관리자 자격 증명을 설정하여 역할 및 시스템 컬렉션을 구성합니다 관리자 앱 활성화 활성화되면 관리자 앱에 로그인하여 데이터를 관리합니다 관리자 앱 대시보드 관리자 앱으로 crud 작업 수행하기 관리자 앱 내에서 다음을 수행할 수 있습니다 레코드 생성 항목과 같은 컬렉션에서 “레코드 추가” 버튼을 클릭합니다 레코드 읽기 및 업데이트 세부 정보를 보거나 편집할 레코드를 선택합니다 레코드 삭제 삭제 기능을 사용하여 원하지 않는 항목을 제거합니다 이 인터페이스는 직관적인 드래그 앤 드롭 디자인으로 데이터 관리를 간소화합니다 4단계 – alpine js를 back4app에 연결하기 백엔드가 준비되었으므로 alpine js 프론트엔드를 back4app에 연결할 시간입니다 rest/graphql api 사용하기 백엔드와 상호작용하기 위해 rest 또는 graphql을 사용합니다 예시 rest를 통한 항목 가져오기 // sample rest api call using fetch async function loaditems() { 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(); console log('items loaded ', data results); } catch (error) { console error('error loading items ', error); } } loaditems(); 이 api 호출을 alpine js 구성 요소 내에 통합하여 crud 작업을 수행합니다 5단계 – 백엔드 보호하기 액세스 제어 목록(acl) 설정하기 레코드에 acl을 적용하여 데이터를 보호합니다 예를 들어, 개인 항목을 생성하려면 async function addprivateitem(data, owner) { const itemdata = { title data title, description data description }; // define acl settings only the owner has read/write privileges const aclsettings = { " " { "read" false, "write" false }, \[owner] { "read" true, "write" true } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ itemdata, acl aclsettings }) }); const result = await response json(); console log('private item added ', result); } catch (error) { console error('error adding private item ', error); } } 클래스 수준 권한(clp) 구성하기 back4app 대시보드 내에서 각 컬렉션에 대해 clp를 설정하여 기본 액세스 정책을 시행하고, 권한이 있는 사용자만 민감한 데이터에 접근할 수 있도록 합니다 6단계 – 사용자 인증 구현하기 사용자 계정 생성하기 back4app은 인증 관리를 위해 parse의 user 클래스를 활용합니다 alpine js 프로젝트에서 api 호출을 통해 사용자 등록 및 로그인을 처리하세요 예시 alpine js를 이용한 사용자 가입 sign up 유저 로그인 및 세션 처리를 위해 유사한 방법을 구현할 수 있습니다 7단계 – 웹 배포를 통한 alpine js 프론트엔드 배포 back4app의 웹 배포 기능을 통해 alpine js 프론트엔드를 쉽게 호스팅할 수 있습니다 이 섹션에서는 프로덕션 빌드를 준비하고, 코드를 github에 커밋하며, 리포지토리를 웹 배포에 연결하고, 앱을 시작합니다 7 1 프로덕션 자산 구축하기 터미널에서 프로젝트 디렉토리를 엽니다 빌드 프로세스를 사용하는 경우 빌드 명령을 실행합니다 (alpine js용) npm run build 이 명령은 최적화된 정적 파일이 포함된 폴더 (일반적으로 dist 또는 build )를 생성합니다 빌드 폴더에 index html 과 필요한 자산이 포함되어 있는지 확인합니다 7 2 소스 파일 정리 및 업로드 당신의 github 리포지토리는 alpine js 프로젝트의 모든 소스 파일을 포함해야 합니다 일반적인 구조는 다음과 같을 수 있습니다 basic crud app alpinejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── main js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md 샘플 파일 src/main js document addeventlistener('alpine\ init', () => { alpine data('itemsapp', () => ({ items \[], newitemtitle '', newitemdescription '', async loaditems() { 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(); this items = data results; } catch (error) { console error('failed to load items ', error); } }, async additem() { const payload = { title this newitemtitle, description this newitemdescription }; try { await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(payload) }); this newitemtitle = ''; this newitemdescription = ''; this loaditems(); } catch (error) { console error('error adding item ', error); } } })); }); 코드를 github에 커밋하기 프로젝트 폴더에 git 저장소를 초기화합니다 git init 파일을 스테이징합니다 git add 변경 사항을 커밋합니다 git commit m "alpine js 프론트엔드의 초기 커밋" github에 새 저장소를 만듭니다 (예 basic crud app alpinejs frontend ) 코드를 푸시합니다 git remote add origin https //github com/your username/basic crud app alpinejs frontend git git push u origin main 7 3 github 리포지토리를 웹 배포에 연결하기 back4app 대시보드에 로그인하고 프로젝트를 선택하세요 ( basic crud app alpinejs ) 웹 배포 섹션을 엽니다 github 계정을 연결하고 alpine js 코드가 포함된 리포지토리와 브랜치를 선택하세요 7 4 배포 설정 구성하기 빌드 명령어 프로젝트에 미리 빌드된 폴더가 없으면 명령어를 지정하세요 (예 npm run build ) 출력 디렉토리 정적 파일이 있는 폴더로 설정하세요 (예 build 또는 dist ) 환경 변수 필요한 변수를 추가하세요 (예 api 키) 7 5 alpine js 애플리케이션 도커화하기 (선택 사항) docker를 사용하여 배포하려면 다음과 같은 dockerfile 을 포함하세요 \# use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy dependency files and install copy package json / run npm install \# copy source and build app copy run npm run build \# use nginx to serve the static 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에서 배포 버튼을 클릭하세요 back4app이 코드를 가져오고, 빌드하고, 배포하는 동안 배포 프로세스를 모니터링하세요 배포가 완료되면 alpine js 애플리케이션이 호스팅되는 url을 받게 됩니다 7 7 배포 테스트하기 브라우저에서 제공된 url을 방문하세요 앱이 올바르게 로드되고, 라우트가 예상대로 작동하며, 자산이 제대로 제공되는지 확인하세요 브라우저 콘솔 로그와 back4app 배포 로그를 확인하여 문제를 해결하세요 8단계 – 최종 생각 및 향후 개선 사항 축하합니다! alpine js와 back4app을 사용하여 완전한 crud 애플리케이션을 구축했습니다 당신은 basic crud app alpinejs 프로젝트를 설정하고, 상세한 데이터베이스 컬렉션을 만들고, 데이터 관리를 위한 노코드 관리 도구를 활용했습니다 또한, alpine js 프론트엔드를 rest api를 사용하여 백엔드에 연결하고 안전한 데이터 처리를 보장했습니다 다음 단계 ui 개선하기 상세 항목 보기 또는 실시간 업데이트와 같은 고급 기능으로 alpine js 구성 요소를 확장하세요 기능 추가하기 추가 백엔드 로직, 서드파티 api 또는 복잡한 접근 제어를 통합하는 것을 탐색하세요 추가 학습 back4app 문서 https //www back4app com/docs 및 추가 리소스를 방문하여 고급 통합에 대한 이해를 심화하세요 코딩을 즐기고 다음 프로젝트를 구축하세요!