React & Firebase 블로그 사이트 구축: 제3부분

이 글은 최초로 on my personal blog site에 발표되었다.
우리는 이미 React와 Firebase 시리즈의 세 번째 부분에 들어갔다.part one에서 우리는 모든 것을 어떻게 설정하는지 배웠다.Last time, 우리는 새로운 블로그 게시물을 만들기 위한 페이지를 만들었다.오늘 Firebase 실시간 데이터베이스에서 하나의 게시물을 읽고 응용 프로그램에 표시합니다.
만약 네가 아직 앞의 두 문장을 읽지 않았다면, 나는 네가 사용할 수 있는 입문 코드가 좀 있다.추가 작업을 수행하기 전에 the first part 의 1, 2 및 5단계를 따르십시오.

카탈로그

클론(3 섹션) 이니시에이터 코드 [옵션]

검사Post 부품

구성 요소를 Firebase에 연결

1. 클론(3 섹션) 이니시에이터 코드 [옵션]

섹션 2를 성공적으로 마쳤으면 이 단계를 건너뜁니다.그렇지 않으면 터미널에서 다음 명령을 실행하여 코드를 복제할 수 있습니다.

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

계속하기 전에 파일을 변경해야 합니다: Post.켜면 다음과 같은 상수src/firebase.js가 표시됩니다.

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>"
};

상수의 속성은 Firebase 항목에 응용 프로그램을 연결하는 데 사용됩니다.이러한 값을 찾으려면 Firebase console 왼쪽 막대의 기어 아이콘을 통해 항목 설정으로 이동합니다.응용 프로그램 아래의 Firebase SDK 코드 세그먼트로 아래로 스크롤하고 호출된 내용 config 에서 속성을 복사합니다.상수의 속성을 이 값으로 대체합니다.
이제 firebaseConfig 및 config 을 실행하여 브라우저에서 항목을 볼 수 있습니다.

2. npm 설치 구성 요소 확인

npm run start 파일에서 구성 요소를 찾을 수 있습니다.지금 무슨 짓을 하고 있는지 봅시다.
우선, 이것은 우리가 Post 에서 설정한 src/pages/post.js URL에서 slug를 가져옵니다.Router에 전달된 src/App.js 구성 요소에 Route 도구가 있습니다.이 도구를 구성 요소에 보내는 다른 방법도 있습니다. 더 많은 정보를 읽을 수 있습니다over here.
다음으로 우리는 Router 상수가 있는데 이것은 실제 블로그 글과 함께 존재하는 蛞蝓수조이다.만약 당신이 데이터베이스를 본다면, 이것은 우리가 첫 번째와 두 번째 블로그 게시물을 주는 slug와 일치합니다.문제는 이 코드는 동적이지 않고 데이터베이스에 연결되지 않았다는 것이다.우리는 며칠 후에 다시 돌아와서 이 문제를 토론한다.
다음은 URL 모음의 match 이 postSlugs 중 하나인지 확인합니다.만약 그렇지 않다면, 사용자가 보려고 하는 댓글은 실제로 존재하지 않는다.따라서 slug 구성 요소로 돌아갑니다.postSlugsover here에 대한 더 많은 정보를 읽을 수 있습니다.
마지막으로, 우리는 우리의 보답 성명을 가지고 있다.현재 유효한 게시물마다 같은 내용Redirect을 되돌려줍니다.반면 Firebase에 저장된 실제 블로그 글의 내용을 보여주고 싶습니다.

3. Firebase에 404 구성 요소 연결

우선, 데이터베이스에서 읽기 위해importRedirect 함수를 추가합니다.이 방면에서 우리는 또한 slug 을 도입하여 몇 가지 일을 관리하는 데 도움을 주어야 한다.

import React, { useState } from "react";

import { getFirebase } from "../firebase";

다음은 우리가 Post로 무엇을 관리하고 싶은지 생각해 보자.먼저 생각난 것은 getFirebase상태.이것은 우리가 데이터베이스에서 어떤 내용을 불러오려고 하는지 설명하는 부울 값이 될 것이다.우리는 또한 데이터베이스에서 useState 변수를 읽기를 희망한다.다음 두 줄 코드로 행 useState 을 바꿉니다.

const [loading, setLoading] = useState(true);
const [currentPost, setCurrentPost] = useState();

우리는 사용자가 페이지가 불러오고 있음을 표시하기 위해 불러오는 상태부터 시작하기를 희망합니다.너는 애니메이션, GIF, 순수한 텍스트, 네가 좋아하는 모든 것을 표시할 수 있다.우리는 다음 텍스트를 되돌리기만 하면 잠시 간단하게 유지할 수 있다.

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

그러나 우리의 데이터베이스 호출은 loading 문장 이전에 진행해야 한다.만약 우리가 그것을 뒤에 두었다면, 그것은 영원히 도착하지 않을 것이다. 왜냐하면 currentPost 문장이 코드를 앞당겨 되돌려 주기 때문이다.다음은 저희가 전화postSlugs 이후와 방금 쓴 if 성명 전에 추가할 내용입니다.

if (loading && !currentPost) {
  getFirebase()
    .database()
    .ref()
    .child(`/posts/${slug}`)
    .once("value")
    .then(snapshot => {
      if (snapshot.val()) {
        setCurrentPost(snapshot.val());
      }
      setLoading(false);
    });
}

게시물의 존재 여부를 업데이트해 보겠습니다.if 업데이트:

const postDoesNotExist = !currentPost;

이 조건들은 처음에는 좀 곤혹스러울 수도 있다.뭐 공부 해요?이 단계에서 실행하는 것이 도움이 될 수 있습니다. 파일에 컨트롤러 로그를 추가해서 이 절차를 처리할 수 있습니다.

첫 번째 불러올 때: useStatetrue, if 정의되지 않았기 때문에 postDoesNotExist 문장에 들어갑니다.일단 우리가 그것을 loading에 넣으면, setCurrentPost 대상을 되돌려주고, (주어진 if post가 존재하지 않으면null), then 더 이상 정의되지 않도록 호출합니다.

호출 후: 이 호출을 진행하면 구성 요소를 다시 렌더링합니다.우리는 다시 snapshot.val() 성명을 달성했다.slug 현재 정의되어 있기 때문에 우리는 더 이상 코드 블록에 들어가지 않고 데이터베이스를 불필요하게 호출하지 않습니다.우리는 setCurrentPost 성명을 얻었다.currentPost은true이기 때문에 구성 요소는 다른 일을 하지 않고 텍스트를 되돌려줍니다.

호출 후: 이 호출을 진행하면 구성 요소를 다시 렌더링합니다.setCurrentPost 현재false이며, if (loading && !currentPost) 정의되지 않거나object일 수 있습니다.이것이 바로 currentPost 수표의 출처다.만약 우리가 데이터베이스에서 게시물을 되돌려 주지 않았다면, 우리는 이전처럼 하나 if (loading) 를 되돌려 줄 것이다.그렇지 않으면, 우리는 결승전loading을 계속 진행하고, 거기서 우리는 댓글을 보여 주었다.

나는 이 절차가 압도적이지 않기를 바란다. 갈고리와 상태 관리의 힘을 볼 수 있도록 도와줄 것이다.나한텐 이게 React에 관한 가장 멋진 거야.
다음은 내가 게시물을 표시하는 방법입니다.

return (
  <>
    <img src={currentPost.coverImage} alt={currentPost.coverImageAlt} />
    <h1>{currentPost.title}</h1>
    <em>{currentPost.datePretty}</em>
    <p dangerouslySetInnerHTML={{ __html: currentPost.content }}></p>
  </>
);

나는 setLoading 중의 loading 원소의 맨 위에 currentPost 여백을 추가했다.
지금 "계속 읽기"를 누르면...게시물 중 하나를 링크하거나 수동으로 탐색하면 다음과 같은 내용을 볼 수 있습니다.

너는 내가 시사 통신이 있다는 것을 아니?📬
만약 내가 새로운 블로그 게시물을 발표하거나 중대한 프로젝트 공고를 발표할 때 통지를 받고 싶다면 https://ashleemboyer.com/newsletter 를 방문하십시오.
질문이나 염려가 있으시면 send me an email 로 문의하십시오.나는 너의 편지를 받아서 매우 기쁘다.😊