Building a Basic CRUD Application with Lit?

개요 이 가이드에서는 lit를 사용하여 완전한 crud(생성, 읽기, 업데이트, 삭제) 애플리케이션을 생성합니다 우리는 이러한 필수 작업을 수행하는 애플리케이션을 구축하여 데이터를 동적으로 관리하는 방법을 보여줄 것입니다 처음에는 basic crud app lit 라는 back4app 프로젝트를 설정하여 강력한 백엔드로 사용합니다 프로젝트를 설정한 후, 수동으로 또는 back4app ai 에이전트의 도움을 받아 컬렉션과 필드를 정의하여 유연한 데이터베이스 스키마를 설계합니다 이 단계는 시스템이 crud 작업을 신뢰성 있게 처리하도록 보장하는 데 중요합니다 다음으로, back4app admin app—사용자 친화적인 드래그 앤 드롭 인터페이스를 사용하여 컬렉션을 효율적으로 관리합니다 마지막으로, rest/graphql을 사용하여 lit 프론트엔드를 back4app과 통합하여 백엔드가 적절한 접근 제어로 안전하게 유지되도록 합니다 이 튜토리얼이 끝나면 기본 crud 기능을 수행할 뿐만 아니라 사용자 인증 및 안전한 데이터 처리를 포함하는 프로덕션 준비가 완료된 웹 애플리케이션을 갖게 됩니다 핵심 사항 신뢰할 수 있는 백엔드로 데이터를 효과적으로 관리하는 crud 애플리케이션 개발을 마스터하세요 확장 가능한 데이터베이스를 설계하고 lit 기반 프론트엔드와 원활하게 통합하는 방법을 배우세요 crud 작업을 간소화하기 위해 드래그 앤 드롭 관리 도구(back4app 관리 앱)를 활용하세요 웹 애플리케이션을 효율적으로 배포하기 위한 컨테이너화(docker 포함) 전략을 이해하세요 필수 조건 시작하기 전에 다음을 확인하세요 새 프로젝트가 있는 back4app 계정입니다 도움이 필요하면 back4app 시작하기 https //www back4app com/docs/get started/new parse app 를 참조하세요 lit 개발 환경입니다 선호하는 스타터 키트를 사용하여 프로젝트를 설정하고 node js(v14 이상)가 설치되어 있는지 확인하세요 javascript, lit 및 rest api에 대한 기본 지식입니다 필요한 경우 lit 문서 https //lit dev/docs/ 를 참조하세요 1단계 – 프로젝트 초기화 새 back4app 프로젝트 설정하기 back4app 계정에 로그인하세요 대시보드에서 “새 앱” 옵션을 선택하세요 프로젝트 이름을 지정하세요 basic crud app lit 이고, 지침에 따라 생성하세요 새 프로젝트 만들기 프로젝트가 생성되면 대시보드에 나타나며, 백엔드 구성 및 프로젝트 관리를 위한 기초를 제공합니다 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 application 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) 이 ai 기능을 사용하면 데이터베이스가 최적으로 구조화되도록 보장하면서 귀중한 시간을 절약할 수 있습니다 3단계 – 관리자 앱 및 crud 기능 활성화 관리자 앱 소개 back4app 관리자 앱은 손쉬운 백엔드 데이터 관리를 위한 코드 없는 인터페이스를 제공합니다 직관적인 드래그 앤 드롭 기능을 통해 crud 작업—생성, 읽기, 업데이트 및 삭제—을 쉽게 수행할 수 있습니다 관리자 앱 활성화 방법 back4app 대시보드에서 “더보기” 섹션에 접근하세요 “관리자 앱”을 선택하고 클릭하세요 “관리자 앱 활성화 ” 초기 관리자 사용자를 생성하여 관리자 자격 증명을 설정하세요 이 사용자는 역할(예 b4aadminuser ) 및 시스템 컬렉션을 구성합니다 관리자 앱 활성화 활성화 후, 관리자 앱에 로그인하여 컬렉션을 관리하세요 관리자 앱 대시보드 관리자 앱을 통한 crud 작업 수행 관리자 앱 내에서 다음을 수행할 수 있습니다 항목 생성 컬렉션 내에서 “레코드 추가” 버튼을 클릭하여 새 항목을 생성하세요 레코드 읽기/수정 레코드를 클릭하여 세부 정보를 확인하거나 필드를 수정하세요 레코드 제거 더 이상 필요하지 않은 항목을 삭제 기능을 사용하여 제거하세요 이 간단한 인터페이스는 데이터 관리를 간소화하여 사용자 경험을 크게 향상시킵니다 4단계 – lit와 back4app 연결하기 이제 백엔드가 구성되고 관리되었으므로, lit 프론트엔드를 back4app과 통합할 시간입니다 옵션 a parse sdk 사용하기 (해당되는 경우) parse sdk 설치하기 npm install parse lit 앱에서 parse 설정하기 구성 파일을 생성하세요 (예 src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // 여기에 back4app 자격 증명을 입력하세요 parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; lit 컴포넌트에서 parse 구현하기 아이템을 검색하고 표시하는 lit 컴포넌트를 생성하세요 // src/components/itemslist js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class itemslist extends litelement { static properties = { items { type array } }; constructor() { super(); this items = \[]; } connectedcallback() { super connectedcallback(); this fetchitems(); } async fetchitems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error("아이템 검색 중 오류 ", error); } } render() { return html` \<h2>아이템\</h2> \<ul> ${this items map( (item) => html` \<li>${item get("title")} — ${item get("description")}\</li> ` )} \</ul> `; } } customelements define('items list', itemslist); export default itemslist; 옵션 b rest 또는 graphql 활용하기 parse sdk가 프로젝트에 적합하지 않은 경우, rest 또는 graphql을 사용하여 crud 작업을 수행하세요 예를 들어, rest를 통해 아이템을 검색하려면 // example rest request to get items const fetchitems = 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(); console log('items retrieved ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); 필요에 따라 lit 구성 요소 내에서 이러한 api 호출을 통합하세요 5단계 – 백엔드 보호하기 액세스 제어 목록(acl) 구현하기 acl을 설정하여 객체를 보호하세요 예를 들어, 개인 항목을 생성하려면 async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } 클래스 수준 권한(clp) 구성하기 back4app 대시보드 내에서 각 컬렉션의 clp를 조정하여 기본 액세스 규칙을 적용합니다 이를 통해 인증된 사용자 또는 권한이 부여된 사용자만 민감한 정보에 접근할 수 있습니다 단계 6 – 사용자 인증 구현 사용자 계정 생성 back4app은 parse의 사용자 클래스를 사용하여 인증을 관리합니다 lit 애플리케이션에서 아래와 같이 사용자 등록 및 로그인을 구현합니다 // src/components/auth js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class signupform extends litelement { static properties = { username { type string }, password { type string }, email { type string } }; constructor() { super(); this username = ''; this password = ''; this email = ''; } async handlesignup(e) { e preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registration successful!'); } catch (error) { alert('registration error ' + error message); } } render() { return html` \<form @submit="${this handlesignup}"> \<input type="text" placeholder="username" value="${this username}" @input="${e => this username = e target value}" /> \<input type="password" placeholder="password" value="${this password}" @input="${e => this password = e target value}" /> \<input type="email" placeholder="email" value="${this email}" @input="${e => this email = e target value}" /> \<button type="submit">register\</button> \</form> `; } } customelements define('sign up form', signupform); export default signupform; 로그인 및 세션 관리도 유사하게 구현할 수 있습니다 소셜 인증, 이메일 확인 및 비밀번호 재설정과 같은 추가 기능은 back4app 대시보드를 통해 설정할 수 있습니다 7단계 – 웹 배포를 통한 lit 프론트엔드 배포 back4app의 웹 배포 기능을 사용하면 github 리포지토리에서 코드를 배포하여 lit 애플리케이션을 호스팅할 수 있습니다 프로덕션 빌드를 준비하고, 코드를 github에 푸시하고, 사이트를 배포하려면 다음 단계를 따르세요 7 1 프로덕션 빌드 생성하기 터미널에서 프로젝트 디렉토리를 엽니다 빌드 명령을 실행합니다 npm run build 이 명령은 최적화된 정적 자산을 포함하는 build 폴더를 생성합니다 빌드 확인 build 폴더에 필요한 하위 디렉토리와 함께 index html 파일이 포함되어 있는지 확인합니다 7 2 코드 정리 및 업로드 귀하의 github 리포지토리는 lit 프론트엔드의 전체 소스 코드를 포함해야 합니다 일반적인 프로젝트 구조는 다음과 같을 수 있습니다 basic crud app lit frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md 예제 구성 파일 src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 예제 메인 애플리케이션 파일 src/app js import { litelement, html } from 'lit'; import parse from ' /parseconfig'; class approot extends litelement { static properties = { items { type array }, newtitle { type string }, newdescription { type string } }; constructor() { super(); this items = \[]; this newtitle = ''; this newdescription = ''; } connectedcallback() { super connectedcallback(); this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error("failed to load items ", error); } } async additem() { const items = parse object extend("items"); const item = new items(); item set("title", this newtitle); item set("description", this newdescription); try { await item save(); this newtitle = ''; this newdescription = ''; this loaditems(); } catch (error) { console error("error adding item ", error); } } render() { return html` \<div style="padding 2rem;"> \<h1>items\</h1> \<div> \<input type="text" placeholder="title" value="${this newtitle}" @input="${e => this newtitle = e target value}" /> \<input type="text" placeholder="description" value="${this newdescription}" @input="${e => this newdescription = e target value}" /> \<button @click="${this additem}">add item\</button> \</div> \<ul> ${this items map(item => html` \<li> \<strong>${item get("title")}\</strong> ${item get("description")} \</li> `)} \</ul> \</div> `; } } customelements define('app root', approot); export default approot; 코드를 github에 푸시하기 프로젝트 디렉토리에서 git 초기화하기 git init 모든 파일 추가하기 git add 변경 사항 커밋하기 git commit m "initial lit frontend commit" github에 새 저장소 만들기 (예 basic crud app lit frontend ) 코드 푸시하기 git remote add origin https //github com/your username/basic crud app lit frontend git git push u origin main 7 3 github 리포지토리를 back4app 웹 배포와 연결하기 웹 배포 접근하기 back4app 대시보드에 로그인하고, 프로젝트(기본 crud 앱 리트)를 선택한 후 웹 배포 옵션을 선택하세요 github 계정 연결하기 프롬프트에 따라 github 계정을 연결하여 back4app이 리포지토리에 접근할 수 있도록 하세요 리포지토리 및 브랜치 선택하기 리포지토리(예 기본 crud 앱 리트 프론트엔드 )와 lit 코드가 포함된 브랜치(예 main )를 선택하세요 7 4 배포 설정 구성하기 빌드 설정을 지정하십시오 빌드 명령 미리 빌드된 build 폴더가 없으면 npm run build 와 같은 명령을 사용하십시오 back4app은 배포 중에 이 명령을 실행합니다 출력 디렉토리 back4app이 정적 파일을 찾을 수 있도록 build 로 설정하십시오 환경 변수 필요한 api 키 또는 기타 환경별 값을 포함하십시오 7 5 docker로 lit 애플리케이션 컨테이너화하기 docker를 선호하는 경우, 리포지토리에 dockerfile 을 포함하십시오 \# use a lightweight node image for building the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining source code and build the app copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] back4app 배포 설정에서 docker 배포 옵션을 선택하여 애플리케이션을 컨테이너화하십시오 7 6 애플리케이션 시작하기 배포 시작하기 설정을 완료한 후 배포 버튼을 클릭하세요 프로세스 모니터링 back4app이 github 코드를 가져오고, 빌드 명령을 실행하며, 컨테이너를 배포합니다 실시간 url 받기 배포가 완료되면 lit 애플리케이션이 호스팅되는 url이 제공됩니다 7 7 배포 검증하기 url 방문하기 제공된 링크를 브라우저에서 엽니다 기능 테스트 애플리케이션이 제대로 로드되고, 탐색이 작동하며, 모든 자산이 올바르게 제공되는지 확인합니다 필요시 디버깅 브라우저 개발자 도구를 사용하여 문제를 검사합니다 문제가 발생하면 back4app의 배포 로그를 검토하세요 8단계 – 최종 생각 및 향후 개선 사항 잘 하셨습니다! lit와 back4app을 사용하여 기본 crud 애플리케이션을 성공적으로 개발했습니다 basic crud app lit "라는 프로젝트를 설정하고, 항목 및 사용자에 대한 자세한 데이터베이스 스키마를 정의했으며, 관리 앱을 통해 데이터를 관리했습니다 또한, lit 프론트엔드를 백엔드와 통합하고 강력한 보안 조치를 구현했습니다 다음 단계 프론트엔드 개선 상세 항목 페이지, 검색 기능 및 실시간 업데이트와 같은 기능을 추가하세요 백엔드 기능 확장 클라우드 기능, 외부 api 서비스 또는 역할 기반 접근 제어와 같은 고급 기능을 통합하세요 더 많은 리소스 탐색 back4app 문서 https //www back4app com/docs 및 기타 튜토리얼을 방문하여 성능 및 사용자 정의에 대한 더 깊은 통찰력을 얻으세요 이 가이드를 따르면 이제 back4app을 사용하여 lit 애플리케이션을 위한 확장 가능하고 안전한 crud 백엔드를 만들 수 있는 기술을 갖추게 되었습니다 코딩을 즐기고 계속 혁신하세요!