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() -.... 형태)
- 리덕스에서 비동기 통신이 필요할 때에는 미들웨어라는 것을 설치해야한다.
