분류 Reactjs

React 및 Firebase를 사용하여 Reddit 클론을 만드는 방법

컨텐츠 정보

  • 조회 303 (작성일 )

본문

React는 사용자 인터페이스를 구축하기 위한 환상적인 프런트 엔드 라이브러리입니다. 백엔드와 함께 사용할 백엔드를 선택할 때 React 앱에 데이터 지속성을 쉽게 추가 할 수 있는 서비스로서의 백엔드 (Baas) 인 Firebase를 사용하면 크게 문제가 되지 않습니다.


이 튜토리얼에서는 Create React App과 함께 Firebase를 사용하여 Reddit과 유사하게 작동하는 애플리케이션을 빌드합니다. 사용자가 투표할  수 있는 새 게시물을 제출할 수 있습니다. Reddit 클론을 Vercel에 배포하는 방법도 보여 드리겠습니다.


읽고 나면 Firebase를 설정하는 방법, React 앱에 연결하는 방법 및 결과를 배포하는 방법을 이해할 수 있습니다.


https://www.sitepoint.com/reddit-clone-react-firebase/ 


왜 Firebase인가? 


Firebase의 강점 중 하나는 사용자에게 실시간 데이터를 매우 쉽게 표시 할 수 있다는 것입니다. 사용자가 링크에 투표하면 피드백이 즉시 표시됩니다. Firebase의 실시간 데이터베이스는 이 기능을 개발하는 데 도움이 됩니다. 또한 Firebase로 React 애플리케이션을 부트 스트랩 하는 방법을 이해하는 데 도움이 됩니다.


왜 React일까요? 


React는 특히 컴포넌트 아키텍처를 사용하여 사용자 인터페이스를 만드는 것으로 유명합니다. 각 구성 요소는 내부 상태를 포함하거나 데이터를 소품으로 전달할 수 있습니다. 상태와 소품은 React에서 가장 중요한 두 가지 개념입니다. 이 두 가지 사항은 언제든지 애플리케이션 상태를 확인하는 데 도움이 됩니다. 이 용어에 익숙하지 않은 경우 먼저 React 문서로 이동하십시오.


참고 : Redux 또는 MobX와 같은 상태 컨테이너를 사용할 수도 있지만 간단하게 하기 위해 이 자습서에서는 사용하지 않습니다.


다음은 우리가 구축 할 제품의 라이브 데모입니다. 이 애플리케이션의 코드는 GitHub에서 사용할 수 있습니다.


프로젝트 설정 


계속하려면 컴퓨터에 Node와 npm이 설치되어 있어야 합니다. 그렇지 않은 경우 Node.js 다운로드 페이지로 이동하여 시스템의 최신 버전을 가져옵니다 (npm은 Node와 함께 제공됨). 또는 버전 관리자를 사용하여 Node를 설치하는 방법에 대한 자습서를 참조 할 수 있습니다.


프로젝트 구조와 필요한 종속성을 설정하는 단계를 살펴 보겠습니다.


React 앱 부트 스트랩 


다음 명령을 사용하여 Create React App의 도움으로 새 React 애플리케이션을 만들 수 있습니다.


npx create-react-app reddit-clone

이것은 reddit-clone 디렉토리 안에 새로운 create-react-app 프로젝트를 스캐폴딩합니다. 디렉토리 구조는 다음과 같아야 합니다.

Default structure of directory부트 스트랩이 완료되면 reddit-clone 디렉토리에 들어가 개발 서버를 시작할 수 있습니다.


cd reddit-clone && npm start

이 시점에서 http://localhost:3000/을 방문하여 애플리케이션이 실행 중인지 확인할 수 있습니다.


Default page of Create React App 


앱 구조화 


애플리케이션을 부트스트랩 한 후에는 필요하지 않은 모든 파일을 제거하는 것이 항상 좋은 방법입니다. Create React App에서 생성 한 파일 중 필요하지 않은 파일이 몇 개 있으므로 제거하겠습니다.


다음 파일을 제거 할 수 있습니다.

  1. src/App.css
  2. src/App.test.js
  3. src/index.css
  4. src/logo.svg
  5. src/serviceWorker.js
  6. src/setupTests.js

package.json 파일에서 다음 종속성을 제거 할 수도 있습니다.

  1. @testing-library/jest-dom
  2. @testing-library/react
  3. @testing-library/user-event

package.json 파일에서 테스트 스크립트를 제거 할 수도 있습니다. 이는 애플리케이션에 대한 테스트를 작성하지 않기 때문입니다. React 앱 테스트를 살펴보고 싶은 경우 "Jest를 사용하여 React 구성 요소를 테스트하는 방법"자습서를 참조하십시오.


src/index.js 파일에는 다음이 포함되어야 합니다.


import React from "react";
import ReactDOM from "react-dom";
import App from "./app";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

src/App.js의 이름을 src/app.js로 변경하겠습니다. 다음을 포함하도록 변경하십시오.


import React from "react";

function App() {
  return <div>Hello world!</div>;
}

export default App;

이제 루트 디렉터리에서 다음 명령을 사용하여 개발 서버를 다시 시작할 수 있습니다.


npm start

개발 서버는 http://localhost:3000/에서 실행되어야 하며 다음과 같이 표시되어야 합니다.


The UI of our application after removing unnecessary files 새 Firebase 프로젝트 만들기


이 섹션에서는 Firebase를 설치하고 애플리케이션과 통합합니다.


Firebase 계정이 없는 경우 웹 사이트를 방문하여 지금 하나의 무료 계정을 만들 수 있습니다. 새 계정 만들기를 완료 한 후 계정에 로그인하고 콘솔 페이지로 이동하여 프로젝트 만들기를 클릭합니다.


프로젝트 이름을 입력하고 (내 reddit-clone이라고 부릅니다) 이용 약관에 동의 한 다음 계속 버튼을 클릭합니다.


Step 1 of creating a Firebase project 


다음 단계에서 프로젝트에 Google Analytics를 사용할지 여부를 선택한 다음 계속 버튼을 클릭해야 합니다.


Step 2 of creating a Firebase project 


3 단계에서 Google Analytics 계정을 선택한 다음 프로젝트 만들기 버튼을 클릭해야 합니다.


Step 3 of creating a Firebase project 

잠시 후 새 프로젝트가 준비되었다는 알림이 표시됩니다. 계속을 클릭하여 마법사를 종료합니다.


Firebase 프로젝트에서 새 앱 만들기 


이 섹션에서는 Firebase 콘솔에서 새 Firebase 앱을 만듭니다. 웹 옵션을 선택하여 웹 앱을 만들 수 있습니다.


Creating a new Firebase web app: Step 1 


다음으로 프로젝트 이름을 입력하고 앱 등록 버튼을 클릭하고 Firebase 호스팅도 설정 확인란을 선택하지 않은 상태로 둡니다.


Creating a new Firebase web app: Step 2 

이제 새로운 Firebase 웹 앱에 대한 모든 자격 증명이 표시됩니다.

Creating a new Firebase web app: Step 3 

이러한 자격 증명을 기록하고 콘솔로 계속을 클릭합니다.


이제 환경 파일에 앱의 자격 증명을 추가 할 수 있습니다.


// .env

REACT_APP_FIREBASE_API_KEY="123456"
REACT_APP_FIREBASE_AUTH_DOMAIN="reddit-clone-123456.firebaseapp.com"
REACT_APP_FIREBASE_PROJECT_ID="reddit-clone-123456"
REACT_APP_FIREBASE_STORAGE_BUCKET="reddit-clone-123456.appspot.com"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="123456"
REACT_APP_FIREBASE_APP_ID="1:123456:web:123456"
REACT_APP_FIREBASE_MEASUREMENT_ID="G-123456"

참고 : 항상 모든 자격 증명을 환경 파일에 저장하고 해당 파일을 .gitignore에 추가하여 자격 증명이 소스 코드로 유출되지 않도록 하는 것이 좋습니다.


다음으로 모든 Firebase 사용자 인증 정보를 저장할 새 파일 src/lib/firebase.js를 만들 수 있습니다.


import firebase from "firebase";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

const initFirebase = firebase.initializeApp(firebaseConfig);
const db = initFirebase.firestore();

export default db;

마지막으로 데이터베이스와 상호 작용할 수 있도록 firebase 패키지를 설치해야 합니다.


npm install firebase

새 Firebase Cloud Firestore 추가 


이제 확장 가능한 NoSQL 클라우드 데이터베이스인 새로운 Firebase Cloud Firestore를 추가해야 합니다. Cloud Firestore 링크를 선택하고 데이터베이스 만들기 버튼을 클릭하면 됩니다.

Creating a new Firebase Cloud Firestore 


다음으로 프로덕션 모드에서 Firestore를 시작하는 옵션을 선택합니다.


Selecting the option to start the Firebase Cloud Firestore in production mode 


다음을 클릭하십시오. 다음 화면에서 Cloud Firestore의 위치를 ​​선택하고 사용 버튼을 클릭해야 합니다.


Selecting the location of the Firebase Cloud Firestore 

'Cloud Firestore 프로비저닝'메시지와 보안 규칙 설정이 표시되며 잠시 후 새 프로젝트의 대시 보드로 리디렉션 됩니다.


Firebase Cloud Firestore에 새 컬렉션 추가 


다음으로 방금 만든 Firebase Cloud Firestore에 새 컬렉션을 추가해야 합니다. 수집 시작 버튼을 클릭하면 됩니다.


Adding a new collection to the Firebase Cloud Firestore:Step 1 


컬렉션 ID에 이름을 추가해야 합니다. 게시물을 추가하고 투표 할 예정이므로 게시물이라고 부를 수 있습니다.


Adding a new collection to the Firebase Cloud Firestore:Step 2 


다음을 클릭하십시오. 이제 컬렉션에 문서를 추가 할 차례입니다. 각 문서에는 ID가 필요하므로 첫 번째 필드에서 자동 ID 링크를 클릭하십시오. 이것은 고유 한 ID를 생성해야 합니다.


다음으로 다음 필드를 추가해야 합니다.

 Field

 Type

 Value

 Screenshot

 createdAt

 timestamp

 Current time

 Adding a new collection to the Firebase Cloud Firestore:Step 3

 updatedAt

 timestamp

 Current time

 Adding a new collection to the Firebase Cloud Firestore:Step 4

 title

 string

 This is the first post from Firebase

 Adding a new collection to the Firebase Cloud Firestore:Step 5

 upVotesCount

 number

 0

 Adding a new collection to the Firebase Cloud Firestore:Step 6

 downVotesCount

 number

 0

 Adding a new collection to the Firebase Cloud Firestore:Step 7


이것이 우리 컬렉션이 마침내 모습을 드러낼 것입니다.


Adding a new collection to the Firebase Cloud Firestore:Step 8 

저장 버튼을 클릭합니다. 컬렉션이 생성되고 프로젝트의 대시 보드로 리디렉션 됩니다.


Adding a new collection to the Firebase Cloud Firestore:Step 9 

Firebase Cloud Firestore의 규칙 업데이트 


규칙 탭을 방문하면 다음 규칙이 표시됩니다.


rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

Default Firebase Cloud Firestore rules 

쓰기 작업도 허용하려면 이를 수정해야 합니다.


rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

마지막으로 게시 버튼을 클릭하여 수정 된 규칙을 저장합니다.


Saving Firebase Cloud Firestore rules 

참고 : 보안 규칙에 대한 자세한 내용은 여기에서 확인할 수 있습니다.


Firebase와 Create React App 통합 


이 섹션에서는 React 애플리케이션에서 다음을 추가 할 것입니다.

  1. Chakra UI 패키지 추가
  2. 모든 게시물 보기 옵션
  3. 새 게시물 추가 옵션
  4. 사용자가 게시물에 투표하면 투표 버튼을 비활성화 하는 옵션


Chakra UI 패키지 추가 


애플리케이션의 UI를 구축하는 데 도움이 되도록 Chakra UI 패키지를 추가 할 예정입니다. 간단하고 모듈식이며 액세스 가능한 React 구성 요소 라이브러리입니다. 자세한 내용은 시작 안내서를 참조하십시오.


다음 명령을 사용하여 Chakra UI를 설치할 수 있습니다.


npm install @chakra-ui/core@next

Chakra UI가 제대로 작동하려면 애플리케이션의 루트에서 ChakraProvider를 설정해야 합니다. 다음과 같이 src/index.js를 수정합니다.


import { ChakraProvider } from "@chakra-ui/core";
import React from "react";
import ReactDOM from "react-dom";
import App from "./app";

ReactDOM.render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

모든 게시물 보기 옵션 추가 


이 섹션에서는 Firebase의 모든 게시물을 표시하는 목록을 개발합니다. 다음을 사용하여 src/app.js 파일을 수정해야 합니다.


import { Container, Flex, Spinner, VStack } from "@chakra-ui/core";
import React, { useEffect, useState } from "react";
import Post from "./components/post";
import db from "./lib/firebase";

const App = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // Hook to handle the initial fetching of posts

    db.collection("posts")
      .orderBy("createdAt", "desc")
      .get()
      .then((querySnapshot) => {
        const data = querySnapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));

        setPosts(data);
      });
  }, []);

  return (
    <>
      <Container maxW="md" centerContent p={8}>
        <VStack spacing={8} w="100%">
          {posts.map((post) => (
            <Post post={post} key={post.id} />
          ))}
        </VStack>
      </Container>
    </>
  );
};

export default App;

여기에서 다음을 수행합니다.

  1. useEffect 후크는 Firebase에서 초기 게시물 집합을 가져 오는 역할을 합니다. 바라건대 쿼리 구문이 비교적 간단합니다. 여기에서 Cloud Firestore에서 쿼리를 수행하는 방법에 대해 자세히 알아볼 수 있습니다.
  2. Firebase에서 게시물을 가져 오면 모든 게시물을 posts 상태로 저장합니다.
  3. Post 구성 요소를 사용하여 게시물 목록을 렌더링 합니다.
  4. Post 구성 요소는 단일 게시물의 렌더링을 처리합니다.

다음 콘텐츠로 src/components/post.js 파일을 새로 만들어야 합니다.


import { Box, HStack, Text } from "@chakra-ui/core";
import React from "react";

const Post = ({ post }) => {
  return (
    <HStack key={post.id} w="100%" alignItems="flex-start">
      <Box bg="gray.100" p={4} rounded="md" w="100%">
        <Text>{post.title}</Text>
      </Box>
    </HStack>
  );
};

export default Post;

여기서는 별 일이 없습니다. 컴포넌트는 소품을 통해 게시물을 수신하고 Chakra UI 텍스트 요소에 제목을 표시합니다.


Ctrl + C를 사용하여 개발 서버를 다시 시작한 다음 http://localhost:3000/을 방문하십시오. Firestore에서 수동으로 입력 한 게시물을 볼 수 있어야 합니다.


Rendering a post on the UI 

새 게시물을 추가하는 옵션 추가 


이 섹션에서는 새 게시물을 추가 할 수 있는 모달을 개발합니다. 이를 위해 src/app.js 파일에 다음 코드를 추가해야 합니다.


...
import Navbar from "./components/navbar";
...

const App = () => {
  ...

  return (
    <>
      <Navbar />
      <Container maxW="md" centerContent p={8}>
        ...
      </Container>
    </>
  );
};

또한 다음 콘텐츠가 포함 된 새 파일 src/components/navbar.js를 추가해야 합니다.


import { Box, Container, Flex } from "@chakra-ui/core";
import React from "react";
import AddNewPost from "./add-new-post";

const Navbar = () => {
  return (
    <Box position="sticky" top={0} p={4} bg="gray.100" zIndex={1}>
      <Container maxW="md" centerContent>
        <Flex justifyContent="flex-end" w="100%" position="sticky" top={0}>
          <AddNewPost />
        </Flex>
      </Container>
    </Box>
  );
};

export default Navbar;

또한 다음 콘텐츠가 포함 된 새 파일 src/components/add-new-post.js를 추가해야 합니다.


import {
  Button,
  FormControl,
  FormLabel,
  Textarea,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  HStack,
  useDisclosure,
} from "@chakra-ui/core";
import React, { useState, useEffect } from "react";
import db from "../lib/firebase";

const AddNewPost = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [title, setTitle] = useState("");
  const [isSaving, setSaving] = useState(false);

  const handleSubmit = async () => {
    const date = new Date();

    await db.collection("posts").add({
      title,
      upVotesCount: 0,
      downVotesCount: 0,
      createdAt: date.toUTCString(),
      updatedAt: date.toUTCString(),
    });

    onClose();
    setTitle("");
  };

  return (
    <>
      <Button onClick={onOpen} colorScheme="blue">
        Add new post
      </Button>

      <Modal onClose={onClose} isOpen={isOpen} isCentered>
        <ModalOverlay>
          <ModalContent>
            <ModalHeader>Add new post</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              <FormControl id="post-title">
                <FormLabel>Post title</FormLabel>
                <Textarea
                  type="post-title"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                />
              </FormControl>
            </ModalBody>
            <ModalFooter>
              <HStack spacing={4}>
                <Button onClick={onClose}>Close</Button>
                <Button
                  onClick={handleSubmit}
                  colorScheme="blue"
                  disabled={!title.trim()}
                  isLoading={isSaving}
                >
                  Save
                </Button>
              </HStack>
            </ModalFooter>
          </ModalContent>
        </ModalOverlay>
      </Modal>
    </>
  );
};

export default AddNewPost;

AddNewPost 구성 요소는 새 게시물을 추가하기 위해 모달을 여는 역할을 합니다. 일반적인 열기, 닫기 또는 전환 시나리오를 처리하는 데 도움이 되는 사용자 정의 후크 인 Chakra의 useDisclosure 후크를 사용합니다.


이제 http://localhost:3000/을 방문하면 다음을 볼 수 있습니다.


Rendering the navbar on the UI 


새 게시물 추가 버튼을 클릭하면 새 게시물을 추가 할 수 있는 모달이 나타납니다.


Adding a new post 

하지만 새 게시물을 보려면 페이지를 새로 고침 해야 합니다. src/app.js 파일에 새로운 useEffect 후크를 추가하여 이 문제를 해결할 수 있습니다.

// src/app.js

  useEffect(() => {
    // Hook to handle the real-time updating of posts whenever there is a
    // change in the datastore (https://firebase.google.com/docs/firestore/query-data/listen#view_changes_between_snapshots)

    db.collection("posts")
      .orderBy("createdAt", "desc")
      .onSnapshot((querySnapshot) => {
        const _posts = [];

        querySnapshot.forEach((doc) => {
          _posts.push({
            id: doc.id,
            ...doc.data(),
          });
        });

        setPosts(_posts);
      });
  }, []);

이제 새 게시물을 추가하면 실시간으로 볼 수 있습니다.


Adding a new post and viewing it in real-time 

게시물에 투표하는 옵션 추가 


이 섹션에서는 사용자가 각 게시물에 투표 할 수 있는 버튼을 개발합니다. 이를 위해 src/components/post.js 파일에 다음 코드를 추가해야 합니다.


...
import VoteButtons from "./vote-buttons";

const Post = ({ post }) => {
  return (
    <HStack key={post.id} w="100%" alignItems="flex-start">
      <VoteButtons post={post} />
      ...
    </HStack>
  );
};

export default Post;

다음으로 다음과 함께 새 파일 src/components/vote-buttons.js를 추가해야 합니다.


// src/components/vote-buttons.js

import { IconButton, Text, VStack } from "@chakra-ui/core";
import React, { useState } from "react";
import { FiArrowDown, FiArrowUp } from "react-icons/fi";
import db from "../lib/firebase";

const VoteButtons = ({ post }) => {
  const handleClick = async (type) => {
    // Do calculation to save the vote.
    let upVotesCount = post.upVotesCount;
    let downVotesCount = post.downVotesCount;

    const date = new Date();

    if (type === "upvote") {
      upVotesCount = upVotesCount + 1;
    } else {
      downVotesCount = downVotesCount + 1;
    }

    await db.collection("posts").doc(post.id).set({
      title: post.title,
      upVotesCount,
      downVotesCount,
      createdAt: post.createdAt,
      updatedAt: date.toUTCString(),
    });
  };

  return (
    <>
      <VStack>
        <IconButton
          size="lg"
          colorScheme="purple"
          aria-label="Upvote"
          icon={<FiArrowUp />}
          onClick={() => handleClick("upvote")}
        />
        <Text bg="gray.100" rounded="md" w="100%" p={1}>
          {post.upVotesCount}
        </Text>
      </VStack>
      <VStack>
        <IconButton
          size="lg"
          colorScheme="yellow"
          aria-label="Downvote"
          icon={<FiArrowDown />}
          onClick={() => handleClick("downvote")}
        />
        <Text bg="gray.100" rounded="md" w="100%" p={1}>
          {post.downVotesCount}
        </Text>
      </VStack>
    </>
  );
};

export default VoteButtons;

VoteButtons 구성 요소는 찬성 및 반대 투표 버튼을 렌더링 하는 역할을 합니다. 사용자가 이 두 버튼 중 하나를 클릭하면 handleClick 함수가 호출됩니다. handleClick 함수는 투표를 데이터베이스에 저장하는 역할을 합니다.


React Icons의 아이콘을 사용하고 있기 때문에 패키지를 추가해야 합니다. 루트 디렉터리에서 다음 명령을 실행하면 됩니다.


npm install react-icons

이제 http://localhost:3000/을 방문하면 다음을 볼 수 있습니다.

Adding the voting buttons 


다음 게시물에 투표 할 수 있어야 합니다.

Voting on each post 

사용자가 게시물에 투표하면 투표 버튼을 비활성화 하는 옵션 추가 


이전 섹션에서는 게시물에 투표하는 옵션을 추가했습니다. 그러나 사용자가 단일 게시물에 여러 번 투표 할 수 있음을 알 수 있습니다. 사용자가 이미 게시물에 투표 한 경우 투표 버튼을 비활성화 하면 문제를 해결할 수 있습니다.


이를 위해 src/component/vote-buttons.js 파일에 다음 코드를 추가해야 합니다.


import React, { useEffect, useState } from "react";

...
const VoteButtons = ({ post }) => {
  const [isVoting, setVoting] = useState(false);
  const [votedPosts, setVotedPosts] = useState([]);

  useEffect(() => {
    // Fetch the previously voted items from localStorage. See https://stackoverflow.com/a/52607524/1928724 on why we need "JSON.parse" and update the item on localStorage. Return "true" if the user has already voted the post.
    const votesFromLocalStorage = localStorage.getItem("votes") || [];
    let previousVotes = [];

    try {
      // Parse the value of the item from localStorage. If the value of the
      // items isn't an array, then JS will throw an error.
      previousVotes = JSON.parse(votesFromLocalStorage);
    } catch (error) {
      console.error(error);
    }

    setVotedPosts(previousVotes);
  }, []);

  const handleDisablingOfVoting = (postId) => {
    // This function is responsible for disabling the voting button after a
    // user has voted. Fetch the previously voted items from localStorage. See
    // https://stackoverflow.com/a/52607524/1928724 on why we need "JSON.parse"
    // and update the item on localStorage.
    const previousVotes = votedPosts;
    previousVotes.push(postId);

    setVotedPosts(previousVotes);

    // Update the voted items from localStorage. See https://stackoverflow.com/a/52607524/1928724 on why we need "JSON.stringify" and update the item on localStorage.
    localStorage.setItem("votes", JSON.stringify(votedPosts));
  };

  const handleClick = async (type) => {
    setVoting(true);
    ...
    // Disable the voting button once the voting is successful.
    handleDisablingOfVoting(post.id);

    setVoting(true);
  };

  const checkIfPostIsAlreadyVoted = () => {
    if (votedPosts.indexOf(post.id) > -1) {
      return true;
    } else {
      return false;
    }
  };

  return (
    <>
      <VStack>
        <IconButton
          ...
          isLoading={isVoting}
          isDisabled={checkIfPostIsAlreadyVoted()}
        />
        ...
      </VStack>
      <VStack>
        <IconButton
          ...
          isLoading={isVoting}
          isDisabled={checkIfPostIsAlreadyVoted()}
        />
        ...
      </VStack>
    </>
  );
};

export default VoteButtons;

위의 변경 사항에서 다음을 수행합니다.

  1. localStorage에서 투표 된 게시물의 ID를 추적하고 있습니다.
  2. 게시물이 투표 된 후 해당 게시물의 ID를 localStorage에 추가합니다.
  3. 사용자가 게시물에 투표 한 후 투표 버튼을 비활성화 합니다. 앱이 렌더링 할 때 투표 된 게시물은 기본적으로 비활성화 됩니다.

Disabling the vote button after casting a vote 

일반적으로 이러한 종류의 정보는 데이터베이스에 저장됩니다. 안타깝게도 전체 사용자 관리 및 인증 시스템을 구현해야 하므로 앱의 범위를 벗어납니다.


코드 변경 사항을 GitHub에 푸시 


이제 애플리케이션에 모든 기능을 추가했습니다. 이 섹션에서는 코드를 커밋하고 GitHub에 푸시합니다.


GitHub 계정 생성 


GitHub에 코드를 저장할 예정이므로 GitHub 계정이 필요합니다. Vercel에 응용 프로그램을 배포 할 때 필요합니다.


Git을 사용하여 코드 커밋 


다음 단계를 위해 PC에 Git이 설치되어 있어야 합니다. Git에 익숙하지 않거나 복습을 원하면 SitePoint Premium에서 Jump Start Git, 2nd Edition을 확인하십시오.


루트 디렉토리에서 다음 명령을 실행하여 모든 파일을 준비 할 수 있습니다.


git add --all

참고 : git add에 대한 자세한 내용은 여기에서 확인할 수 있습니다.


다음으로 다음 명령을 사용하여 파일을 커밋할 수 있습니다.


git commit -m "Adds all the necessary code"

참고 : git commit에 대한 자세한 정보는 여기에서 확인할 수 있습니다.


새 GitHub 리포지토리 생성 


https://github.com/new를 방문하여 새 GitHub 저장소를 만들 수 있습니다.


Creating a new GitHub repository 

저장소에 이름을 추가하고 나면 저장소 만들기 버튼을 클릭하여 새 저장소를 만들 수 있습니다.


GitHub 리포지토리에 코드 푸시 


다음 명령을 사용하여 코드를 GitHub 저장소로 푸시할 수 있습니다.


git remote add origin https://github.com/ghoshnirmalya/reddit-clone-app.git
git branch -M main
git push -u origin main

참고 : 'https://github.com/sitepoint-editors/reddit-clone.git'을 GitHub 저장소 링크로 바꿔야 합니다.


Pushing the code to our new GitHub repository 

그리고 그게 다야. 우리의 애플리케이션은 이제 버전 관리하에 있으며 GitHub로 푸시됩니다!


Vercel에 애플리케이션 배포 


이 마지막 섹션에서는 Vercel에 코드를 배포합니다.


Vercel 계정 생성 


먼저 Vercel로 이동하여 계정을 만드십시오. GitHub, GitLab 및 BitBucket을 사용하여 로그인 할 수 있습니다.


Git 저장소를 Vercel로 가져 오기 


Import Git Repository 섹션에서 Continue 버튼을 클릭하여 GitHub에서 GitHub 저장소를 가져올 수 있습니다.


Importing a Git project to Vercel: Step 1 

다음으로 GitHub 프로젝트에 대한 링크를 입력하고 계속 버튼을 클릭하여 애플리케이션을 배포해야 합니다.


Importing a Git project to Vercel: Step 2 

React 앱이 백엔드와 통신 할 수 있도록 .env 파일에서 모든 환경 변수를 입력해야 합니다.


Importing a Git project to Vercel: Step 3

환경 변수를 포함해야 합니다.

Importing a Git project to Vercel: Step 4 

다음으로 배포 버튼을 클릭하면 애플리케이션이 배포됩니다.


이제 배포 링크를 방문하면 배포 된 애플리케이션을 볼 수 있습니다.


Final UI of our application 

결론 


애플리케이션의 라이브 데모는 Vercel에 배포되고 코드는 GitHub에서 사용할 수 있습니다.


자습서의 복잡성과 길이를 줄이기 위해 인증을 추가하지 않았지만 실제 응용 프로그램에서는 인증이 필요합니다.


Firebase는 별도의 백엔드 애플리케이션을 만들고 유지하지 않으려는 곳이나 API 개발에 너무 많은 시간을 투자하지 않고 실시간 데이터를 원하는 곳에서 정말 유용합니다.