강릉으로 가족여행을 다녀왔다.
구름이 진짜 멋있었고 양들은 너무 귀여워
힐링하고 왔다 ㅎㅎ
대신 코딩을 많이 못했다는 거..
일단 1시간이라도 붙잡고 있어야하는데
오랜만에 하려니까 어찌나 하기 싫던지
정승제 선생님이 말씀하시기를 ..
열심히 하려고 하지말고 그냥 하라고 ㅋㅋㅋ
완전 나한테 하는 소리 아니냐며
열심히 하기 보다 꾸준히 1시간이라도 하겠다는 마음가짐이 중요🤦♀️
그래서 일단 컴퓨터를 켜고 앉았다
<기본적으로 프젝 만드세요 하면 만드는거! >
2주차-07.state관리(1)-17)번에 나옴
1. yarn create react-app "파일이름 소문자"
2. yarn add styled-components 설치
3. index.js에서 <React.StrictMode>지우기
4. App.js를 class형 컴포넌트로 바꾸고 시작 !
[수업 목표]
- keyframes를 설치하고 애니메이션 효과를 넣어본다.
- 서버와 서버리스에 대해 이해한다.
- realtime database를 어렴풋 알아본다.
- firebase를 이용한 BaaS 환경을 설정하자.
- React-firebase 사용법을 익힌다.
1. keyframes
keyframes는 styled-components안에 이미 들어있습니다!
웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용합니다.
transition은 단순한 엘리먼트 상태변화에 쓰기 좋고,
animation은 다이나믹한 효과를 주는데 쓰기 좋아요! Keyframes은 animation에서 사용하는 속성 중 하나랍니다!
▶공 움직이는 예제
import logo from './logo.svg';
import './App.css';
import styled, {keyframes} from "styled-components";
function App() {
return (
<div className="App">
<Box></Box>
</div>
);
}
const move = keyframes`
0%{
top: 20px;
opacity: 1;
left: 20px;
background-color: green;
}
30%{
top: 50px;
background-color: orange;
}
50%{
top: 200px;
opacity: 0;
left: 200px;
}
80%{
top: 150px;
}
100%{
top: 20px;
opacity: 1;
left: 20px;
background-color: blue;
}
`;
const Box = styled.div`
width: 300px;
height: 300px;
background-color: green;
border-radius: 150px;
position: absolute;
top: 20px;
left: 20px;
opacity: 1;
animation: ${move} 2s 1s infinite;
`;
export default App;
2. 버킷리스트에 프로그래스바 달기
완료하기 버튼을 달고, 버킷 모듈에도 완료 여부를 바꿔주도록 넣어봅시다!
- (1) 뷰를 먼저 만들어요! (버튼 먼저 만들기)
- (2) 액션 먼저 만들기
- (3) 액션 생성 함수 만들고,
- (4) 리듀서까지 만든다.
- (5) 이제 버튼을 누르면 액션을 호출하게 해볼까요?
완료하면 색을 바꿔주기! -> 오렌지색
//styled-components에서 변수 받아오기
const ItemStyle = styled.div`
padding: 16px;
margin: 8px;
background-color: ${props => props.color};
`;Progress.js 파일 만들기
import React from "react";
import styled from "styled-components";
// redux hook을 불러옵니다.
import { useDispatch, useSelector } from "react-redux";
// 내가 만든 액션 생성 함수를 불러옵니다.
import { deleteBucket, updateBucket } from "./redux/modules/bucket";
const Progress = (props) => {
// 스토어에서 상태값 가져오기
const bucket_list = useSelector((state) => state.bucket.list);
let count = 0;
let goal_per = bucket_list.map((l, idx) => {
if(l.completed){
count++;
}
});
return (
<ProgressBar>
<HighLight width={(count / bucket_list.length) * 100 + "%"}></HighLight>
</ProgressBar>
);
};
const ProgressBar = styled.div`
background: #eee;
width: 100%;
height: 40px;
`;
const HighLight = styled.div`
background: orange;
width: ${(props) => props.width};
height: 40px;
`;
export default Progress;3. 스크롤바 움직이기
window.scrollTo()
1. (x좌표-좌우, y좌표-위아래)
2. 딕션어리에 넣기 ({top:0, left:0, behavior:"smooth"});
+) behavior 옵션을 스무스 하게 움직이게 하기위로 가기 버튼이나, 특정 위치로 스크롤 하는 건 자주 쓰이는 트릭이에요.
좌표를 이용해서 이리 저리 움직일 수 있고, ref를 통해 특정 엘리먼트 위치를 받아다가 스크롤 시킬 수도 있습니다!
4. 서버와 서버리스
웹은 요청과 응답으로 굴러갑니다!
클라이언트가 서버에게 요청, 서버가 클라이언트에게 응답!
▶서버 : 데이터도 관리하고, 분산처리도 하고, 웹 어플리케이션도 돌려야 하고...서버가 할 일이 많다는 건, 서버가 하는 일을 우리가 전부 관리해줘야한다는 이야기입니다.
▶서버리스 : 서버리스는 서버가 없다가 아니라, 서버를 신경쓸 필요 없다입니다.우리한테 필요한 서버를 필요한만큼만 빌려 쓰면 되니까요.
5. Firebase란?
▶BaaS는 Backend as a Service의 약자입니다.
→ 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는거예요.
6. FireStore 설정하기
▶파이어스토어란?
Firebase에 포함되어 있는 서비스 중 하나로
유연하고 확장 가능한 NoSQL 클라우드 데이터베이스입니다!
7. 리액트에 Firebase 연동
yarn add firebase 설치하기
▶config 가져오기
(1) src 폴더 하위에 firebase.js 파일을 만들어주세요
(2) firebase 대시보드에서 웹버튼을 눌러주세요
(3) 앱 이름을 적고, 잠시 기다리면 sdk 추가영역에 텍스트가 뜹니다
(4) App.js 에서 firebase.js에서 내보낸 firestore가져오기
(5) componentDidMount에서 데이터 불러와보기
8. FireStore 데이터 추가하기
- 데이터 추가하는 방법
bucket.add({ text: "수영 배우기", compeleted: false });- 데이터 수정하기
bucket.doc("bucket_item1").update({ text: "수영 배우기2", compeleted: false });- 데이터 삭제하기
bucket.doc("bucket_item2").delete([도큐먼트 ID]);
숙제 오지게 안되다가.. 마지막에 했다 ㅠㅠ
전부 삭제하고 다시 했음😂
알아두면 좋은 것들✨
- ctrl+ /
드래그해서 여러줄 주석