React에 Google 클라우드 Firebase 사용

저는 최근에 Google 클라우드 firebase로 아트 포트폴리오 프로젝트를 시작했고 인터페이스가 매우 개발자 친화적이라는 것을 알았습니다! 다음은 해당 웹 사이트에 대한 링크입니다firebase homepage.

프로젝트 시작은 매우 쉬웠습니다! 내 Google 계정으로 로그인하고 프로젝트를 시작했으며 몇 분 안에 내 React 프로젝트를 호스팅할 수 있었습니다. Google Firebase에는 BaaS(서비스로서의 백엔드)로 사용할 수 있는 훌륭한 도구가 많이 있습니다. 데이터베이스와 파일 저장소가 필요한 프로젝트를 시작했습니다. 실시간 데이터베이스에는 몇 가지 훌륭한 기능이 있습니다. 모든 항목을 JSON 형식으로 저장하는 NoSQL 데이터베이스입니다. 실시간 데이터베이스에 대한 자세한 내용은 here을 참조하십시오.

다음은 데이터베이스 샘플 사진입니다.



새 데이터베이스를 시작할 때 마음에 드는 기능 중 하나는 Firebase 콘솔에 새 항목을 수동으로 입력할 수 있다는 것입니다. 이렇게 하면 React 앱을 빌드하고 데이터베이스 항목을 검색하려고 할 때 신속하게 수행할 수 있습니다. 또한 관리자로서 항목을 쉽게 삭제할 수 있습니다. 또한 Firebase 앱의 구성을 시작하는 것도 매우 간단했습니다. Firebase 콘솔에서 설정으로 이동하여 구성을 찾을 수 있습니다. 그것을 찾아서 React 앱에 넣으면 다음과 같이 보일 것입니다.

이 블로그에서는 실시간 데이터베이스에 중점을 둘 것입니다. 먼저 Firebase 데이터베이스 규칙을 설정해야 합니다. 규칙은 "database.rules.json"이라는 JSON 파일에 있습니다. 또는 프로젝트 콘솔에서 데이터베이스 규칙을 사용하고 게시할 수 있습니다. 그러나 문제는 프로젝트 배포를 시작할 때 "database.rules.json"파일이 Firebase 콘솔에 게시한 내용을 재정의하므로 주의해야 합니다. 또한 Firebase 콘솔의 좋은 점은 Rules Playground 기능을 사용하여 규칙을 테스트할 수 있다는 것입니다. 이를 사용하여 규칙에 따라 적절한 읽기 및 쓰기가 달성되는지 확인했습니다. 규칙 놀이터에 대한 자세한 내용은 여기를 참조하세요.

Rules Playground

제 프로젝트에서는 모든 사용자가 작품을 볼 수 있기를 원했습니다. 그러나 admin 사용자에 대한 쓰기를 제한하고 싶었습니다. 이는 아래와 같은 규칙으로 달성할 수 있습니다.

{
  "rules": {
    "some_path": {
      "${subpath}": {
        //
        ".write": "root.child('users').child(auth.uid).child('role').val() == 'admin'",
        ".read": true
      }
    }
  }
}

그래서 쓰기에 대한 규칙을 세분화하면 "사용자"테이블에서 인증된 사용자 ID를 찾고 해당 인증된 사용자의 역할을 확인하여 '관리자'인지 확인합니다. 매우 간단하지만 관련 사용자 ID로 실시간 데이터베이스에 사용자 테이블을 설정해야 합니다.

다시 한 번 규칙을 테스트하여 규칙이 제대로 작동하는지 확인하십시오. 모든 설정은 다를 것입니다.

내가 다루고 싶었던 마지막 주제는 React를 사용하여 데이터베이스에 대한 읽기를 수행하는 것입니다. 이를 위해 저는 React/Redux를 사용하여 데이터를 Redux 스토어로 발송하여 애플리케이션 전체에서 예술 작품을 사용할 수 있도록 했습니다. 이를 위해 React useEffect 함수를 사용하여 한 번 읽기를 수행했습니다. 코드는 다음과 같습니다.

useEffect(() => {
        function getData() {


            let artsRef = firebase.database().ref('arts/')

            return artsRef.once('value', (snapshot) => {

                const data = snapshot.val()

                dispatch({type: 'GET_ARTS', payload: data})
            })

        }
        getData()
    },[dispatch])

보시다시피 가장 먼저 액세스하려는 데이터베이스 리소스에 대한 참조를 생성했습니다. 참조를 생성한 후 'once' 메서드를 사용하여 데이터의 스냅샷을 가져오고 snapshot.val()을 호출하여 결과인 데이터를 가져옵니다. 데이터를 캡처한 후 Redux로 디스패치를 ​​수행하여 내 데이터를 내 artsReducer에 넣습니다. 내 artsReducer 함수는 다음과 같습니다.

export function artsReducer(state = { arts: [], requesting: false, loaded: false}, action) {
    let art;
    let arts;
    switch(action.type) {

        case 'START_REQUESTING_ARTS':

            return {
                ...state,
                arts: [],
                requesting: true,
                loaded: false
            }

        case 'GET_ARTS':

            return {
                ...state,
                arts: action.payload,
                requesting: false,
                loaded: true
            }

        default:
            return state
    }
}

데이터를 얻은 후 React 구성 요소에 대한 지도 렌더링을 수행할 수 있으며 준비가 완료되었습니다!

다음 블로그에서는 실시간 데이터베이스에 대한 특정 쿼리를 수행하는 방법에 대해 설명하겠습니다.

행복한 코딩하세요!