React와 Pocketbase를 사용한 실시간 Todo 앱

저는 최근에 PocketBase라는 뛰어난 오픈 소스 백엔드 프로젝트를 발견했는데 정말 놀랍습니다.
좋은 부분을 지적해 보겠습니다.

Go로 작성되었으며 누구나 Go가 얼마나 _엄청나게 _ 빠른지 알고 있습니다.

소규모/취미 프로젝트를 위한 Firebase의 오픈 소스 대안입니다.

하나의 파일만 실행할 수 있으며 RealtimeDB, 인증(다른 공급자 사용), 파일 저장소, RestAPI 등에 사용할 수 있습니다.

이제 가장 중요한 부분은 설정하는 데 매우 적은 라인이 필요하며 클라이언트 측에 많은 상용구와 설정이 있는 Firebase에 비해 정말 빠르게 실시간 db를 설정하는 것이 매우 쉽다는 것입니다🤯.

모든 것을 제어할 수 있는 로컬 관리 대시보드는 쉽게 자체 호스팅할 수 있으며 단 하나의 파일로 모든 것을 실행할 수 있습니다. 놀랍지 않습니까! 😲

단점
아직 개발 중이므로 일부 문제에 직면할 수 있지만 개발팀은 문제를 정말 빨리 해결하기 위해 노력하고 있습니다.

PocketBase 대시보드

여기에서 API에 필요한 코드를 쉽게 얻을 수 있습니다.

API 액세스에 대한 고유한 규칙을 쉽게 설정할 수 있습니다.

실시간으로 할일 생성 및 업데이트를 지원하는 React+PocketBase를 사용하여 간단한 할일 앱을 만들었습니다.

according to your OS and run it using the command pocketbase serve .에서 PocketBase 다운로드

브라우저에서 관리 UI를 열고 todoCollection이라는 새 모음을 만들고 이 모음에 이러한 필드를 추가합니다. 이제 목록 작업을 비활성화하고 작업을 만들고 작업 API 규칙을 업데이트하여 모두에게 액세스 권한을 부여합니다.

그것이 서버 측의 전부입니다. 이제 클라이언트 측으로 갑니다.

내 스타일대로 스타일을 지정하려면 Tailwind로 새 반응 앱을 만들고 그대로 두고 TodoScreen.jsx라는 파일이 있는 구성 요소 폴더를 만듭니다.

npm install pocketbase를 사용하여 pocketbase js-SDK를 설치하고 다음을 사용하여 파일로 가져옵니다. import Pocketbase from 'pocketbase'

Pocketbase 문서 자체로도 충분하며 위에서 언급한 것처럼 API에서 사용할 코드를 얻을 수 있는 관리 대시보드도 있습니다.

React에서 실시간을 다루는 중요한 코드:

// realtime
  useEffect(() => {
    client.realtime.subscribe('todoCollection', function (e) {
      // console.log('realtime', e.record);
      let x = todos.filter((item) => item.id !== e.record.id);
      setTodos([e.record, ...x]);
    });
    return () => {
      client.realtime.unsubscribe(); // don't forget to unsubscribe
    };
  });

따라서 클라이언트가 컬렉션을 구독할 때 컬렉션에서 돌연변이를 계속 찾는 것입니다. 컬렉션에서 일부 변경 사항(생성, 업데이트 및 삭제)이 발생하면 해고되고 새 레코드를 반환합니다.

추신 (쉽게 이해할 수 있기 때문에 여기에 전체 코드를 작성하지 않을 것입니다)

전체 코드 링크: https://github.com/rajesh6161/pocketbaseTodo

감사합니다. 쉽고 빠른 설정으로 Realtime DB를 찾는 개발자에게 도움이 되었기를 바랍니다.