Firestore Cloud Firestore의 database는 NoSQL database이다. Cloud Firestore는 많은 것들을 프로그램하지 않아도 되고 유연함을 갖고 있으며 사용하기 쉽다. BUT 규칙이 많지 않기 때문에 몇 가지 제한 사항이 있다. NoSQL 의 특징 Collection을 가진다. 폴더 같은 것 Document를 가진다. 컴퓨터에 있는 문서 같은 것(ex. doc, text...) Database는 collection을 가지고 각 collection은 document들을 가진다. 🚩 정리 Collection은 documents의 group이다.

Firebase : 웹사이트를 통해 백엔드를 제공하는 서비스 Firebase vs AWS amplify (경쟁상대) (old) (new) When to use Firebase 비즈니스를 구상중이거나 무언가 시작할 때, 어떤 아이디어를 테스트해볼 때, "가능한 빨리" 아이디어를 테스트해보고 싶을 때 모든 회원, 데이터 등은 내 서버가 아니라 구글의 서버에 저장되므로 내 것이 아니다. firebase에서 벗어나려할 때 힘들다. firebase(amplify)를 통해 아이디어를 테스트했을 때, 아주 잘 되고 사용자들이 원한다면, 그때 비로소 나만의 서비스로 다시 만들어라 🚨 주의 100% 무료는 아니다!! 일부 무료 authentication - 핸드폰 인증 외 무료 cloud firestore - docum..

2.6 useScroll & useFullscreen useScroll user가 scroll하여 무언가 지나쳤을 때, 색상을 바꾸는 등 무엇이든 할 수 있다. const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return state; }; c..

2.0 Introduction to useEffect useEffect componentDidmount의 역할을 해서 새로고침하면 sayHello를 실행한다. 2개 인자를 받음 - function으로서의 effect - dependency : 만약 deps가 있다면 effect (deps)리스트에 있는 값일 때만 값이 변하도록 활성화 된다. useEffect는 여기서 componentDidMount, componentWillUpdate이다. dependency일 때만 update한다. 📌 dependency에 change가 발생할 때만 update! + useEffect로부터 function이 return된다. -> componentWillUnmount! import React, { useState, u..

1.0 Introduction to useState리액트의 불편한 점 2가지 1. handling input 2. fetching data hooks는 class component, render등을 고려할 필요가 없다.import React, { useState } from "react";const [item, setItem] = useState(1)item: 변경할 statesetItem: item의 modifier Hooks vs Class componentimport React, { useState } from "react";// Hooks로 구현한 경우function App() { const [item, setItem] = useState(1); const incrementItem = () =..

6.0 Getting Ready for the Router 이전에 만든 사이트를 좀 더 interactive하게 해보자. react-router-dom npm install react-router-dom components, routes 폴더 js와 css를 옮긴다. 기존 App.js의 내용을 Home.js로 옮긴다. (App -> Home 수정 필요) About.js는 아직 작성 안 된 상태 6.1 Building the Router App.js에서 Router 만들기 Router는 url을 가져다가 보고 우리가 라우터에게 명령한 것에 따라 component(page)를 불러온다. import React from "react"; import { HashRouter, Route } from "react-..