# App.jsindex.js를 제외하면 최상위 컴포넌트 파일이다.App.js에서부터 속성들을 가져와야 한다.필요한 속성은 userObj이다. userObj는 파이어베이스에서 getFirestore.currentUser.[ 필요한키 ]이렇게 가져올 수 있는 데이터이지만 userObj라는 변수를 만들어 속성에 넣고여기저기서 전달받아 사용하는 이유는 소스를 통합하여 확장성 있게사용하고 싶기때문이다. userObj 하나만 변경해도 통합되어 변경되기 때문에더 직관적으로 변경,저장하기 쉬워진다.function App() { const [init, setInit] = useState(false); //false = 홈화면대기중... const [userObj, setUserObj] = useState(null..

3-1. 이미지업로드 게시글과 이어지는 내용이다.3-1게시글에선 업로드가 가능할 수 있는 기능만 추가해준 것이고 3-2에선 확실하게 마운트 시켜주고 삭제시키는 기능을 구현했다. # 메소드 영역import {storageService} from "Fbase";//Fbase.js에서 getStorage from "firebase/storage"를 가져온 것import {ref, uploadString, getDownloadURL } from "@firebase/storage";import { v4 as uuidv4 } from 'uuid';export const Home = ({ userObj }) { //...const [attachment, setAttachment] = useState("");//업로드..

2. 업로드된 컴포넌트 삭제/수정 기능과 이어지는 내용이다.Home.js 파일내부에 내용이다. Home.js는 Zwitter앱의 홈화면(메인화면)이 될 컴포넌트이다. # 메소드 영역const [attachment, setAttachment] = useState();//파일을 위한 스테이트이다.const onFileChange = ({target:{files}}) => { const theFile = files[0]; //파일을 가져오고 const reader = new FileReader(); //reader를 만든 후 reader.onloadend = ({currentTarget:{result}}) => { setAttachment(result);..

1. Real Time 기능 게시글과 이어지는 내용이다.글을 입력하고 업로드하면 마운트되는 컴포넌트의 이름은 Zweet이며 Zweet.js내부에 단독으로 존재한다. ( 아래 내용들 모두 Zweet.js의 내용 ) # 메소드 영역import React, {useState} from "react";import {dbService} from "../Fbase"; //Fbase.js에서 가져온 변수이고 getFirestore메소드이다.import {deleteDoc, doc, updateDoc } from "firebase/firestore";export const Zweet = ({ zweetObj, isOwner })=> { //zweetObj = 최신화된 유저오브젝트 , isOwner = 글쓴이가 맞..

import React, {useEffect, useState} from "react";import { dbService } from "Fbase";import { addDoc, collection, onSnapshot, query, orderBy } from "firebase/firestore";import {Zweet} from "components/Zweet";export const Home = ({ userObj })=> { const [zweet, setZweet] = useState(""); const [zweets, setZweets] = useState([]); useEffect(()=>{ const q = query( collection(d..

Firebase 설치시 npm i firebase 를 하면 최신버전이 인스톨된다. npm i firebase@9.14.0 이와 같이 입력하면 버전 9.14.0으로 사용가능 하다. create-react-app 을 사용했을 때 의 기준으로 작성되었다. # 사용예시import firebase from "firebase/compat/app";import "firebase/compat/auth";import { getFirestore } from "firebase/firestore";const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AUTH_DOMAIN, projectI..