리액트 기초반 4주차

keyframes

keyframes는 styled-components안에 이미 들어있습니다! 웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용합니다.

 

transition은 단순한 엘리먼트 상태변화에 쓰기 좋고, animation은 다이나믹한 효과를 주는데 쓰기 좋아요!

Keyframes은 animation에서 사용하는 속성 중 하나랍니다!

 

transition : 일정한 크기로 요소를 크게해줌

animation : 어느정도 크기까지 일정하게 커지다가 확 커짐

애니메이션 속도 조절하는 것이 바로 keyframes

애니메이션의 속성, 규칙

 

움직이는 동그라미 만들기

import React from 'react';
import './App.css';

// styled와 keyframes를 불러옵니다!
import styled, {keyframes} from "styled-components";

function App() {
  return (
    <div className="App">
     <Box></Box>
    </div>
  );
}

const boxAnimation = keyframes`
  0% {
    border-radius: 0px;
  }

  50% {
    border-radius: 25px;
  }

  100% {
    border-radius: 50px;
  }
`;

// 박스를 먼저 하나 만들어줍니다
const Box = styled.div`
  width: 100px;
  height: 100px;
  background: green;
  border-radius: 0px;
  /* 원으로 만들기 */
  position: absolute;
  top: 20px;
  left: 20px;
  animation: ${boxAnimation} 2s 1s infinite linear alternate;
`;


export default App;

 

 

Firebase

웹의 동작 방식

서버와 클라이언트의 상호작용

웹은 요청과 응답으로 굴러갑니다!

클라이언트가 서버에게 요청, 서버가 클라이언트에게 응답!

 

서버리스

서버리스는 서버가 없다가 아니라, 서버를 신경쓸 필요 없다입니다.

이미 누군가가 구축해둔 서버의 일부분을 빌려서 쓸 수 있어요.

우리가 인프라를 구축하고, 서버 스펙을 고민할 필요 없다는 소리죠!

우린 그냥, 우리한테 필요한 서버를 필요한만큼만 빌려 쓰면 되니까요

 

Baas

firebase는 Baas다.

aaS는 Backend as a Service의 약자입니다. → 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는거예요.

우리가 쓸 파이어베이스를 예로 들면, 데이터 베이스, 소셜 서비스 연동(일종의 소셜 로그인), 파일시스템 등을 API 형태로 제공해줍니다!

 

Firebase

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

Firebase

 

FireStore

Firebase에 포함되어 있는 서비스 중 하나로 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스입니다!

 

구조:

• Collection: 문서(다큐먼트)의 집합
• Document: JSON 형식으로 데이터를 저장할 수 있음

 

패키지 설치

yarn add firebase

파이어베이스 공식문서

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

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

 

리액트에서 파이어베이스 데이터 사용해보기

- 데이터 전체 읽어오기

collection()으로 찾은 다음, getDocs()로 콜렉션 내의 데이터를 가져옵니다!

그리고 forEach문으로 내용을 확인할 수 있어요! (사실 배열이 아니거든요!)

import { db } from "./firebase";
import { collection, getDoc, getDocs } from "firebase/firestore";
...
React.useEffect(async() => {
    const query = await getDocs(collection(db, 'bucket'));
		console.log(query);
    query.forEach((doc) => {
      console.log(doc.id, doc.data());
    });
  }, []);

 

- 데이터 추가하기

import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
...
const docRef = await addDoc(collection(db, 'bucket'), {
     completed: false,
     text: "new"
   })

 

- 데이터 수정하기

import { db } from "./firebase";
import { collection, doc, updateDoc } from "firebase/firestore";
...
React.useEffect(async() => {
    const docRef = doc(db, "bucket", "P5Oz4GbccEg9uaca8sJG");
    await updateDoc(docRef, {
      completed: true,
    });

  }, []);

 

- 데이터 삭제하기

import { db } from "./firebase";
import { collection, doc, deleteDoc } from "firebase/firestore";
...
React.useEffect(async() => {
    const docRef = doc(db, "bucket", "P5Oz4GbccEg9uaca8sJG");
    await deleteDoc(docRef);

  }, []);

 

- 콜렉션 이름을 바꿔서 추가하기

// bucket에서 buckets로 이름 바꾸기! 그리고 대시보드를 확인해보세요!
import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
...
const docRef = await addDoc(collection(db, 'buckets'), {
     completed: false,
     text: "new"
   })