20210412 React and Firebase08, firebase storage file 지우기(delete, refFromURL), profile 수정하기, profile로 내가 쓴 글만 보기(where, orderBy), profile 이름 바꾸기(user, displayName, updateProfile), 객체 커스텀(object resizing),..
Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Deleting Files Reference : delete() delete ( ) : Promise : 현재 reference 위치의 object를 제거함 (즉, 해당 reference를 제거할려면 reference location을 알아야함) 결국에는 document, collection 과 같이 video img와 같은 파일을 다루게 되어 정보를 저장하는 경우에는 reference location이 항상 필요하게 되고, 우리는 현재 storage에 저장되어 있는 파일의 url을 document에 가지고 있으므로 이를 활용하여 r..
20210409 React and Firebase07, img파일 data_url로 바꾸기, firebase에 img파일 업로드, download_url, FileReader API, Firestorage, 랜덤id 생성 패키지(uuid), Nomadcoder
Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Preivew Image (File Upload) firebase console의 storage 기능에서 bucket은 파일을 넣는 곳임 트윗할 때 사진을 첨부하기 위해서 트윗하는 방법을 바꿔야함 Hooks attachment hook은 업로드하는 file를 표시할 수 있는 string 형식의 dataURL 값을 가짐 default 는 null 값으로 둠 import Rweet from "components/Rweet"; import { dbService } from "fBase"; import React, { useEffect, useState ..
20210408 React and Firebase06, 작성한 트윗 삭제 및 수정(Delete and Update), 데이터베이스 반영, doc(), delete(), update(), useState 토글 활용, Nomadcoder
Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Delete and Update 지금 까지 진행했던 실시간 데이터 update는 정말 좋은 기능이지만 원하지 않을 때도 너무 실시간으로 실행이 됨 예를 들어, 트위터에서 누군가가 추가시키고 지우는게 나타나고, 댓글들이 생성되는 것은 보고 싶지만 실시간으로 수정되고 사라지는 모습은 사용자에게 불편함(물론, 실시간 채팅 앱에서는 필요하지만) 트윗 Component 분리와 사용자와 작성자 일치에 따른 delete, edit 버튼 표시 Rweet Component 생성(분리 관리) 효율적인 관리를 위해서 트윗을 하는 부분을 따로 component화 시킬 ..
20210405 React and Firebase04 google로그인, github로그인, 로그아웃, 데이터베이스 연결(firestore), redirect, useHistroy, navigation, signOut, GoogleAuthProvider, Nomadcoder
Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Social Login signinwithpopup signinwithredirect GoogleAuthProvider 소셜 로그인 기능을 사용하기 위해서는 signinwithpopup 또는 signinwithredirect를 활용 할 수 있다. Auth : Social Login 해당 Social Login 버튼을 눌렀을 때 처리 할 onSocialClick 함수를 만든다. 로그인을 하려면 signinwithpopup에 해당 provider를 넣어 처리 한다. provider에는 google, facebook, github 등이 존재하는데 전에 ..
20210404 React and Firebase03 계정 생성, 로그인, Auth, createuserwithemailandpassword, setPersistence, onAuthStateChanged, Nomadcoder
Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Creating Account Provider Auth provider EmailAuthProvider createuserwithemailandpassword : 사용자의 새로운 계정을 생성 할수 있게 email, password를 받아 User Account를 생성시키고 바로 로그인 하며, 나중에 Account를 가지고 로그인 할 수 있음 (계정이 이미 존재하거나, 타당하지 않은 값인 경우 fail을 return) newAccount라는 useState를 사용한 hook을 생성해서 Account를 가지고 있는지 확인해서, newAccount 가 ..
20210401 React and Firebase01, Firebase 사용 기준 및 AWS Amplify 비교, 트위터 클론 코딩을 위한 환경설정(React, Firebase), .env 파일, React(Router, Route, Switch), Nomadcoder
Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Firebase Firebase Site Firebase는 그냥 데이터베이스 였음, 구글에 속하지도 않았다가 구글에 인수되면서 확장되었음 이 프로젝트에서는 Firebase를 통해서 데이터 베이스이자 백엔드인 Cloud Firestore를 사용함(데이터베이스 관련 코드없이 데이터베이스를 사용하게 해줌!) Cloud Firestore : Detail Fireabase : products Firebase ML : 머신러닝 기능 제공 Cloud Functions : serverless function 기능 제공 (AWS, Lamda 같은것임) Cloud ..
