지나가던 컴공생

- 이번에는 지금까지 작성했던 자바스크립트, 리액트 코드를 정리하고, 스타일을 만들 것이다. - 태그에서 수행하는 기능은 컴포넌트를 따로 만들어 관리하는 것이 보기 좋다. 우선 Home.js의 form을 따로 관리할 TweetFactory.js를 컴포넌트 폴더에 생성했다. - 아래와 같이 Home의 코드를 옮겨 주고 // TweetFactory.js import React, {useState} from "react"; import { dbService, storageService } from "myFirebase"; import { v4 as uuidv4 } from "uuid"; import { uploadString, getDownloadURL, ref } from '@firebase/storage'..

- 이제 프로필에 My Profile이라고 보여지는 대신에 유저의 이름이 보이도록 변경할 것이다. - 우선 router에서 navigation에 userObj를 보내고 naviagation에서 이를 받아 이메일을 출력하도록 하자 - 아래와 같이 프로필 이름을 바꾸었다. 현재는 displayName이 null이기 때문에 's Profile와 같이 뜨지만 곧 이름을 설정할 수 있도록 할 것이다. // profile.js import { authService, dbService } from "myFirebase"; import { collection, getDocs, orderBy, query, where } from "firebase/firestore"; import React, { useEffect, us..

- 이제 프로필을 보고 업데이트 하는 작업을 해줄 것이다. 현재는 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..