React 기초반 강의내용 정리 (4-5주차)

우선 강의자료 부터 !!!

 

4주차 강의자료 링크 Click 🧚‍♀️ 🤩 

[스파르타코딩클럽] 리액트 기초반 - 4주차

 

1. keyframes 사용하기

 

keyframes는 styled-components안에 이미 들어있다.

웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용한다.

 

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

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

     </Box>
    </div>
  );
}
const boxAni = keyframes`
0% {
  border-radius:0px;
  top:20px;
}
50%{
  border-radius:50px;
  top:400px;
}
100%{
  border-radius:0px;
  top:20px;
}
`;

const Box =styled.div`
width:100px;
height:100px;
background-color:green;
border-radius:0px;
position: absolute;
top:20px;
left:20px;
animation: ${boxAni} 2s 1s infinite linear alternate;
`;


export default App;

2. Firebase란?

 

웹의 동작 방식

웹은 요청과 응답으로 굴러간다.

클라이언트가 서버에게 요청, 서버가 클라이언트에게 응답 !

 

서버가 하는 일은 엄청 많다. 우리가 알고 있는 것처럼 데이터도 관리하고, 분산처리도 하고, 웹 어플리케이션도 돌려야 하고... 서버가 할 일이 많다는 건, 서버가 하는 일을 우리가 전부 관리해줘야됨. 😢

 

 서버리스란? 서버리스는 서버가 없다가 아니라, 서버를 신경쓸 필요가 없다.

이미 누군가가 구축해둔 서버의 일부분을 빌려서 쓸 수 있다. 우리가 인프라를 구축하고, 서버 스펙을 고민할 필요 없다는 소리! 

 

BaaS는 Backend as a Service의 약자이다. → 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는것.

우리가 쓸 파이어베이스를 예로 들면, 데이터 베이스, 소셜 서비스 연동(일종의 소셜 로그인), 파일시스템 등을 API 형태로 제공!

 

Firebase 사이트링크Click 🧚‍♀️ 🤩

 

2. Firebase 설정하기

 

1. 파이어베이스 홈페이지 접속 > 콘솔로 이동 > 프로젝트 생성하기 

2. 파이어스토어 설정하기

 파이어스토어란? Firebase에 포함되어 있는 서비스 중 하나로 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스

구조:

- Collection: 문서(다큐먼트)의 집합

- Document: JSON 형식으로 데이터를 저장할 수 있음

 

빌드 > firestore Database 클릭 > 데이터베이스 만들기 > 테스트 > asia-northeast2 으로 사용설정 > 컬랙션 시작 클릭 > 컬랙션 ID입력 > 문서 ID 자동 생성 > 필드 : text > 저장 

 

 

3. Firebase 연동하기

 

리액트 프로젝트에서 파이어베이스 패키지 설치

yarn add firebase

설치되는 동안

파이어베이스 대쉬보드 > 프로젝트 개요 > 앱에 firebase추가하여 시작하기 > </> 버튼 클릭 > 앱 닉네임 지정 > Firebase SDK 추가에서 키값 복사 >src에 파일(firebase.js)하나 만들어줘서 아래내용 붙여넣기함 >

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  내 키 값
};
initializeApp(firebaseConfig);
// Initialize Firebase
//const app = initializeApp(firebaseConfig);

export const db = getFirestore();

 

App.js 에 아래 내용 복붙하기

import {db} from "./firebase";

 

 

 

이제 5주차로 넘어왔다 !!

5주차 강의자료 링크 Click 🧚‍♀️ 🤩 

[스파르타코딩클럽] 리액트 기초반 - 5주차

1. firestore 데이터를 리덕스 스토어에 넣으려면? (미들웨어 설치!)

 

리덕스에서 비동기 통신을 할 때 필요한 미들웨어 설치!

미들웨어란 ? 

리덕스 데이터를 수정할 때 [액션이 디스패치 되고 → 리듀서에서 처리] 하던 과정이 있음

미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리 같은 것

즉 [액션이 일어나고 → 미들웨어가 할 일 하기 → 리듀서에서 처리] 이 순서로 처리

yarn add redux-thunk

redux-thunk는 뭐하는 미들웨어?

우리 액션 생성 함수가 객체를 반환한다. 🙂

redux-thunk는 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해준다.

리덕스는 기본적으로는 액션 객체를 디스패치한다.

즉, 함수를 생성하면 특정 액션이 발생하기 전에 조건을 주거나, 어떤 행동을 사전에 처리할 수 있다.

 

설치가 끝났다면! configStore.js에 미들웨어를 추가

import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import bucket from "./modules/bucket";

export const history = createBrowserHistory();

const middlewares = [thunk];

const enhancer = applyMiddleware(...middlewares);
const rootReducer = combineReducers({ bucket });
const store = createStore(rootReducer, enhancer);

export default store;

위 내용 복붙하면 된당.

 

5-2강의가 50분이나 된다. 어질어질하다...ㅎㅎ

와 너무 어려웠다. 빠르게 배포까지하는 거 듣고 다시 들을 예정 !!

 

 

2. 머테리얼 UI 사용하기

 

머테리얼 ui는 우리가 styled-components를 쓰던 것처럼 사용할 수 있다.

공식 문서(https://material-ui.com/)에서 어떻게 생겼는 지 보고 사용 해보자!

패키지 설치 !!

yarn add @material-ui/core @material-ui/icons

 

3. 페이지 의도적으로 가리기

 

어떤 동작을 하는 중에 일부러 데이터를 가려주기 !

로딩 스피너 만들기

로딩 컴포넌트 만들기 !

Spinner.js 파일 생성 !

모듈에 있는  bucket.js 

const initalState = {
    is_loaded :false, //스피너때문에 
    list :[],
}

이즈 로디드라는 값 추가 해주기 

 

case "bucket/LOAD" :{
            return{list : action.bucket_list , is_loaded: true, };
        }
case "bucket/CREATE" :{
            const new_bucket_list =[...state.list, action.bucket];
            return  {...state, list : new_bucket_list};
        }
case "bucket/DELETE" : {
            const new_bucket_list = state.list.filter((l,idx)=>{
                
                return parseInt(action.bucket_index)!== idx;
            
            })
            return {...state, list : new_bucket_list};
        }

상태 추가해주기 

 

app.js 추가내용

import Spinner from "./Spinner"; //스피너 임포트
import {useDispatch, useSelector} from "react-redux"; //useSelector추가

//앱 함수 안에 아래 내용 추가
const is_loaded = useSelector(state => state.bucket.is_loaded);


 {!is_loaded && <Spinner />} 
      //is_loaded가 false일때만 보여줘 !

4. AWS S3버킷

 

 👉 S3(Simple Storage Service)는 단순 스토리지 서비스이다.

이미지나 파일을 저장할 수 있습니다. html, css, js 같은 정적 자원을 올리고, 정적 웹 사이트를 호스팅할 수도 있다.

우리가 컴퓨터에 폴더 만드는 것처럼 버킷을 만들고 사용할 수 있다.

 

S3사이트 접속 링크 Click 😛

https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2

 

(설명서 링크→) 들어가서 확인하자 ~! 배포할때마다

 

버킷 생성 > 권한 설정 > 객체 (데이터 올리기) > 프로젝트로 돌아가서 

yarn build

> 속성 > 정적 웹사이트 호스팅 편집 > 활성화 > 객체 탭 > build파일 전부 끌어 올리기 하면 업로드 완료 !!

도메인 연결전이다 ~! 이렇게 나는 버킷..과제 말고 나의 주특기 개인 과제를..업로드했당.

 

http://ryurim.shop.s3-website.ap-northeast-2.amazonaws.com/

React App

우선 도메인 연결하는 건..

나중에 필요할때 다시 보려고 동영상 기록해뒀다. ㅎ

 

 

5. 파이어베이스로 배포

 

터미널에 아래 코드 입력 !

yarn add global firebase-tools

yarn firebase login

Y입력 

yarn firebase init

Firestore, Hosting 선택 후 엔터

다 엔터엔터 치면 기본값으로 들어간다 !

pubilc만 build로 바꿔주면됨!

다음에 나오는 거 SPA로 설정할래? 우리는 Y

깃허브 ? N

덮어씌울래? N

yarn build

한번 더 빌드 시켜주기.

yarn firebase deploy

하고 파이어베이스 홈페이지 가서 도메인 확인

 

sparta-react-basic-47f86.web.app

React App

이렇게 과제도 파이어베이스로 배포를 완료했당 !

휴 ~~~끝이났다...

 

배포는 생각보다 어렵지 않았지만, 기억하기는 쉽지 않았다.

이제 다시 개인 과제 할 시간이다 !!