기록하는 개발자

- profile에 user명을 함께 보여준다. - userName을 update할 수 있다. - 네비게이션의 profile을 보여주는 link에 userName을 함께 표시한다. import React from 'react'; import {Link} from "react-router-dom"; const Navigation = ({userInfo}) =>{ const userName=userInfo[Object.keys(userInfo)[0]].displayName; return( Home {userName}'s profile ); }; export default Navigation; - Profile component를 routing할 때 Home..

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

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