React 기초다지기 #3

Taewoong Moon·2021년 3월 30일
0

keyframes: 이미 styled-components안에 포함이 되어있다.

웹에서 애니메이션을 구현할 때에는 animation & transition 둘을 사용한다.

Keyframes은 animation 속성중 하나이다.
transition은 단순한 변화, animation은 다이나믹한 효과를 줄때 쓰이기 좋다.

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

const move = keyframes`
	0%{
	top: 20px}
	50%{
	top : 200px}
	100%{
	top : 20px
}`

const Box = styled.div`
	width: 300px;
	height: 300px;
	background-color: green;
	border-radius: 150px;
	position: absolute;
	top: 20px;
	left: 20px;
	animation: ${move} 2s 1s infinite;
`
export default App

자세한 keyframes 효과들은 공식 mdn문서를 참조하여 활용하는 것이 좋다.

클라이언트 & 서버의 역할
클라이언트: 서버에 원하는 정보를 요청하고 요청한 자원을 화면에 뿌려주는 역할
서버: 다양한 일을한다. 데이터 관리, 분산처리, 웹 어플리케이션도 돌린다.

서버리스란(Serverless)?
누군가가 구축해논 서버를 빌려다가 쓰는 구조

Firebase란? (서버리스 중 하나의 서비스)
BaaS(Backend as a service)

  • 데이터 베이스, 소셜 서비스 연동, 파일 시스템 등을 API 형태로 제공해준다.

Firestore란?
Firebase의 일부이고 NoSQL 기반 클라우드 데이터베이스이다.
SQL : oracle, Mysql (테이블안에 데이터를 하나씩 써내려가는 형태)
NoSQL: 딕셔너리처럼 생겼다. (굉장히 유연한 편)

Firestore설정하는 방법

import firebase from "firebase/app";
import "firebase/firestore";

const firebaseConfig = {
  //firebase의 config값들이 들어가면 된다. 공식문서 참조 혹은 firebase들어가서 코드 복사.
}

firebase.initializeApp(firebaseConfig); //이 모든게 app 파일과 firebase사이를 연결해주기위한 역할

const firestore = firebase.firestore();

export {firestore}

firestore에서 비동기작업: 데이터 요청을 할 때 위에서 아래로 코드를 한줄 씩 읽다보면 요청을 한 부분에서 데이터를 받아올때 까지 다음 코드로 넘어가지 않는다. 그래서, 비동기작업을 통해 데이터 요청을 해서 받는동안 다른 코드를 실행하고 있는다는 개념이 비동기작업이다.

동기작업은 비동기작업의 반대: 한줄씩 읽어가면서 하나씩 결과값을 반환

firestore데이터를 리덕스 스토어에 넣으려면?

  • Firestore 데이터를 가져올때는 비동기 통신을 한다. (bucket.doc().get().then() -.... 형태)
  • 리덕스에서 비동기 통신이 필요할 때에는 미들웨어라는 것을 설치해야한다.
profile
모든 코드에 의미를 담겠습니다.

0개의 댓글