스파르타 코딩클럽 React 리액트 기초반 4주차 정리 - Keyframes, Firebase 설정부터 연동, 컬랙션 가져오기/추가/수정/삭제까지

Keyframes

animation에서 사용하는 속성 중 하나, css 에서 사용하며 styled-component를 통해 js파일에서도 사용 가능하다.

 

 

CSS 에서의 사용예시

@keyframes 키프레임이름 {

    0%{초기 형태}

    50%{변화 중간의 형태}

    100%{변화 완료된 형태}

}

animation : 키프레임이름 1s ease ;

 

styled-component 에서의 사용 예시

import React from 'react';

import styled, {keyframes} from "styled-components";

 

function App() {

    return ( <div className="App"></div> );

}

 

const 키프레임이름 = keyframes`

    0%{초기 형태}

    50%{변화 중간의 형태}

    100%{변화 완료된 형태}

`

const App = div`

    animation:${키프레임이름} 2s ease;

`

 

export default App;

 

---

 

Firebase

https://firebase.google.com/?hl=ko 

Firebase

BaaS (Backend as a Service)

데이터 베이스, 소셜 서비스 연동(일종의 소셜 로그인), 파일시스템 등을 빌려오는 서비스

 

설정방법

01

시작하기 > 프로젝트 만들기 > 원하는 프로젝트명 넣고 애널리틱스 체크

구글 애널리틱스

사이트에서 발생하는 사용자의 행동데이터를 쌓아준다.

 

 

Firestore

Firebase에서 클라우드 데이터베이스를 제공하는 서비스 

*그 외에도 많은 서비스가 있음. 이 강의에서는 파이어스토어를 사용함.

 

설정방법

01234567891011

---

리액트에서 Firebase 연동하기 

https://firebase.google.com/docs/web/setup?authuser=0  

자바스크립트 프로젝트에 Firebase 추가

1. 리액트 프로젝트에서 콘솔창에 yarn add firebase

2. 아래 둘중 하나 택1 클릭

3. 원하는 앱 이름 아무거나 정해서 넣기.

4. 두번째 단락 코드(import ~) 전부 복사 후 src 파일 내에 firebase.js 폴더 생성해서 그대로 넣어줌. 

 

5. 파이어스토어를 이용할 경우

 

Cloud Firestore 시작하기  |  Firebase Documentation

개발 환경 설정 > firebase 패키지 설치한 프로젝트 파일에서 package.json 에서 버젼 확인 후 해당 버전 클릭

---

파이어스토어 이용하는 법

https://firebase.google.com/docs/firestore/quickstart?authuser=0

Cloud Firestore 시작하기  |  Firebase Documentation

---

파이어스토어 이용하는 코드 정리 (collection 에 document 추가, 변경, 삭제 등)

firebase.js (중복은 제거)

import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"

//여기에 const firebaseConfig ={} 넣기

export const db = getFirestore();

 

 

App.js 

import { db } from "./firebase";
import { collection, getDocs, addDoc,doc,updateDoc,deleteDoc } from "firebase/firestore";

React.useEffect(async() => {

//선택한 콜랙션의 모든 문서 가져오기
    const query = await getDocs(collection(db, '콜랙션 이름'));
    query.forEach((doc) => { console.log(doc.id, doc.data()); });

//선택한 콜랙션의 문서의 내용물 변경하기
    const docRef1 = doc(db, "콜랙션 이름", "문서 이름");
    await updateDoc(docRef1, { 변경할 문서 내용물 });

//선택한 콜랙션의 문서를 제거
    const docRef2 = doc(db, "콜랙션 이름", "문서 이름");
    await deleteDoc(docRef2);
   
}, []);

//특정 콜랙션에 문서를 추가하거나 새로운 컬랙션을 생성하고 문서를 추가할때
const docRef = await addDoc (collection(db, '콜랙션 이름or새 콜랙션 이름'), { 추가할 문서 내용물 })

doc.id = 문서 이름

doc.data() = 문서 내용물

아래의 형식(리덕스 모듈 초기값)처럼 보면 이해하기 쉽다. 

const Firestore = {
    bucket : [
         {text:'흠냠냐',completed:false}, // id = PzcpQ....crs
         {text:'흠냠냐2',completed:false} // id = 임시값이나 지정해준 문서이름, 추가하면 이런식으로 추가된다고 보자.
    ]
}

 

콜랙션 이름 확인 = Firebase 사이트 > 콘솔페이지 좌측 메뉴 빌드 : Firestore Database

콜랙션 알려주기 =collection(db,"콜랙션 이름"); 

콜랙션의 모든 문서(document)를 모은 객체 가져오기 =getDocs(collection(db,"콜랙션 이름"));

 

하나만 가져올때 = getDoc

여러개 가져올때 = getDocs

    가져온 객체의 문서 한번씩 돌리기 =forEach(() => {}); *getDocs의 내장함수

추가할때 = addDoc

특정 도큐먼트 정보 가져오기 = doc

수정할때 = updateDoc

삭제할때 = deleteDoc

 

*async, await 처리를 안하면 promise(서버에서 언젠가 데이터가 올거라는 약속)로 된다..

async = await 를 비동기처리해준다.

await = 뒤에 붙은 녀석이 작업을 끝내고 결과를 가져올때까지 기다린다.