항해 중/4주차 리액트 숙련반11 5주차 - Firebase로 배포하기 firebase 호스팅 하기 1) 대시보드에서 호스팅 신청하기 https://firebase.google.com/?gclid=CjwKCAiA4veMBhAMEiwAU4XRr5kTEZ4g_fo2092S4LTj920TDACmLrsuC9pUrYPdd86hDLpE8DP0yBoCf_AQAvD_BwE&gclsrc=aw.ds Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 2) 프로젝트 build 하기 yarn build 3) 프로젝트에 CLI 설치하기 yarn add global firebase-tools 4) firebase에 로그인 하고 init 실행하기 # 웹 브라우저가 열리고 내 구글 계.. 2021. 11. 25. 5주차 - S3 버킷 설정하기, 도메인 연결하기 1. AWS S3 버킷 - S3 버킷이란? 더보기 S3(Simple Storage Service)는 단순 스토리지 서비스예요! 이미지나 파일을 저장할 수 있습니다. html, css, js 같은 정적 자원을 올리고, 정적 웹 사이트를 호스팅 할 수도 있어요. 우리가 컴퓨터에 폴더 만드는 것처럼 버킷을 만들고 사용할 수 있어요! - 정적 웹 사이트란? 더보기 웹 사이트는 서버 측 스크립트 사용 유무를 기준으로 동적 웹 사이트와 정적 웹 사이트로 나눠볼 수 있어요. (서버 측 스크립트는 PHP, JSP, ASP같은 친구들을 말해요!) 정적 웹 사이트는 html, js, css같이 정적 자원으로만 이루어진 웹 사이트입니다. 🙂 2. S3 버킷 설정하기 - S3 정적 웹 사이트 호스팅 방법 https://doc.. 2021. 11. 25. 5주차 - 페이지 의도적으로 가리기 1) 페이지를 왜 가려야 하나요?? -> 버킷리스트 앱을 새로고침 해보면 redux에 넣어 뒀을 경우 가까 데이터가 보이게 됩니다. 파이어 스토어의 데이터만 제대로 보여주고 싶을 때는 어떻게 하면 좋을까요?? -> 파이어스토어에서 데이터를 가져 올 때까지 페이지를 가려 버리면 됩니다. (이외에도 수정이나 추가하기 버튼을 눌렀을 때, 여러번 API를 호출하는 현상을 방지하기 위해서 페이지를 가립니다.) 2) 로딩 스피너 만들기 - 로딩 스피너 컴포넌트 만들기 (Spinner.js) import React from "react"; import styled from "styled-components"; import {Eco} from "@material-ui/icons"; const Spinner = (pro.. 2021. 11. 25. 5주차 - 머테리얼 UI 사용하기 1) 부트스트랩처럼 이미 다 만들어진 ui를 가져다 써보자! 더보기 머테리얼 ui는 우리가 styled-components를 쓰던 것처럼 사용할 수 있어요. 공식 문서(https://material-ui.com/)에서 어떻게 생겼는 지 보고 사용 해봅시다! 2) 머테리얼 UI 설치하기 yarn add @material-ui/core @material-ui/icons 3) 버킷리스트 프로젝트 중 ! 머테리얼 UI를 사용해서 고쳐봅시다! (4주차 과제에 바로 접목 시킴) import React from "react"; import { useParams, useHistory } from "react-router-dom"; import { useSelector, useDispatch } from "react-r.. 2021. 11. 25. 5주차 - fireStore 적용하기 리덕스에서 firestore 데이터 가지고 놀기 - firestore 적용하기 1) load 할 때 데이터를 가지고 오기 -> 일단은 액션 부터 // 액션 타입 const LOAD = "bucket/LOAD"; ... // 액션 생성 함수 export function loadBucket(bucket_list){ return {type: LOAD, bucket_list}; } -> 파이어베이스랑 통신하는 함수 만들기 import { collection, doc, getDoc, getDocs, addDoc, updateDoc, deleteDoc, } from "firebase/firestore"; import {db} from "../../firebase"; // 파이어베이스랑 통신하는 부분 export c.. 2021. 11. 24. 4주차 개인 과제 설치 해야 하는 패키지 목록 - yarn add redux react-redux - yarn add styled-components - yarn add react-router-dom@5.2.1 - yarn add redux-thunk - yarn add firebase (+ firebase.js 생성, configStore.js에 미들웨어 연결) - yarn add @material-ui/core @material-ui/icons 11월 22일 3주차, 4주차 강의를 들으면서 redux란 뭔지 keyframes는 어떻게 사용하는 건 지 fireStore는 서버리스이고, firebase는 어떻게 설정 하는 지 강의를 들으면서 습득했다. 5주차 강의는 5-1까지만 듣고 정지한 상태이다. 11월 23일 3,4.. 2021. 11. 23. 5주차 - 미들웨어(firestore 데이터를 리덕스 스토어에 넣으려면?) firestore에서 redux로 데이터를 가지고 오는 건 서버에서 데이터를 받아오는 것과 같습니다. 서버에서 데이터를 가져올 때 바로바로 알 수 있나요?? 아니요. 요청을 보내면 응답이 올 때까지 이 작업이 끝났는 지 끝나지 않았는 지 알 수 없습니다. 이런 걸 비동기 통신이라고 합니다. 즉, firestore에서 데이터를 가지고 오는 비동기로 데이터를 가지고 오는 것과 같습니다. 비동기로 데이터를 받아오면 이 데이터를 어디에 넣어줘야 할까요?? 액션 생성 함수?? 액션 생성 함수는 액션만 return 해줘야 합니다. 리듀서?? 리듀서는 순수 함수여야 하기 때문에 파라미터(인자)로 받아오는 데이터만 사용 해야 합니다. (외부에서 데이터를 가지고 오면 안됩니다. 서버에서 오는 데이터도 외부의 데이터 입니.. 2021. 11. 22. 4주차 - Firebase, FireStore Firebase란? 웹의 동작방식 : 웹은 요청과 응답으로 굴러갑니다. 클라이언트가 서버에게 요청, 서버가 클라이언트에게 응답 서버가 하는 일 : 서버가 하는 일은 엄청 많아요. 우리가 알고 있는 것처럼 데이터도 관리하고, 분산처리도 하고, 웹 어플리케이션도 돌려야 하고... 서버가 할 일이 많다는 건, 서버가 하는 일을 우리가 전부 관리해줘야한다는 이야기이기도 해요. 서버리스란? : 서버리스는 서버가 없다가 아니라, 서버를 신경 쓸 필요없다 입니다. 이미 누군가가 구축해둔 서버의 일부분을 빌려서 쓸 수 있어요. 우리가 인프라를 구축하고, 서버 스펙을 고민할 필요 없다는 소리죠! 우린 그냥, 우리한테 필요한 서버를 필요한만큼만 빌려 쓰면 되니까요. BaaS는 뭘 빌려 오는 건가요? : BaaS는 Back.. 2021. 11. 22. 4주차 - 스크롤바 + 화면에 버튼 고정 시키기 + 퀴즈 스크롤바 움직이는 방법은 { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }) }}> 위로 가기 window.scrollTo()를 사용해서 top과 left를 설정해서 위치를 조정 해주고, behavior은 어떤 느낌으로 움직일지 정해준다. + 추가 기능 (위로가기 버튼 화면에 고정 시키기) : position : fixed를 사용하면 화면에 고정 시킬 수 있다. (bottom과 right로 위치 설정) const Top = styled.button` position : fixed; bottom : 50%; right : 2rem; background-color: blueviolet; color : white; border: blueviolet; wid.. 2021. 11. 22. 이전 1 2 다음 728x90
