React &Firebase 블로그 사이트 만들기: 제1부분

이 글은 최초로 발표되었다on my personal blog site.
환영합니다!이것은 React와Firebase를 이용하여 블로그 사이트를 만드는 방법을 가르치는 일련의 문장 중의 첫 번째 문장이다.이번에는 아마도 가장 긴 것일 것이다. 왜냐하면 모든 것을 안배할 수 있는 일이 거의 없기 때문이다.
본고의 마지막 부분에서, 응용 프로그램을Firebase에 연결하는 방법을 배우고, Firebase's Realtime Database에서 데이터를 추출할 것입니다.다음에는 게시물 작성 기능을 사용하여 CRUD 함수를 설정합니다.다음에, 우리는 전방에 인터페이스를 만들어서 CRUD 함수를 쉽게 호출하고, 더욱 재미있는 함수를 쉽게 만드는 방법을 보게 될 것이다.
준비 다 됐어요?

카탈로그

Firebase 등록

프로젝트 만들기

클론 이니시에이터 코드

Firebase를 애플리케이션에 연결

데이터베이스에 데이터 추가

데이터베이스

에서 읽기

마무리

1. Firebase 등록

이거 쉬워!이동Firebase's website하고 시작 버튼을 클릭합니다.페이지는 다음과 같습니다.

로그인하지 않으면 구글 계정을 선택하라는 메시지가 표시됩니다.로그인하면 항목을 만들 수 있습니다.Firebase의 초보인 경우 이 페이지는 다음과 같습니다.

2. 프로젝트 만들기

프로젝트 만들기 버튼을 클릭하여 3단계 프로세스를 시작합니다.먼저 항목 이름을 입력하라는 메시지가 표시됩니다.나는 내 항목의 이름을 붙였다. react-firebase-blog필요한 경우 항목 ID를 변경할 수 있지만 자동으로 생성된 ID를 사용할 수도 있습니다.

2단계에서는 프로젝트에 대해 Google Analytics를 설정할 것인지 묻습니다.나는'지금이 아니다'를 선택했다.이 옵션을 선택하면 프로세스가 여기서 끝납니다.그렇지 않으면 아직 한 걸음 더 있다

[항목 만들기]를 클릭하면 로드 화면이 나타납니다."새 프로젝트 준비 완료"가 표시되면 "계속"단추를 누르십시오.

3. 클론 시작 코드

터미널에서 다음 명령을 실행하여 이니시에이터 코드를 복제할 수 있습니다.

git clone https://github.com/ashleemboyer/react-firebase-blog-starter.git

뭐가 있는지 보여줘!계속해서 react-firebase-blog-starter 디렉터리로 전환하고 npm install 실행하고 npm run start 실행하면 프로젝트를 시작합니다.다음은 당신이 보아야 할 것입니다.

만세!계속해서 이 프로젝트를 탐색해 봅시다.나는 몇 가지 방면을 중점적으로 소개하여 모두가 그 중에서 시작하도록 할 것이다.

src/App。js

우리는 4개 Routes 가 있다. 홈페이지, 404, 블로그 글꼴 마개 (URL) 를 처리하는 데 쓰인다.경로가 일치하지 않는 도구를 처리할 수 있는 도구가 왜 없는지 알고 싶을 수도 있습니다.잘 받았어!우리는 실제로 Post 구성 요소 (src/pages/post.js에서 이 문제를 처리한다.그거 계속 봅시다.

src/pages/post。js

src/App.js에서 공유기react-router-dom를 사용하기 때문에 Route 요소에 명명된 구성 요소 match 를 도구에 전달합니다.우리는 match.params.slug URL 표시줄에서 게시물의 slug를 가져와 웹 사이트에서 지원하는 slug 목록과 비교할 수 있다.현재 이 코드들은 postSlugs 변수에 하드코딩되어 있다.만약 slug가 존재하지 않는다면, 우리는 404페이지로 되돌아갈 것이다.그렇지 않으면 올바른 게시물이 표시됩니다.

방향을 바꾸다

우선, src/pages/home.js 변수를 사용할 것입니다.Firebase에 응용 프로그램을 연결하기 전까지 게시물을 하드코딩해 왔습니다.이 페이지에서 하는 일은 blogPosts 그룹의 모든 블로그 글에 section 요소를 되돌려 주는 것이다.blogPosts 발표 후, 본 시리즈를 완성할 때, 당신은 어떠한 변경도 할 필요가 없습니다.

4. 애플리케이션에 Firebase 연결

우선 프로젝트의 루트 디렉터리에서 실행return을 통해 firebase 패키지를 설치합니다.
이제 프로젝트의 npm install firebase 디렉토리에 JavaScript 파일을 만들고 이름을 src로 지정합니다.여기서 Firebase 구성을 정의하고 Firebase 객체를 초기화합니다.
이 파일에 코드를 추가하기 전에Firebase 프로젝트에 필요한 설정 데이터를 가져옵니다.왼쪽 표시줄의 설정 표시줄을 클릭하고 메뉴에서 '프로젝트 설정' 을 선택하고Firebase 프로젝트 설정으로 이동합니다.페이지의 '당신의 응용 프로그램' 부분으로 아래로 스크롤합니다.이 가능하다, ~할 수 있다,...그것은 "당신의 프로젝트에 응용 프로그램이 없습니다."라고 말해야 합니다.

웹 응용 프로그램에 Firebase를 추가하려면 firebase.js 처럼 보이는 동그라미를 누르십시오.응용 프로그램의 닉네임을 입력하라는 메시지가 표시됩니다.내가 나에게 전화한 것</>.

"등록 응용 프로그램"단추를 누르면 페이지가 불러오기 완료되면 HTML 코드를 볼 수 있습니다. React Firebase Blog 이라는 변수가 포함되어 있습니다.이 변수에서 JSON 속성을 복사하여 firebaseConfig 파일에 보관합니다."계속 컨트롤러"단추를 누르면 프로젝트 설정으로 돌아갑니다.이전에 복사한 JSON 속성을 잃어버렸다면, 이 부분에 저희 응용 프로그램이 열거되어 있는 '사용자 응용 프로그램' 부분에서 다시 찾을 수 있습니다.
우리firebase.json로 돌아갑시다.구성 데이터를 준비하고 다음 코드를 삽입합니다.

import firebase from "firebase/app";
import database from "firebase/database";

const config = {
  apiKey: "<YOUR-API-KEY>",
  authDomain: "<YOUR-AUTH-DOMAIN>",
  databaseURL: "<YOUR-DATABASE-URL>",
  projectId: "<YOUR-PROJECT-ID>",
  storageBucket: "<YOUR-STORAGE-BUCKET>",
  messagingSenderId: "<YOUR-MESSAGE-SENDER-ID>",
  appId: "<YOUR-APP-ID>",
};

let firebaseCache;

export const getFirebase = () => {
  if (firebaseCache) {
    return firebaseCache;
  }

  firebase.initializeApp(config);
  firebaseCache = firebase;
  return firebase;
};

firebase.js 함수는 우리가 getFirebase()한 번만 호출할 수 있도록 보장할 것이다.

5. 데이터베이스에 데이터 추가

우리는 데이터베이스에서 어떤 데이터도 읽을 수 없다. 만약 우리가 정말로 데이터베이스에 추가하지 않는다면!Firebase 프로젝트로 돌아가 사이드바 '개발' 제목 아래의 '데이터베이스' 옵션을 누르십시오."실시간 데이터베이스"부분을 찾을 때까지 페이지를 아래로 스크롤해야 합니다.

이 섹션의 "데이터베이스 만들기"단추를 누르십시오.데이터베이스에 대한 안전 규칙을 묻는 모드가 나타날 것입니다.

[테스트 모드에서 시작]을 선택하고 [활성화] 버튼을 클릭합니다.데이터베이스가 비어 있고 다음을 읽습니다.

<YOUR-PROJECT-ID>: null

아직 모르는 경우 실시간 데이터베이스는 JSON 객체일 뿐입니다.더 많은 정보를 읽을 수 있다here.
가장 빠른 시작 방법은 JSON 파일을 사용하여 데이터를 가져오는 것입니다.나도 너희들에게 이것을 제공하여 너희가 세심한 관심을 가지지 않도록 하고 나와 같은 것을 보여주기를 바란다.starter 항목의 루트 디렉터리에서 이 파일을 찾을 수 있습니다.세 가지 메뉴를 클릭하고 [JSON 가져오기]를 선택하여 파일 업로드에 들어갑니다.파일을 찾아 가져오기 버튼을 클릭합니다.
지금 당신은 데이터 속성이 있어야 합니다. 당신은 확장하고 탐색할 수 있습니다!

6. 데이터베이스에서 읽기

드디어!우리가 기다렸던 그 순간.데이터베이스에서 정보를 얻을 수 있는지 알아보자initializeApp!
먼저 파일 상단에 가져오기를 추가합니다.

// You only need to add the `{ useState }` portion here.
import React, { useState } from "react";

// This is new.
import { getFirebase } from "../firebase";

이제 데이터베이스에서 읽을 수 있는 상태로 들어갑니다.당신은 src/home.js 연결here에 대한 더 많은 정보를 읽을 수 있습니다.또한 다음과 같은 두 가지 작업을 쉽게 수행할 수 있도록 상태blogPosts를 추가합니다.

한 번만 전화할 수 있도록useState

데이터 대기 중 로드 화면 표시

loading 상수를 다음 코드로 바꿉니다.

const [loading, setLoading] = useState(true);
const [blogPosts, setBlogPosts] = useState([]);

if (loading && !blogPosts.length) {
  getFirebase()
    .database()
    .ref("/posts")
    .orderByChild("date")
    .once("value")
    .then(snapshot => {
      let posts = [];
      const snapshotVal = snapshot.val();
      for (let slug in snapshotVal) {
        posts.push(snapshotVal[slug]);
      }

      const newestFirst = posts.reverse();
      setBlogPosts(newestFirst);
      setLoading(false);
    });
}

if (loading) {
  return <h1>Loading...</h1>;
}

타다!너는 우리와 이전과 완전히 같은 것을 보아야 한다.🎉

7. 마무리

여기 물건이 많아요.질문이나 걱정이 있으시면 send me an email 또는!만약 네가 피곤하거나 어찌할 바를 모른다면, 나는 최선을 다해 너를 도울 것이다.계속해서 내일의 게시물을 주목해 주십시오. 우리는 어떻게 우리의 새로운, 독특한 블로그 사이트를 위해 CRUD 함수를 작성하는지 소개할 것입니다!만약 네가 다람쥐를 느끼고 그 전에 한번 해 보고 싶다면, 나는 네가 가서 보도록 격려한다Firebase documentation.
내가 통신하는 거 알아?📬
새 블로그 게시물을 올리거나 중대한 프로젝트 공지를 올리고 싶을 때 알림을 받으려면 https://ashleemboyer.com/newsletter을 방문하십시오.