민규의 개발블로그

우선 트윗 코드가 좀 너저분해질 예정이기 때문에 따로 컴포넌트를 빼겠다. components 폴더에 Gweets.js 폴더를 만들고 Home.js에서 필요한 것들을 props로 전달 해주겠다. import React from "react"; function Gweets({ GweetObj }) { return ( {GweetObj.text} ); } export default Gweets; ------------------------------------------- Home.js {dbGweets.map((gweet) => ( ))} 권한 그 다음 삭제,수정 버튼을 만들고 글을 작성한 유저만 삭제,수정 버튼이 보이게 한다. 글을 작성할 때 db에 creatorId: userObj.uid 값을 보내주는데..

CRUD 기능을 만들기 앞서 Home.js에 간단한 form을 만들어주고 firebase에서 db 설정을 하겠다. firebase 콘솔에가서 탭 중에 Cloud Firestore 클릭 후 설명에 따라 만들어 주면 된다. 그 다음 로컬에 fbserver.js에 가서 필요한 모듈을 불러온다. import "firebase/firestore"; export const dbService = firebase.firestore(); 그럼 db는 만들어졌고 firebase db는 noSQL이다. 이 것은 Collection과 Documents를 가지고 있는데 Collection은 폴더, Documents는 파일과 같다. Create input창에 입력후 Gweet 버튼을 누르면 db에 전송할건데 어떤 정보들을 어떤식..

로그아웃은 Docs를 보고 하면 엄청 쉽다... 그전에 router 설정을 조금 수정해주겠다. 로그인 유무에 따라 로그인시 NavBar를 보여주고 NavBar에는 Home 링크 profile 링크를 보여주고 profile로 왔을시 로그아웃 버튼을 만들어주겠다. 그 다음 로그아웃을 할수있게 로그아웃 함수를 구현해 줄건데 Docs를 보면 엄청 간단하다. 그냥 .signOut( ) 함수만 불러다 써주면 끝이다. 그런데 이제 로그아웃시 home으로 돌아가지 않기 때문에 router의 useHistory 훅을 이용해서 간단하게 이동해주면 된다. const history = useHistory(); const Logout = () => { authService.signOut(); history.push("/"); };

이번에는 지난번에 firebase에 구글 로그인을 허용 해뒀기 때문에 구글 id로 로그인을 해보겠다. 물론 Docs를 보고서 Docs에 가면 로그인 하는 방법이 팝업창과 로그인 페이지로 리디렉션하는 방법이 있는데 간단하게 팝업창으로 해주겠다. 먼저 다음과 같이 인스턴스를 생성한다. let provider = new firebase.auth.GoogleAuthProvider(); 그다음 팝업창을 호출하는 함수에 담아주면 끝 await authService.signInWithPopup(provider); 그럼 Goggle 버튼 클릭 시 아래와 같이 팝업창으로 로그인 할 수 있게 된다. 이건 Goggle 버튼이 onClick 됐을 경우 실행할 함수 코드다. 되게 간단하게 끝났다. const onSocial =..

Firebase에서 어떻게 회원가입을 하고 로그인을 하는지에 대해 설명하겠다. 도큐먼테이션을 보면 이렇게 나와있다. 우선 useState으로 계정 유무 체크 정보를 먼저 담아주면 const [newAccount, setNewAccount] = useState(true); true 일 때는 회원가입 창을, false 일 때는 로그인 창을 보여주게 설정했다. 그리고 회원가입을 누르면 .createUserWithEmailAndPassword( ) 함수를 호출해준다. 인자는 email,password Promise기 때문에 submit 함수엔 async 하위 함수엔 await를 해준다. 로그인을 누르면 역시 Docs에 나와있는대로 편하게 해주면 된다. try ... catch로 에러처리를 해주고 회원가입을 해보..

이번에는 비로그인시 보여지는 로그인 창을 만들어 줄건데 우선 그전에 firebase에 가서 왼쪽 Authentication 메뉴바 클릭후 로그인 승인 설정을 해주자 나는 이메일/비밀번호랑 google 란만 설정 해줬다. 그리고 나서 Auth.js로 가서 코드 작성을 해주자 import React, { useState } from "react"; function Auth() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const onChange = (e) => { const { value, name } = e.target; if (name === "email") setEmail(value); e..

이번엔 프로젝트 구조와 Router 설정을 해보자 ! src 폴더 안에 compoents와 routes 폴더를 만든 뒤 필요한 파일들을 생성 해준다. 그리고 gitignore에 따로 apikey 값들은 빼둘려고 .env 파일을 만들어 그 곳에 보관해뒀다. AppRouter 파일에 route 설정을 해줬다. import React, { useState } from "react"; import { HashRouter as Router, Switch, Route } from "react-router-dom"; import Home from "../routes/Home"; import Profile from "../routes/Profile"; import Auth from "../routes/Auth"; fu..

Client는 React, 서버 부분은 Firebase를 이용하여 twitter을 간단하게 클론 코딩 해보겠다. 일단 cmd 창에 프로젝트를 만들어주자. 요 며칠 CRA로 만든 프로젝트에서 에러가 좀 있었는데 업데이트가 됐다. 그래서 create-react-app을 지웠다가 다시 깔아 줬다. 불필요한 파일들을 지워주고 초기 구조는 아래와 같다. 그 다음 Firebase 세팅을 하자. 우선 firebase 사이트에 들어가서 로그인을 해준 뒤 콘솔로 이동 그다음 프로젝트를 생성한다. 그 다음 vscode 터미널로 가서 npm install --save firebase 를 해준다. 그런다음 개요를 보고 따라서 적용해주면 된다.