[항해99] 리액트 기초반 - 4주차

4-1. keyframes 

keyframes는 styled-components에 포함되어 있음.

웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용.

transition: 단순한 엘리먼트 상태변화에 쓰기 좋고, (2배로 키운다고 하면, 일정한 속도로 커진다)

animation: 다이나믹한 효과를 주는데 쓰기 좋아요! (2배로 키운다고 하면, 천천히 커지다가 갑자기 슉 커지는 속도 조절이 가능)

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

 

css에서는 이런 식으로 keyframes를 씁니다.

.box {
 width: 100px;
 height: 100px;
 background: #444;
}
.box.active {
 animation: boxFade 2s 1s infinite linear alternate;
}
@keyframes boxFade {
 0% {
  opacity: 1;
 }
 50% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }

새 프로젝트에 styled-components를 설치하고, 임포트! (App.js에서)

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

...
const Box = styled.div`
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: green;
  position: absolute;
  top: 20px;
  left: 20px;
  animation: ${boxFade} 2s 1s infinite linear alternate;
`;
...

...
// 이런식으로 동시에 여러가지 애니메이션을 넣어줄 수 있어요!
const boxFade = keyframes`
  0% {
    opacity: 1;
    top: 20px;

  }
  50% {
    opacity: 0;
    top: 400px;
  }
  100% {
    opacity: 1;
    top: 20px;
  }
`;
...

4-2. 버킷리스트에 프로그래스바 달기

[완료하기] 버튼 추가

• (1) 뷰를 먼저 만들어요! (버튼 먼저 만들기)

Detail.js에서 완료하기 버튼 만들기

• (2) 액션 타입 먼저 만들기

bucket.js에서 list를 딕셔너리로 변환,

const initialState = {
  list: [
    { text: "영화관 가기", completed: false },
    { text: "매일 책읽기", completed: false },
    { text: "수영 배우기", completed: false },
    { text: "코딩하기", completed: false },
  ],
};

bucket.js에서 list가 딕셔너리로 변했기 때문에 list.text로,

detail.js에서도 [bucket_index].text로,

bucket.js에서 action 만들기 

- const UPDATE = "bucket/UPDATE"

 

• (3) 액션 생성 함수 만들고,

bucket.js에서

export function updateBucket(bucket_index) {
  return { type: UPDATE, bucket_index };
}

• (4) 리듀서까지 만든다

    case "bucket/UPDATE": {
      const new_bucket_list = state.list.map((l, idx) => {
        if (parseInt(action.bucket_index) === idx) {
          return { ...l, completed: true };
        } else {
          return l;
        }
      });
      console.log({ list: new_bucket_list });
      return { list: new_bucket_list };
    }

• (5) 이제 버튼을 누르면 액션을 호출

Detail.js에서

업데이트버킷 import,

import { updateBucket } from "./redux/modules/bucket";

버튼 onclick 함수 넣기

 <button
        onClick={() => {
          dispatch(updateBucket(bucket_index));
        }}
      >
        완료하기
      </button>

4-3. 스크롤바 움직이기

버튼 누르면 위로 가기! window.scrollTo()

...
button onClick={() => {
          window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
        }}>위로가기</button>
..

4-4. Quiz_버킷리스트 좀 더 예쁘게!

스크롤바

  height: 50vh;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 50vh;

완료하기 되면, 

const ItemStyle = styled.div`
  padding: 16px;
  margin: 8px;
  color: ${(props) => props.completed? "#fff": "#333"};
  background-color: ${(props) => (props.completed ? "#673ab7" : "aliceblue")};
`;

4-5. Firebase란?

서버리스 서비스 이용.

서버리스란? 서버를 신경쓸 필요 없다

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

 

BaaS는 Backend as a Service의 약자

파이어베이스를 예로 들면, 데이터 베이스, 소셜 서비스 연동(일종의 소셜 로그인), 파일시스템 등을 API 형태로 제공

우리는 이중에서 Firestore를 사용할거예요! Hosting(서버 없이 웹 서비스를 배포할 수 있도록 도와 주는 서비스)도 한번 써볼거예요

• firestore는 클라우드 데이터베이스를 제공하는 서비스입니다.
• 데이터가 추가되고, 삭제하고 가져다 쓸 수 있습니다!
• 리액트와는 firebase라는 패키지를 통해 편리하게 연결할 수 있어요!
• 주의! 우리는 spark 요금제를 쓸거예요!(무료입니다!)

4-6. Firebase 설정하기

firebase 가입 > 프로젝트 생성

4-7. FireStore 설정하기

파이어스토어란?

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

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

4-8. 리액트에 Firebase 연동하기

파이어베이스 패키지 설치

yarn add firebase

 

config 가져오기

src 폴더 하위에 firebase.js 파일 만들기

//firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    // firebase 설정과 관련된 개인 정보
};

// firebaseConfig 정보로 firebase 시작
initializeApp(firebaseConfig);

// firebase의 firestore 인스턴스를 변수에 저장
const db = getFirestore();

// 필요한 곳에서 사용할 수 있도록 내보내기
export { db };

App.js 에서 firebase.js에서 내보낸 firestore DB가져오기

import {db} from "./firebase";

useEffect에서 데이터 불러와보기

...
const bucket = firestore.collection("buckets");
React.useEffect(() => {
    console.log(db);
  }, []);
...

4-9. FireStore 데이터 가지고 놀기

(1) 데이터 전체 읽어오기

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());
    });
  }, []);

(2) 데이터 추가하기

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

(3) 데이터 수정하기

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,
    });

  }, []);

(4) 데이터 삭제하기

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

  }, []);

(1) 콜렉션 이름을 바꿔서 추가하기

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

 

4-10. 끝 & 숙제 설명