리액트 기초반 4주차

22년 4월 5일(화)
[스파르타코딩클럽] 리액트 기초반 - 4주차

◎ Keyframes

• 애니메이션 효과를 주는 방법

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

• Keyframes: animation에서 사용하는 속성 중 하나

• 사용법 (styled-components 사용)

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

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

const boxAnimation = keyframes`
  0%{
    border-radius: 0px;
    top: 20px;
  }
  75%{
    border-radius: 5px;
    top: 50px;
  }
  100%{
    border-radius: 50px;
    top: 400px;
  }
`

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50px;
  position: absolute;
  left: 50px;

  animation: ${boxAnimation} 2s 1s infinite linear alternate;
`


export default App;

◎ Style 주는 법 배운 팁

• 특정 부분에만 스크롤 주기
  • overflow-y: auto;
  • max-height: 지정해주기

const ListStyle = styled.div`
  display: flex;
  flex-direction: column;
  height: 50vh;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 50vh;
`;

• prograss-bar 생성하기
  
  • 회색바, 보라색바를 곂치게 생성
  • 특정 수치를 가져다가 쓰는 법
    • props로 특정 react component에 값을 넣음
    • 값을 가져다 사용할때는 ${(props) => props.width}; 와 같이 이용
  • display:flex 로 설정하면 요소를 가로로 놓을 수 있음
  • margin 값을 음수로 설정하면 요소들을 곂쳐 놓을 수 있다.
  • transition 은 style 값이 변할 때, 해당 시간만큼 천천히 움직이게 해줌

import React from "react";
import styled from "styled-components";
import { useSelector } from "react-redux";

const Progress = (props) => {
  const bucket_list = useSelector((state) => state.bucket.list);
  console.log(bucket_list);

  let count = 0;
  bucket_list.map((b, idx) => {
    if (b.completed) {
      count++;
    }
  });

  console.log(count);
  return (
    <ProgressBar>
      <HighLight width={(count / bucket_list.length) * 100 + "%"} />
      <Dot/>
    </ProgressBar>
  );
};

const ProgressBar = styled.div`
  background: #eee;
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  border-radius: 10px;
`;

const HighLight = styled.div`
  background: #673ab7;
  transition: 1s;
  width: ${(props) => props.width};
  height: 20px;
  border-radius: 10px;
`;

const Dot = styled.div`
  width: 40px;
  height: 40px;
  background: #fff;
  border: 5px solid #673ab7;
  border-radius: 40px;
  margin: 0px 0px 0px -20px;
`;

export default Progress;

• 특정 상태에서 style 값을 주기
  • styled-components 사용시에는 SCSS문법을 따르므로 & 기호로 자기 자신을 지칭 가능
  • &:hover input:focus 같은 기능을 통해 특정 상황에서의 style을 줄 수 있다.
  • 참고: & > * 은 해당 요소 하위에 있는 모든 요소에 적용함.

const Input = styled.div`
  max-width: 350px;
  min-height: 10vh;
  background-color: #fff;
  padding: 16px;
  margin: 20px auto;
  border-radius: 5px;
  border: 1px solid #ddd;
  display: flex;
  & > * {
    padding: 5px;
  }
  & input{
    border: 1px solid #888;
    width: 70%;
    margin-right: 10px;
  }
  
  & input:focus {
    outline: none;
    border: 1px solid #a673ff;
  }

  & button {
    width: 25%;
    color: #fff;
    border: #a673ff;
    background: #a673ff;
  }
`;

◎ Firebase

• 서버리스: 서버를 신경쓸 필요 없다, 미리 구축해놓은 서버를 필요한만큼만 빌려 쓰면 된다.

• BaaS(Backend as a Service) : 흔히 백엔드 하면 떠올리는 것들을 빌려오는 것이다.

• FireStore 설정

  • 프로젝트 만들기 > 이름 만들고 약관 동의 > 프로젝트 애널리틱스 설정

  • 파이어스토어 설정

    • 생성된 프로젝트 클릭
    • Cloud Firestore 추가
    • 데이터베이스 만들기 클릭
    • 보안규칙 설정 > test모드로 해야 localhost에서 요청 가능
    • Cloud Firestore 위치 설정 > asia-northeast(주로 접속하는 곳이랑 가까운데)

  • 대시보드에서 파이어스토어 데이터 넣기

    • (1) 콘솔에서 내 프로젝트 → firestore 선택하여 대시보드로 진입
    • (2) 대시보드에서 컬렉션 시작 버튼 클릭
    • (3) 컬렉션을 만든다.
    • (4) 문서 ID를 지정하고 필드 값을 넣는다.

◎ Firebase 연동 및 사용해보기

• Firebase 연동
  • Firebase 패키지 설치

  yarn add firebase

  • src > firebase.js 파일 생성
    Firebase 페이지 > 프로젝트 설정 > 일반 > 내 앱 > SDK 설정 및 구성
    에 있는 내용을 js파일에 붙여 넣음 // 아래 내용은 일부 수정함
  • firebase 대시보드에서 웹버튼을 누르기
  • 다른 파일에서 db를 import해서 사용

//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 };

• FireStore 사용해보기 // collection 이름 "bucket"

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


// 데이터 가져오기  / forEach 반복문처럼 사용
// async await를 통해 통신하기까지 기다려줌
React.useEffect(async() => {
    const query = await getDocs(collection(db, 'bucket'));
		console.log(query); // 직접적인 데이터 내용이 나오지 않음
    query.forEach((doc) => {
      console.log(doc.id, doc.data()); // 반복문의 형태로 출력함
    });
  }, []);

// 데이터 추가하기
addDoc(collection(db,"bucket"), {text:"현우 재수시키기", completed:false})

// 데이터 업데이트 하기 (id값 필요)
const docRef = doc(db, "bucket", "bONVZG5ZGKqT0C9DUVjw");
updateDoc(docRef,{completed: true})

// 데이터 삭제하기 (id값 필요)
const docRef = doc(db, "bucket", "5rBSiTNsogw1ZnqTpsub");
deleteDoc(docRef)