지나가던 컴공생

- 이제 프로필을 보고 업데이트 하는 작업을 해줄 것이다. 현재는 Home에서 DB의 스냅샷을 가져오는게 전부이다. 이제 쿼리를 사용하여 데이터 처리하는 기능을 추가할 것이다. - 아래와 같이 getMyTweets 함수를 작성할 것인데 profile.js에서는 유저의 정보를 모르므로 Router에서 profile.js가userObj를 Prop으로 받을 수 있도록 해준다. - 이제 profile.js 코드를 작성하자. import { authService, dbService } from "myFirebase"; import { addDoc, collection, getDocs, orderBy, query, where } from "firebase/firestore"; import React, { useEf..

- 이제 이미지 트윗을 업로드 해볼 것이다. 그 전에 Home.js의 아래 부분을 주석처리 해줄 것이다. 트윗만 올리는 기능을 지우고 트윗에 이미지URL을 올리는 식으로 구현방식을 바꿀 것이다. - 우선 myFirebase.js에 strorage를 추가한다. import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; import { getFirestore } from "firebase/firestore"; import { getStorage } from "firebase/storage"; const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, auth..

- 이제 트윗에 이미지를 추가할 수 있도록 해보자. Home.js에 input에 트윗과 전송에 이어 파일을 추가할 수 있도록 하자. - 아래와 같이 파일 선택을 누르면 이미지를 선택할 수 있다. - 하지만 이미지를 미리보기할 수 없어서 불편하다. 미리보기 기능을 구현해보자. 이를 위해 FIleReader API를 사용할 것이다. onFileChange 함수를 만들고 이를 파일선택에 적용시키자 그리고 이미지를 띄우는 코드까지 작성했다. // Home.js import React, { useEffect, useState } from "react"; import { dbService } from "myFirebase"; import { addDoc, collection, getDocs, orderBy, que..

- 이제 트윗 삭제와 업데이트 기능을 구현할 것이다. 우선 새로 컴포넌트를 만들어 줄 것이다. (Tweet.js) Home 으로부터 tweetObj와 isOwner Props를 받아서 text를 출력하고 트윗을 작성한 유저가 맞다면 Delete Tweet과 Edit Tweet 버튼을 활성화 한다. - Home.js도 수정해 준다. - 서버를 실행해보면 아래와 같은 결과가 나온다. - Firestore에서 bb의 createId를 임의로 수정하면 내 계정이 쓴 글이 아니기 때문에 삭제 수정 버튼이 나오지 않는 것을 볼 수 있다. - 틀을 만들었으니 이제 삭제 기능을 구현해보자 // Tweet.js import { dbService } from "myFirebase"; import { doc, deleteD..

- 트윗내용을 누가 적었는지 알기 위해 코드를 수정해 줄 것이다. App.js에서 user 정보를 담을 state를 추가하고 AppRouter에 props를 전달한다. Router에서 이후 받은 props를 Home으로 전달해 준다. // App.js import React, { useEffect, useState } from "react"; import AppRouter from "components/Router"; import { authService } from "myFirebase"; function App() { // firebase가 프로그램을 초기화 하길 기다리기 위한 state const [init, setInit] = useState(false); // 로그인 여부 state const ..

- Firebase DB는 NoSQL DB이다. 때문에 간단하고 자유롭지만 제약사항 약간 존재한다. - NoSQL DB는 두 가지 요소를 가지는데 Collection과 Document이다. Collection은 기본적으로 폴더와 비슷하고, Document는 말 그대로 doc 텍스트 같은 것이다. DB는 Collection들을 가지고 있고 Collection은 Document들을 가진다. - 컬렉션 추가를 눌러서 Collection이름을 "Tweets"으로, "content" 필드를 string 타입으로 선언해보았따. - DB에 대해 알아보았으니 이제 코드상으로 구현해보자. 우선 myFirebase에 dbService를 추가하자. import { initializeApp } from "firebase/ap..

- 이제 트윗을 위한 form을 작성해 볼 것이다. // Home.js import React from "react"; // for Home import const Home = () => { return ( ); } export default Home; - 아래와 같이 트윗 form이 생성되었다. - 이제 전에 했던 것과 같이 state를 하나 만들어 onSubmit과 onChange 함수를 작성해 줄 것이다. // home.js import React, { useState } from "react"; // for Home import const Home = () => { const [tweet, setTweet] = useState(""); const onSubmit = (event) => { // 아..

- Home을 좀더 업그레이드 하기 위해 Navigation을 만들어 줄 것이다. Navigation.js를 생성하고, - 로그인 상태일때 Navigation이 존재하도록 하기 위해 Router.js를 수정해준다. - 아래와 같이 로그인 되어 있을 때 Home과 Profile로 이동할 수 있게 되었다. - 이제 Profile에서 로그아웃 하는 버튼을 만들어 줄 것이다. // Profile.js import { authService } from "myFirebase"; import React from "react"; // for Profile import const Profile = () => { const onLogOutClick = () => authService.signOut(); return ( L..

- 이전에 계정을 생성했는데도 create account 버튼이 log in으로 바뀌지 않았었다. 이는 App.js에서 원인을 찾을 수 있다. - 어플리케이션이 로드될 때 firebase는 사용자가 로그인 되었는지 아닌지 확인할 시간이 없다. 왜냐하면 너무 빨리 일어나기 때문이다. 그래서 어플리케이션이 로드되자마자 로그아웃이 될 것이며 currentUser에는 아무것도 없을 것이다. - 사용자의 로그인 상태 변화를 관찰하기 위해 docs에서 onAuthStateChanged를 사용할 것이다. 이는 기본적으로 event listener이다. - 코드를 작성해 준다. (App.js) authStated의 변화를 감지하여 로그인이 되어있으면 true 아니면 fale를 반환한다. 그리고 setInit은 fire..

- 계정을 생성하기 위해 Firebase Docs에서 createUserWithEmailAndPassword 로 들어가자. 계정과 관련된 여러 API들을 볼 수 있다. - 계정 기능을 만들기 위해 Auth.js에서 새로운 state를 추가하자. newAccount가 true일 때는 새로운 계정을 만들 것이고 false일 때는 log in 버튼을 활성화할 것이다. import React, {useEffect, useState} from "react"; // for auth import const Auth = () => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [newAccount,..