[수업 목표]
- 비동기 통신을 해본다.
- AWS의 S3 버킷으로 정적 웹사이트 호스팅을 할 수 있다.
- Firebase로 배포할 수 있다.
- 도메인을 연결한다.
1. 리덕스에서 FireStore 데이터 가지고 놀기 (1)
리덕스에서 비동기 통신을 할 때 필요한 미들웨어라는 친구 먼저 설치
yarn add redux-thunk
▶redux-thunk는 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해줍니다!
▶미들웨어란?
리덕스 데이터를 수정할 때 [액션이 디스패치 되고 → 리듀서에서 처리] 하던 과정 기억하시죠?
미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리 같은 거예요!
즉! [액션이 일어나고 → 미들웨어가 할 일 하기 → 리듀서에서 처리] 이 순서로 처리하게 됩니다!
import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import bucket from "./modules/bucket";
import { createBrowserHistory } from "history";
export const history = createBrowserHistory();
const middlewares = [thunk];
const enhancer = applyMiddleware(...middlewares);
const rootReducer = combineReducers({ bucket });
const store = createStore(rootReducer, enhancer);
export default store;2. 리덕스에서 FireStore 데이터 가지고 놀기 (2)
<firestore 적용 순서>
(1) load할 때 데이터를 가지고 와보자!
- 파이어베이스랑 통신하는 함수 만들고,
- 리듀서 고침
- 그 후에 불러다 쓰기
(2) create에 firestore 적용
(3) update에 firestore 적용
(4) delete에 firestore 적용
3. 머테리얼 UI 사용하기
▶부트스트랩(_스타일 템플릿)처럼 이미 다 만들어진 ui를 가져다 써보자!
▶머테리얼 UI 설치하기
yarn add @material-ui/core @material-ui/icons
머테리얼 공식 문서
버튼 색 달아줬다 ㅎㅎ
color="primary" 파랑
color="secondary" 빨강
4. 페이지 의도적으로 가리기
▶페이지를 왜 가려야 하나?
redux에 넣어둔 데이터 때문에 가짜 데이터 3개가 먼저 보이죠! 파이어스토어의 데이터만 제대로 보여주고 싶을 때, 어떻게 하면 좋을까요?
→ 그렇죠! 페이지를 가려버리는 거예요. 언제까지? 파이어스토어에서 데이터를 가져올 때까지!
▶로딩 스피너 만들기!
아이콘 머테리얼
(1) 로딩 스피너 컴포넌트 만들기
(2) firestore 데이터 가져오기 전엔 페이지 진입을 막자!알아두기✨
- js코드 정렬 단축키
Ctrl + K + F (for windows)5. AWS S3 버킷
▶S3(Simple Storage Service)는 단순 스토리지 서비스예요!
이미지나 파일을 저장할 수 있습니다.
html, css, js 같은 정적 자원을 올리고, 정적 웹 사이트를 호스팅할 수도 있어요.
우리가 컴퓨터에 폴더 만드는 것처럼 버킷을 만들고 사용할 수 있어요!
▶웹 사이트는 서버 측 스크립트 사용 유무를 기준으로 동적 웹 사이트와 정적 웹 사이트로 나눠볼 수 있어요. (서버 측 스크립트는 PHP, JSP, ASP같은 친구들을 말해요!)
정적 웹 사이트는 html, js, css같이 정적 자원으로만 이루어진 웹 사이트입니다.
6. S3 버킷 설정하기
7. 도메인 연결하기
1.route 53에서 호스팅 영역을 생성한다
2.네임서버를 가비아에 등록
3.레코드를 생성한다
4.확인하기 ↓캬캬 페이지 만든거 나온다ㅎㅎ
넘나 기쁜걸 ㅠㅠㅠ 그리고 뿌듯해
아직 부족한 게 많지만 일단 결과물을 만들어 낸
나 자신 칭찬해
8. Firebase로 배포하기
▶firebase 호스팅하기
프젝에 cli 설치
yarn global firebase-tools
#웹브라우저가 열리고 내 구글 계정을 물어볼거예요. 로그인해줍니다.
yarn firebase login
#로그인 후 init!
yarn firebase init
- 호스팅을 선택해줍니다(방향키로 이동해요)
▶firebase에 내 결과물 올리기
yarn firebase deploy
나는 S3로 Hosting했으니까 firebase로 하는 건 생략했다.
이런 느낌으로 완성해서 제출했다.
~~ 5주차 끝 ~~
