React 앱에서 Firebase 사용

안녕하세요 여러분, 이것은 나의 첫 번째 게시물입니다. 아래에 실수가 있으면 언제든지 의견을 말하십시오.

그래서 최근에 저는 reactjs로 personal-portfolio 사이트를 만들고 있습니다. 나중에 업데이트해야 하는 섹션이 거의 없습니다(예: 연락처, 프로젝트...등). 그리고 코드를 직접 변경하지 않고 해당 섹션을 업데이트해야 했습니다. 이 경우에 대한 해결책으로 firebase를 사용했습니다.

Firebase은 Google에서 모바일 및 웹 애플리케이션을 만들기 위해 개발한 플랫폼입니다. 원래는 2011년에 설립된 독립 회사였습니다. 2014년에 Google이 플랫폼을 인수했으며 이제 앱 개발을 위한 주력 제품이 되었습니다.

그럼 시작하겠습니다. 이를 위해 firebase V9를 사용하고 있습니다.

1단계(새로운 반응 프로젝트 설정)

첫 발걸음 먼저! 반응 프로젝트 설정. 반응이 처음이라면 시작하려면 React documentation을 확인하십시오. React는 UI 구성 요소를 기반으로 사용자 인터페이스를 구축하기 위한 무료 오픈 소스 프런트 엔드 JavaScript 라이브러리입니다. 콘솔에서 다음 코드를 실행하여 새로운 반응 앱을 생성할 수 있습니다.

npx create-react-app my-app

2단계(새 Firebase 프로젝트로 만들기)

공식firebase 사이트를 방문하여 새 Firebase 프로젝트를 만들 수 있습니다. 계정을 만들고 "콘솔로 이동"하여 새 프로젝트를 설정합니다.
이미 몇 개의 프로젝트가 있습니다. "프로젝트 추가"를 클릭하여 새 프로젝트를 설정할 수 있습니다.

3단계(파이어베이스 설치)

앱에 Firebase를 설치하려면 프로젝트 폴더로 이동하여 다음을 실행합니다.

npm install firebase

4단계(앱에 Firebase 프로젝트 추가)

Firebase가 설치되었으므로 Firebase 프로젝트를 앱에 추가해 보겠습니다.

앱의 루트로 이동하여 새 파일을 만듭니다.

firebase-config.js

Firebase 프로젝트 구성을 가져옵니다. Firebase 콘솔에서 프로젝트 설정을 방문하여 구성을 찾을 수 있습니다.

이제 구성을 firebase-config.js에 저장합니다. 여기에서 내 프로젝트를 git 허브 저장소로 푸시했습니다. 따라서 추가 보안을 위해 구성을 .env 파일에 저장했습니다. 물론 구성을 직접 저장할 수 있지만 프로젝트를 어딘가에 호스트해야 하는 경우 .env를 사용하는 것이 더 나은 솔루션입니다. 반응에서 환경 변수를 사용하는 방법에 대해 자세히 알아보세요.

5단계(Firestore에서 데이터 읽기)

이제 프로젝트에 Firebase를 추가했으므로 프로젝트에서 Firebase 기능을 사용할 수 있습니다. firebase documentation 을 확인하십시오.

추가로 Firestore 데이터베이스에서 데이터를 읽는 방법을 알려드리겠습니다.

Firebase 프로젝트로 이동하여 Firestore 데이터베이스를 설정합니다. 제 경우에는 Firestore 데이터베이스에 연락처 정보를 만들었습니다.

구성 요소에서

가져오기firebase

import {db} from '../../firebase-config'
import {collection, getDocs} from "firebase/firestore"

이제 함수를 만들어 데이터를 읽을 수 있습니다. UseEffect를 사용하여 반응 구성 요소에 래핑합니다. "연락처"컬렉션에서 내 데이터를 읽어봅시다.

const [contacts,setContacts] = useState([])

    useEffect(() => {
        const contactsCollection = collection(db,'contacts')
        const getContacts = async () => {
            const snapshot = await getDocs(contactsCollection);
            setContacts(snapshot.docs.map((doc) => ({...doc.data(),id:doc.id})));
        }

        getContacts();


      }, []);

이제 템플릿에서 데이터를 렌더링할 수 있습니다.

아래 질문에 댓글을 달아주세요. 고맙습니다.