React_Twiiter_Clone

훌륭한 백엔드 기능들을 포괄하고 그 기능들은 제공해주는 것기존의 리얼타임 데이터베이스도 지원하지만, 리얼타임 데이터 베이스는 서버 확장이 자동적으로 지원되지 않아서 데이터베이스를 추가적으로 생성해줘야 합니다. Firebase는 사용자가 많아질 경우 서버 확장도 알아서

위의 명령어로 react 프로젝트를 생성한 후 이렇게 디렉터리 / JS 파일 정리https://console.firebase.google.com/u/0/?gclid=CjwKCAjwzIH7BRAbEiwAoDxxTg8tSrn_gdtmjoDqyxIp0LekANGFJ

위와 같은 식으로 .env 파일을 만들어서 작성하였습니다. 해당 파일에는 환경 변수들이 들어있고 리액트에서 환경변수를 사용하고자 한다면 반드시 REACT_APP으로 시작해야 하고 그 뒤에 이름을 붙혀야 합니다 (EX: REACT_APP_EXAM )그 후에 이런식으로 코

src에 conponents와 routes 디렉터리를 만들고 App.js를 componenets 폴더에 옮겨 놓습니다. 그리고 index.js 부분의 App의 경로를 수정합니다.기본 페이지 구성은 위와 같이 해주겠습니다.이 후에 Navigation을 만들어야 하는데np

우선 Firebase가 정의된 js파일에 접근해서 이렇게 변경합니다. 최상단에import "firebase/auth" 라고 되어있는데 이는 firebase의 인증과 관련된 부분입니다.우선 jsconfig라는 파일을 만들어서 위처럼 작성해줍니다. 위는 파일 연결시 연결

Firebase관리페이지로 들어가서 사용자 로그인 방식 설정을 할 수 있습니다.이메일구글깃허브의 프로필 세팅 부분에서 Developer Settiongs 버튼을 누른다음 oAuth Apps 버튼을 눌러서 위 이미지 처럼 이름, URL 콜백 URL등을 설정하시면 됩니다.

Firebase auth를 보면 auth provider를 살펴볼 수 있고 그 종류는 굉장히 많습니다. 이 중 우리가 사용할 것은 EmailAuthProvider 입니다. 여기서 우리는 이메일과 패스워드를 사용할 것이기 때문에 인증방법의 firebase.auth.A

페이지가 시작할 때 로그인이 되어있는지 확인을 해보기 위해 위처럼 코드를 작성하겠습니다. 처음에 유저가 로그인되어있는지 콘솔로 찍고 2초마다 계속 찍어주는 코드입니다.그러면 위의 이미지처럼 처음엔 유저정보가 null값으로 넘어오나 잠시 후에 유저정보를 정상적으로 받아옵

Firebase 문서의 method를 보면signInWithPopup이라는 것을 볼 수 있습니다.들어가면 사용법이 밑의 이미지 처럼 나와있습니다.우선 provider를 만들고 provider로 로그인을 해야 합니다. 여기서는 gitgub와 google을 이용하여 만들

components 디렉토리에 Navigations.js를 만들어서 위처럼 코드를 작성하고 Router.js에 추가해줍니다.해당 추가 코드는 isLoggedIn이 true인 경우 Navigation을 노출시키는 코드입니다.그 후에 로그인하면 위처럼 나오게 됩니다. 이

이제 폼을 만들어 보겠습니다. Home.js에 코드를 작성합니다.게시글 작성에 필요한 함수들도 미리 정의해둡니다.

위의 Cloud FireStore의 database는 NoSQL database입니다.SQL 데이터베이스에는 많은 규칙과 관습들이 있습니다.다만 몇가지 제한사항이 존재합니다.NoSQL database의 한 가지 특징은 Collection을 가지고 있습니다.Collect

이제 작성한 트윗들을 어떻게 가져올 것인지를 생각해야 합니다.Home.js에 state를 하나 만들어 줍니다. 그리고 기본값은 비어있는 array로 합니다.그리고 useEffect를 사용하여 컴포넌트가 mount될 때 dbService를 가져옵니다. 그리고 collec

App.js는 기본적으로 모든 요소들의 위에 있습니다. 어플케이션은 authorization과 나머지 전부를 다루는 것이라 페이지를 다룰 때 유용하게 사용할 수 있습니다.우선 App.js에 state를 하나 추가 해줍니다.이전에 authService를 통해서 user의

우리는 이제 실시간으로 쓰고 지울 수 있지만 우리가 원할 때만 실시간으로 사용할 수는 없을까요.예를 들어 인스타그램 피드를 누군가가 추가시키고, 지우고, 수정한 댓글들을 실시간으로 보고 싶지 않을 수도 있습니다.이전 포스트까지 한 내용은 채팅에서는 매우 유용할겁니다.

Twitt에 onDeleteClick함수를 만들고 Delete Twitt버튼을 만들어 클릭하면 함수가 실행되도록 만들어줍니다.confirm은 선택창입니다. 정말 해당 Twitt을 삭제할 것인지 한 번더 선택하게 해줄 것 입니다. 그리고 사용자가 확인을 누르면 ok는 t

다시 한번 복습해보겠습니다. authentication 이후의 것들을 복습하겠습니다.Home에서 listner로 snapshot을 사용하고 있습니다. snapshot은 기본적으로 무언가가 일어나면,onSnapshot은 기본적으로 데이터베이스에 무슨 일이 있을 때, 알