Firebase V9의 CRUD 작업

오늘은 firebase v9와 이를 React.js 프로젝트에 통합하는 방법에 대해 이야기하겠습니다. 그럼 우선 오늘은 무엇을 하는지 볼까요?

파이어베이스란?

firebase로 react.js 프로젝트를 생성합니다.

Firebase v9 구성

쓰기 작업.

읽기 작업.

업데이트 작업.

삭제 작업.

1. 파이어베이스란 -
Firebase는 모바일 및 웹 애플리케이션을 위한 클라우드, 데이터베이스 및 기타 여러 서비스를 제공하는 Google의 플랫폼입니다. 애플리케이션 데이터를 동기화하는 Realtime Database 및 API를 제공합니다. 처음에는 무료로 사용할 수 있지만 나중에 대규모로 사용하려면 필요에 따라 비용을 지불하면 됩니다. Firebase에서 타사 호스팅 및 도메인을 사용할 수도 있습니다.

2. firebase로 react.js 프로젝트 생성 -
우리는 todo 반응 프로젝트를 만들고 있으며 백엔드 데이터에 firebase를 사용할 것이므로 실시간으로 todo를 생성, 읽기, 업데이트 및 삭제할 수 있습니다.
먼저 반응 프로젝트를 만들어 봅시다.

npx create-react-app todos

cmd에서 이 명령을 실행하면 빌드가 완료되면 todos라는 폴더가 표시됩니다. 원하는 코드 편집기에서 이 폴더를 엽니다.


이제 아래 명령을 사용하여 firebase를 설치하고 완료되면 package.json 파일에서 firebase 버전을 찾을 수 있습니다.

npm i firebase

이제 Firebase 웹사이트로 이동하여 빠르게 계정을 만들고 콘솔을 클릭한 다음 웹을 클릭하고 프로젝트 이름과 같은 세부 정보를 제공합니다.



이제 웹 아이콘 <> 을 클릭하면 아래와 같은 화면이 표시됩니다. 이 구성 세부 정보를 복사하기만 하면 반응 앱에서 이러한 세부 정보가 필요합니다.


3. Firebase v9 구성 -
이제 다음 작업은 firebase 코드를 반응 앱에 통합하는 것입니다. 이를 위해 src 폴더 아래에 firebaseInit.js(선택적 이름)라는 파일을 만들고 거기에 위의 코드를 복사합니다.

_완료되었습니다. 이제 필요에 따라 반응 앱에서 Firebase를 사용할 수 있습니다. _

4. 쓰기 작업 -
이제 CRUD 작업에 대해 살펴보겠습니다. 반응에서 데이터베이스를 사용하려면 먼저 앱에서 firestore를 가져와야 합니다.



이제 모든 구성 요소에서 db를 사용하고 CRUD 작업을 수행할 수 있습니다. Firestore에서 데이터 쓰기를 시도해 봅시다.



이제 버튼을 클릭하면 14,15행에 설명된 필드와 함께 컬렉션 이름 "todo"(존재하지 않는 경우 firebase가 만듭니다)에 Doc을 추가합니다.



5. 읽기 작업 -
이제 데이터를 firebase로 보낼 수 있지만 데이터를 읽으려면 어떻게 해야 합니까? 화면에서 모든 할 일을 볼 수 없다면 할 일이 없다는 의미입니다. 그런 다음 읽기 구성 요소도 만들어 보겠습니다.

여기에서는 useEffect를 사용하므로 이 구성 요소가 실행될 때마다 Firestore 데이터베이스에서 모든 데이터를 가져옵니다. 이것이 우리의 결과입니다


6. 업데이트 작업 -
이제 나는 공원에 유니콘이 없다는 것을 깨달았고 그것을 테마파크로 바꾸고 싶습니다. 그래서 옵션은 무엇입니까? 내가 할 수 있도록 업데이트 작업을 사용할 수 있습니다. 간단히 하기 위해 읽기 구성 요소로 업데이트 메서드를 만듭니다.

먼저 양식이 있는 모달을 여는 업데이트 버튼을 제공합니다.


이제 보시다시피 양식 데이터를 업데이트하는 handleUpdate 함수가 있습니다.


그게 다야 이제 우리의 결과를 보자


7. 삭제 작업 -
이제 작업이 완료되면 삭제할 수 있도록 삭제 기능이 필요합니다.

여기에는 todo를 삭제할 ID가 있는 handleDelete가 있습니다.

결론

이것은 firebase의 CRUD 작업입니다. 아무데나 붙어 있으면 공급자 프로젝트 링크도 있습니다. 원하는 대로 코드를 사용하고 변경할 수 있습니다. github repo