목록react (36)

기록하는 개발자

[React, Firebase] TwitterCloneCoding 2.0 New Tweet 작성 후 database에 저장하기

cloue firestore 의 database는 NoSQL database 이다. -규칙이 적고 유연하다는 장점이 있으나 이로 인해 sql의 자율성에 비해 제한사항이 있다는 단점 존재 특징 -collection 이라는 것을 가진다. 이는 컴퓨터의 폴더와 같은 역할 -document : 컴퓨터에 있는 문서와 비슷하며 필드, value, uid 등을 가진다. import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; import { getFirestore } from "firebase/firestore"..
Web/React 2021. 10. 12. 20:52
[React, Firebase] TwitterCloneCoding 1.0 Authentication-Google 로그인

1. auth 사용을 위해 firebase.js에 import import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_API_AUTH_DOMAIN, projectId: process.env.REACT_APP_API_PROJECT_ID, storageBucket: process.env.REACT_APP_API_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_API_MESSAGING_..
Web/React 2021. 10. 12. 01:16
[React, Firebase] TwitterCloneCoding 0.1 router 설정

- 앞으로 우리가 render 시킬 routes 는 우리의 로그인 여부에 따라 달라진다. 1. routes 폴더 생성 2. terminal 창에서 react router dom 설치 > npm i react-router-dom import React from 'react'; const Home=()=>Home; export default Home; import React from 'react'; const Auth=()=>Auth; export default Auth; import React from 'react'; import AppRouter from "./Router"; function App() { return ( ); } export..
Web/React 2021. 10. 11. 18:06
[React] React Hook-2.5 useEffect를 활용한 useScroll

import React, { useRef, useEffect, useState } from "react"; import ReactDOM from "react-dom"; const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ x: window.scrollX, y: window.scrollY }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEv..
Web/React 2021. 10. 3. 15:16
[React] React Hook-2.4 useEffect를 활용한 useBeforeLeave

- 마우스가 창 상단의 바깥쪽으로 나가면 console 창에 "will you leave?"를 표시한다. import React, { useRef, useEffect, useState } from "react"; import ReactDOM from "react-dom"; const useBeforeLeave = (onBefore) => { if (typeof onBefore !== "function") return; const handle = (event) => { const { clientY } = event; if (clientY { document.addEventListener("mouseleave", handle); return () => document.removeEventListener("m..
Web/React 2021. 10. 3. 13:26
[React] React Hook-2.3 useConfirm과 usePreventLeave

* useConfirm과 usePreventLeave는 useState, useEffect를 사용하지 않기 때문에 hook은 아니지만 함수형 프로그래밍을 익히는데 도움이 된다. - 사용자가 무언가를 하기전에 확인하는 것으로 - 사용자가 버튼을 click하면 event 실행 전 msg를 보여준다. import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const useConfirm = (message = "", onConfirm, onCancel) => { if (onConfirm && typeof onConfirm !== "function") return; const confirmAc..
Web/React 2021. 9. 30. 21:44
[React] React Hook-1.2 useState를 활용한 useTabs

import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const content = [ { tab: "Romnace and Musical", content: "I think you like SingStreet, LaLaLand, The Greatest Show!" }, { tab: "Fantasy", content: "Avengers, Harry Potter, The Lord of the Rings!" } ]; const useTabs = (initialTab, tabArray) => { if (!tabArray || !Array.isArr..
Web/React 2021. 9. 29. 23:11
[React] React Hook-1.1 useState를 활용한 useInput

useInput - input 내용과 그에 따른 이벤트를 useState hooks를 통해 관리할 수 있다. import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onChange = (event) => { const { target: { value } } = event; // 위와 동일 : const { value } = event.target; let ..
Web/React 2021. 9. 29. 17:37
이전 Prev 1 2 3 4 5 Next 다음