기록하는 개발자

: comfirm 이 발생하고 확인을 선택하면 해당 tweet 이 삭제된다. - 수정 form을 보여준다. - 내용 수정 후 update tweet을 클릭하면 수정 내용이 반영된다. - cancel 선택 시 form이 사라진다. (수정 취소) import React, {useState} from 'react'; import { deleteDoc, updateDoc, doc } from '@firebase/firestore' import { dbService } from "fBase"; const Tweet = ({ tweetObj, isOwner})=>{ const TweetTextRef = do..

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"..

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_..

- 앞으로 우리가 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..

1. npx create-react-app [appName] 2. firebase project 만들기 3. terminal 창에 firebase install > npm install --save firebase 4. src 폴더 내 firebase.js 파일 생성 5. firebase SDK의 firebaseConfig 복사하여 아래와 같이 구성 import { initializeApp } from "firebase/app"; const firebaseConfig = { apiKey: "a", authDomain: "b", projectId: "c", storageBucket: "d", messagingSenderId: "e", appId: "f" }; export default initializeA..

useFadeIn - useEffect를 사용한 hook으로 CSS에서의 transition, opacity 속성을 다룬다. import React, { useRef, useEffect, useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const useFadeIn = (duration = 1, delay = 0) => { const element = useRef(); useEffect(() => { if (element.current) { const { current } = element; current.style.transitio..

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..

- 마우스가 창 상단의 바깥쪽으로 나가면 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..