기록하는 개발자

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

1. Home 화면에서 Tweet을 생성 할 때 file과 글을 함께 올릴 수 있다. (글과 사진 중 하나만 올리는 것 또한 가능.) 2. 파일 선택 후 Clear Photo 버튼을 통해 선택을 취소할 수 있다. 3. 파일 선택 및 글 작성 후 Tweet 버튼을 클릭하면 글과 파일이 함께 post된다. 4. Delete Tweet 버튼을 클릭하면 Collection에서 tweet 객체가 삭제되고 해당 tweet 객체에 file이 있었다면, Storage에 올라간 file도 함께 삭제된다. : attachmentUrl의 이름으로 file의 url(경로) 항목이 추가된다. : user가 upload한 f..

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