How to Build a Basic CRUD App with Knockout.js: A Step-by-Step Guide

개요 이 가이드에서는 knockout js를 사용하여 완전한 기능을 갖춘 crud(생성, 읽기, 업데이트, 삭제) 애플리케이션을 만드는 방법을 배웁니다 이 튜토리얼은 back4app을 백엔드 서비스로 활용하면서 웹 앱 내에서 필수 작업을 구현하는 방법을 보여줍니다 먼저, basic crud app knockout 이라는 제목의 back4app 프로젝트를 설정하여 애플리케이션을 위한 신뢰할 수 있는 데이터 관리 시스템을 구축합니다 그 후, back4app ai 에이전트의 도움을 받아 수동으로 또는 자동으로 컬렉션과 필드를 정의하여 유연한 데이터베이스 스키마를 설계하여 애플리케이션이 모든 crud 작업을 효과적으로 처리할 수 있도록 합니다 다음으로, back4app admin app을 사용하여 컬렉션을 쉽게 관리할 수 있는 사용자 친화적인 드래그 앤 드롭 도구를 사용합니다 이 인터페이스는 crud 작업을 실행하는 과정을 간소화합니다 마지막으로, rest api 호출을 사용하여 knockout js 프론트엔드를 back4app과 통합합니다 이 통합은 적절한 접근 제어와 함께 안전한 백엔드 관행도 포함합니다 이 튜토리얼이 끝날 무렵, 기본 crud 기능을 지원하고 사용자 인증을 포함하며 강력한 데이터 관리를 특징으로 하는 프로덕션 준비가 완료된 웹 앱을 구축하게 될 것입니다 주요 요점 back4app을 사용하여 데이터를 효율적으로 관리하는 crud 애플리케이션을 개발하는 방법을 이해합니다 확장 가능한 백엔드를 설계하고 이를 knockout js 프론트엔드와 연결하는 실무 경험을 쌓습니다 생성, 읽기, 업데이트 및 삭제 작업을 실행하기 위한 코드 없는 관리 도구(back4app admin app)를 사용하는 방법을 배웁니다 웹 앱을 신속하게 배포하기 위한 docker 컨테이너화 등 배포 전략을 발견합니다 전제 조건 시작하기 전에 다음을 확인하세요 back4app 계정과 활성 프로젝트가 필요합니다 안내가 필요하면 back4app 시작하기 https //www back4app com/docs/get started/new parse app 를 참조하세요 knockout js에 대한 개발 환경이 설정되어 있어야 합니다 cdn을 통해 라이브러리를 포함하거나 모듈식 설정을 선호하는 경우 npm을 통해 설치하세요 javascript, knockout js 및 rest api에 대한 기본 지식이 필요합니다 소개를 위해 knockout js 문서 https //knockoutjs com/documentation/introduction html 를 참조하세요 1단계 – 프로젝트 초기화 back4app 프로젝트 설정하기 back4app 계정에 접근하세요 대시보드에서 “새 앱” 옵션을 선택하세요 프로젝트 이름을 입력하세요 basic crud app knockout 설정 과정을 완료하세요 새 프로젝트 만들기 생성된 후, 프로젝트는 대시보드에서 볼 수 있으며, 백엔드 구성의 기반을 형성합니다 2단계 – 데이터베이스 스키마 작성하기 데이터 구조 설계 이 crud 앱을 위해 여러 컬렉션을 생성할 것입니다 아래는 데이터베이스 설계를 안내하기 위한 제안된 필드와 데이터 유형이 포함된 샘플 컬렉션입니다 이 스키마는 기본 crud 작업을 지원합니다 1 항목 컬렉션 필드 데이터 유형 세부사항 id 객체 id 자동으로 생성된 고유 키 제목 문자열 항목의 제목 설명 문자열 항목에 대한 간략한 요약 생성일 날짜 항목이 생성된 타임스탬프 업데이트됨 날짜 마지막 업데이트의 타임스탬프 2 사용자 수집 필드 데이터 유형 세부사항 id 객체 id 자동 생성된 고유 식별자 사용자 이름 문자열 각 사용자에 대한 고유 식별자 이메일 문자열 사용자의 고유 이메일 주소 비밀번호 해시 문자열 사용자의 비밀번호의 보안 해시 생성일 날짜 계정 생성 타임스탬프 업데이트됨 날짜 마지막 계정 업데이트의 타임스탬프 이러한 컬렉션은 back4app 대시보드에서 각 컬렉션에 대한 새 클래스를 추가하고 필드를 정의하여 수동으로 생성할 수 있습니다 새 클래스 만들기 데이터 유형을 선택하고, 필드 이름을 지정하고, 기본값을 설정하고, 필수 필드를 표시하여 필드를 정의합니다 열 만들기 스키마 자동화를 위한 back4app ai 에이전트 사용하기 back4app ai 에이전트는 대시보드에서 직접 스키마 생성을 간소화합니다 설명에 따라 컬렉션과 필드를 자동으로 생성할 수 있습니다 ai 에이전트 사용 단계 ai 에이전트 시작하기 back4app 대시보드 또는 프로젝트 설정을 통해 접근합니다 데이터 모델 세부사항 작성하기 필요한 컬렉션과 필드를 나열한 설명 프롬프트를 붙여넣습니다 검토 및 적용하기 에이전트가 스키마를 제안합니다 제안을 검토하고 확인하여 프로젝트에 통합합니다 샘플 프롬프트 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단계 – knockout js와 back4app 연결 백엔드가 준비되었으니, rest api 호출을 사용하여 knockout js 프론트엔드를 통합할 시간입니다 crud 작업을 위한 rest api 사용 parse sdk는 일반적으로 knockout js와 함께 사용되지 않으므로, api 호출을 직접 수행합니다 아래는 crud 작업을 처리하는 방법의 예입니다 항목 가져오기 예제 // example rest call to retrieve items function fetchitems() { fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(response => response json()) then(data => { viewmodel items(data results); }) catch(error => console error('error retrieving items ', error)); } fetchitems(); knockout js viewmodel 예제 아래는 항목을 관리하기 위한 viewmodel의 예입니다 function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var newitem = { title self newtitle(), description self newdescription() }; 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(newitem) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; self deleteitem = function(item) { fetch('https //parseapi back4app com/classes/items/' + item objectid, { method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(() => { self items remove(item); }) catch(error => console error('error deleting item ', error)); }; // additional methods for update and read operations can be added similarly } // activate knockout js ko applybindings(new appviewmodel()); 이 viewmodel은 knockout js 옵저버블을 사용하여 상태를 관리하면서 항목을 생성하고 삭제하기 위한 api 호출을 통합합니다 5단계 – 백엔드 보안 액세스 제어 목록 (acls) 각 객체에 acl을 할당하여 데이터를 보호하세요 예를 들어, 항목을 생성자만 접근할 수 있도록 하려면 function createsecureitem(itemdata, owneruserid) { var newitem = { title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, \[owneruserid] { "read" true, "write" true } } }; 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(newitem) }) then(response => response json()) then(data => console log('secure item created ', data)) catch(error => console error('error creating item ', error)); } 클래스 수준 권한 (clps) back4app 대시보드 내에서 각 컬렉션에 대한 clps를 설정하여 인증된 사용자 또는 권한이 있는 사용자만 민감한 정보에 접근할 수 있도록 합니다 6단계 – 사용자 인증 구현 사용자 계정 구성 back4app은 인증 관리를 위해 사용자 클래스를 사용합니다 knockout js 앱에서 rest api 호출을 사용하여 사용자 등록 및 로그인을 처리합니다 예 사용자 등록 function registeruser(username, password, email) { var user = { username username, password password, email email }; fetch('https //parseapi back4app com/users', { 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(user) }) then(response => response json()) then(data => alert('registration successful!')) catch(error => alert('registration error ' + error message)); } 사용자 로그인 및 세션 관리에 대해서도 유사한 접근 방식을 따를 수 있습니다 이메일 확인 및 비밀번호 재설정과 같은 추가 기능은 back4app을 통해 구성할 수 있습니다 7단계 – 웹 배포를 사용하여 knockout js 프론트엔드 배포 back4app의 웹 배포 기능을 사용하면 github 리포지토리를 연결하여 knockout js 프론트엔드를 손쉽게 호스팅할 수 있습니다 다음 단계를 따르세요 7 1 프로덕션 파일 빌드하기 터미널에서 프로젝트 디렉토리를 엽니다 빌드 프로세스를 실행합니다 webpack과 같은 빌드 도구를 사용하는 경우, 적절한 명령어를 실행합니다 (예 npm run build ) 자산을 컴파일합니다 빌드를 확인합니다 빌드 폴더에 index html 및 모든 필수 정적 자산이 포함되어 있는지 확인합니다 7 2 코드를 정리하고 github에 커밋하기 저장소에는 knockout js 프론트엔드의 모든 소스 파일이 포함되어야 합니다 예시 구조는 다음과 같을 수 있습니다 basic crud app knockout frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── appviewmodel js │ └── styles css ├── package json └── readme md 샘플 파일 src/appviewmodel js function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var itemdata = { title self newtitle(), description self newdescription() }; 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) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; // additional crud methods (update, delete) can be defined similarly } // apply knockout bindings ko applybindings(new appviewmodel()); 코드를 github에 커밋하고 푸시하기 git 초기화 (이미 완료되지 않은 경우) git init 파일 스테이징 git add 변경 사항 커밋 git commit m "knockout js 프론트엔드를 위한 초기 커밋" github 리포지토리 생성 (예 basic crud app knockout frontend )입니다 코드 푸시 git remote add origin https //github com/your username/basic crud app knockout frontend git git push u origin main 7 3 github 리포지토리와 웹 배포 연결하기 웹 배포 기능 접근 back4app 대시보드에서 프로젝트 (basic crud app knockout)를 선택하고 웹 배포 를 클릭합니다 github에 연결 프롬프트에 따라 github 계정을 통합합니다 리포지토리 및 브랜치 선택 리포지토리 (예 basic crud app knockout frontend )와 코드가 포함된 브랜치 (예 main )를 선택합니다 7 4 배포 설정 빌드 명령어 저장소에 미리 빌드된 폴더가 포함되어 있지 않다면, 빌드 명령어를 지정하세요 (예 npm run build ) 출력 디렉토리 정적 파일이 포함된 폴더로 설정하세요 (예 build 또는 public ) 환경 변수 api 키와 같은 필수 환경 변수를 추가하세요 7 5 도커를 사용한 애플리케이션 컨테이너화 (선택 사항) 도커를 사용하고자 한다면, 저장소에 dockerfile 을 포함하세요 # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source code and build the 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;"] 7 6 애플리케이션 배포 배포 버튼 클릭 설정을 구성한 후 배포를 시작합니다 프로세스 모니터링 back4app이 코드를 가져오고, 필요시 빌드하며, 컨테이너화된 앱을 배포합니다 앱에 접근 완료되면 back4app이 knockout js 앱에 접근할 수 있는 url을 제공합니다 7 7 배포 테스트 제공된 url 열기 앱이 제대로 로드되는지 확인합니다 테스트 실행 모든 경로와 자산(css, js, 이미지)이 작동하는지 확인합니다 필요시 디버깅 개발자 도구를 사용하여 오류를 검사하고 back4app 배포 로그를 참조합니다 8단계 – 결론 및 향후 방향 잘 했어요! knockout js와 back4app을 사용하여 기본 crud 애플리케이션을 성공적으로 구축했습니다 “ basic crud app knockout ”이라는 이름의 프로젝트를 설정하고, 항목 및 사용자에 대한 자세한 컬렉션을 작성했으며, 관리 앱을 통해 데이터를 관리했습니다 또한, rest api 호출을 사용하여 knockout js 프론트엔드를 백엔드와 통합하고 안전한 접근 제어를 구현했습니다 다음 단계 프론트엔드 확장 상세 항목 보기, 검색 기능 또는 실시간 업데이트와 같은 기능으로 앱을 향상시키세요 고급 백엔드 로직 추가 클라우드 기능을 사용하거나 타사 서비스를 통합하는 것을 탐색하세요 더 깊이 파고들기 추가 최적화 및 고급 통합을 위해 back4app 문서 https //www back4app com/docs 를 참조하세요 이 튜토리얼을 따라 하면서 이제 back4app을 사용하여 knockout js로 강력하고 확장 가능한 crud 앱을 구축할 수 있는 지식을 갖추게 되었습니다 즐거운 코딩 되세요!