데이터베이스에서 읽기 및 쓰기

모든 백엔드 개발자에게 데이터베이스에서 읽기와 쓰기 명령을 보내는 능력은 가장 표준적이고 필요한 기능 중의 하나이다.그래서 자연스러워요. 제가 건축 분야에 모험을 시작했을 때 가장 먼저 요구한 것 중 하나였어요.데이터베이스에서 읽고 쓰는 과정을 논리적으로 묘사하려 할 때, 나는 매우 간단하다고 느꼈다.나의 유일한 희망은 그것이 실천에서도 마찬가지로 간단하다는 것이다.
그것은
그래, 분명히 해야겠어. 나는 Firebase를 썼어.왜?데이터베이스 분야에서, 그것은 더욱 아낌없는 무료 계획을 가지고 있다. 보완자로서, 나는 내가 일하는 일부 공간에 어떤 제한이 있는지 영원히 모른다. 나는Firebase를 선택하는 것이 일리가 있다.나는 아주 좋은 교과서 몇 권을 보았다. (내가 가장 좋아하는 두 권의 링크는 이 문장의 밑에 있다.) 그 중 많은 교과서들이 나에게 작용하지 않거나 중요한 기능이 부족하다.이 강좌는 내가 최종적으로 성공한 일련의 절차 중 가장 간단한 버전이 될 것이다.
내가 비슷한 임무를 완수하는 훌륭한 강좌에서 겪은 어떤 좌절도 하기가 그리 간단하지 않기 때문이다.그들 중 대다수 사람들의 마음속에는 최종 사용자 인터페이스 목표가 있다. 내가 진정으로 달성하고 싶은 교과 과정 부분에서 이 목표는 사용자 인터페이스를 구축하는 데 약간의 융모를 더했다.그래서 이 글에서 우리는 어떤 것도 세우지 못했다.우리는 단지 일부 데이터를 데이터베이스에 보내고 이 데이터를 검색하는 것을 배울 뿐이다.

1-계정 설정

Firebase console로 이동하면 항목을 추가하는 옵션이 표시되지 않습니다.

그것은 네가 아직 계좌를 만들지 않았다는 것을 의미한다.이 부분을 하지 않으면 계속하기 어렵다.그럼 계좌를 개설해 드릴게요.

Sign up with an existing Google account

지금 너는 너의 컨트롤러로 데려가야 한다.'항목 추가' 단추 (위 그림) 를 누르고 기본 설정에 따라 조작하십시오.

2. 구성 세부 정보 저장

데이터베이스와 통신할 수 있도록 특수한 설정 세부 정보를 얻어야 합니다. 그리고 데이터베이스는 사용자가 시도한 연결을 권한을 부여할 수 있습니다.이러한 상세한 정보를 비준한 후 데이터베이스에서 귀하가 요청한 상세한 정보를 누설할 수 있습니다.

방금 한 프로젝트를 클릭하세요.너는 각종 견해를 제공하는 계기판을 보아야 한다.왼쪽에서 메뉴를 볼 수 있습니다."실시간 데이터베이스"아래의 "구축"을 누르십시오.

아래로 스크롤할 때 흰색 상자를 볼 수 있습니다. 위에'프로젝트에 프로그램이 없습니다'라고 쓰여 있습니다.클릭</>.

필요에 따라 어플리케이션의 이름을 지정합니다.관리형 옵션을 선택하지 않고 "등록 응용 프로그램"을 누르십시오.기본 프롬프트를 따릅니다.

"firebaseConfig"변수가 있는 HTML을 얻을 수 있습니다.이것들은 당신의 설정 세부 사항입니다.선택한 코드 편집기에서 프로젝트를 열거나 새 React 프로젝트를 만듭니다. 이 강좌에 맞게 config.js 라는 파일을 만듭니다.다음 컨텐트를 파일에 붙여넣습니다.

import Firebase from 'firebase';

const config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
  measurementId: '',
};

const app = Firebase.initializeApp(config);
const db = app.database();
export default db;

Firebase가 준 HTML로 돌아갑니다.찾을 수 없으면 프로젝트 설정에 있습니다.config 대상의 상응하는 세부 사항으로 firebaseConfig 대상의 빈 문자열을 작성합니다.

3 - 데이터베이스에 전화 연결

현재, 사용자가 듣고 싶은 것을 알 수 있도록 권한을 부여받은 내용을 데이터베이스에 연결할 수 있습니다.하지만 이 점을 돕기 위해서는 소프트웨어 패키지가 필요하다.따라서 먼저 다음 명령을 사용하여 Firebase 패키지를 설치합니다npm install firebase.

4. 지금 내 생각엔...데이터를 보내다

우리의 데이터베이스는 비어 있기 때문에, 우리가 먼저 일부 물건을 넣는 것은 일리가 있다.Firebase는 json 파일을 사용하기 때문에 필요한 데이터를 포함하는 json 파일을 만들고 'json 가져오기' 단추를 누르면 데이터베이스에 업로드할 수 있습니다.왼쪽 메뉴의 '실시간 데이터베이스' 를 클릭하고 데이터베이스 오른쪽 상단에 있는 3개의 수직점을 선택하면 이 단추를 찾을 수 있습니다.
하지만 그것도 재미없어요.그리고 이것은 당신이 실제로 데이터베이스를 사용하는 방식이 아니다.그래서 우리는 어떤 사건이 방금 발생했다고 가정하고Firebase가 이로 인해 발생한 정보를 어떻게 저장하는지 알고 싶다.나는 아래에서 어떻게 이 점을 해냈는지 개술하였다.이를 이해하려면 제공된 단계 순서에 따라 코드를 따르십시오.

import React, { useState } from 'react'
// 1 - Import your db config
import { db } from '/config.js'

// 2 - Let's start building our component, we're giving it
// the name SendData
export const SendData = () => {
// 3 - We'll set up two states, the values of which will 
// be sent to the database
  const [ text, setText ] = useState('');
  const [ num, setNum ] = useState(0);

// 5 - This is where the magic happens. When the 'Send to
// Database' button is clicked, we tell the database we 
// imported in step #1 as db to push to its root (/) whatever 
// values we have in our 'text' and 'num' states. You might be 
// wondering what 'number' and 'words' are - they are the 
// names of the keys that will be paired with the values from 
// our state. You can change them to what you'd like  
  const send = () => {
    db.ref('/').push({ 
      number: num,
      words: text,
     });
  }

  return (
// 4 - A simple form (yes I know it's not accessible, bare 
// with me) that will store the value of the number and any 
// words you input into the states we setup in step #3. The 
// button runs the 'send' function (see step #5) when it's clicked
    <form>
      <input type="number" onChange={getNum => setNum(getNum)} placeholder='Enter a number' />
      <input type="text" value={text} onChange={getText => setText(getText)} placeholder='Enter some text' />
      <button onClick={send}>
        Send to Database
      </button>
    </form>
  );
}

이 구성 요소를 사용해서 다른 키와 값을 보내려고 시도합니다.다른 상태 유형이 생길 수 있습니다.
단계 #1-4를 성공적으로 따랐다고 가정하고 [데이터베이스로 전송] 버튼을 클릭하면 입력한 데이터가 Firebase 콘솔의 [실시간 데이터베이스]에 표시됩니다.더 많은 값을 입력하고 제출해 보십시오. 데이터베이스가 어떻게 채워졌는지 보십시오.내용이 표시되지 않으면 Firebase 페이지를 새로 고쳐야 합니다.

5 - 지금 나는...데이터 가져오기

지금 저희가 완전한 데이터베이스가 생겼어요. - 예!만약 우리가 데이터베이스에 있는 모든 값을 보고 싶다면?이 점을 실현하기 위해 다른 구성 요소를 추가합시다.이번에 우리는 useEffect 갈고리를 사용하여 구성 요소를 불러온 후에 데이터베이스에 연결하고Firebase가 우리가 그 중에서 무엇을 하려는지 알게 할 것이다.

// 1 - Import the usual statements 
import React, { useState, useEffect } from 'react';
import { db } from '../../config.js';

// 2 - Now we're building a component that gets the data, so 
// we'll call it GetData
export const GetData = () => {
// 3 - Set up a state that will hold the data we receive from 
// the database in useEffect(). This will make it easy for us 
// to just read from this state. It's going to give us back an 
// object, so we'll initialize the state as an empty object 
  const [ data, setData ] = useState({});

// 4 - Here, we're saying at the root (/) of the database, get 
// a snapshot of all the values you see. Set the result of
// this attempt into a variable named 'info'. Since 'info' is 
// an object, we'll use the spread operator to pass all of 
// it's values to a variable called 'allInfo', and then update 
// our state to be the value of 'allInfo'
  useEffect(() => {
    db.ref('/').on('value', (querySnapShot:any) => {
      let info = querySnapShot.val() ? querySnapShot.val() : {};
      let allInfo = {...info};
      setData(allInfo)
    });
  }, [])

  return (
// 5 - We potentially have something inside of our 'data' 
// state. I say 'potentially', because something could go 
// wrong and we might not be able to read from the database. 
// If this happens, our 'data' state will be empty. So, let's 
// use a [conditional operator](https://reactjs.org/docs/conditional-rendering.html#inline-if-else-with-conditional-operator) to first test if it's empty and give our reader a message. 
      {data === {} ? "no data to show here!" :
// 6 - Now for the 'assuming we have some data' part. Since 
// it's an object, we can use the following syntax to parse 
// through it (much like we can loop through an array with 
// map()) and spit out each value of the keys we set earlier 
// in step #4, 'number' and 'words'.
        {Object.values(data).map((value) => 
          <ul>
            <li>{value.number}</li>
            <li>{value.words}</li>
          </ul>
      )}
    }
  );
}

이 코드는 페이지에 모든 '숫자' 와 '단어' 목록을 표시합니다. 이 숫자들은 4단계에서 폼을 통해 제출한 것입니다.네 번째 단계를 건너뛰고 json 파일만 올렸을 때, 'number' 와'words' 를 데이터베이스에 설정한 키로 변경하는 것만 확인하면 됩니다.
전체 설정 과정에서 많은 세부 사항을 제어하지 못할 수 있다. 예를 들어 데이터베이스에서 사용하는 특정한 값, 설정이 정확한지, 유형 스크립트에 특정한 문제 등이다.이것이 바로 내가 단지 하나의 강좌만 배울 수 없는 이유다.그래서 나는 간단한 읽기와 쓰기 시스템을 만들고 마지막에 위의 코드로 귀결시키는 여러 가지 방법을 시도했다.이 강좌는Firebase 데이터베이스와의 상호작용에 필요한 절대적인 기초 지식을 필터하여 소음을 없애는 데 도움을 주기를 바랍니다.
만약 당신이 이 강좌를 읽을 때 특정한 문제에 부딪히면 언제든지 저에게 메시지를 보내 주십시오. 저는 기꺼이 당신이 디버깅하는 것을 도울 것입니다.나도 만났을 거야.😅
다음 기사를 발표해 주셔서 감사합니다. 이 기사들은Firebase 작업의 일부분입니다.몇 개 더 있지만, 이것들이 나를 가장 멀리 가게 한다.

Build a React & Firebase Blog Site

Storing and retrieving data for React Native apps with Firebase

감사Lynda.com의 표지 사진.