profile
Student in web development

React Twitter Clone (21) - 트윗 파일 URL

업로드시 콘솔에 표시되는 reference를 보면 reference, location, service 등등이 있는 것을 볼 수 있습니다. 일단 저는 url을 다운받고 싶기 떄문에 public url을 다운받아야 합니다. putString 문서부분을 보면 uploa

약 22시간 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (20) - 업로드

이제 bucket에 업로드를 할껍니다.우선 Home.js의 onSubmit 부분을 위처럼 주석처리 합니다. 트윗을 업로드 하는 순서는 사진이 있다면 URL을 받아서 URL을 Twitt에 추가하고 URL을 가진 Twitt을 만드는 겁니다.Firebase Storage 부

1일 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (19) - 이미지 미리보기 2

input에 event listener을 추가하고 있습니다. (= onFileChange)모든 input은 어떤 식으로든 변하는데 방식이 다를 뿐 입니다. 우리는 그 이벤트로부터 파일을 얻습니다.기본적으로 이 배열을 많은 파일들을 원하는 만큼 가질 수 있습니다. 하지만

2일 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (18) - 이미지 미리보기 1

Firebase 콘솔에서 Get started를 클릭합니다.그러면 이렇게 무언가에 대한 규칙을 보여줍니다. Storage 위치는 원래 있던 곳이 되고 파일을 넣는 곳인 bucket을 만듭니다.이제 Twitt에 사진을 첨부해야 하기 떄문에 Twitt 하는 방법을 바꿔야

3일 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (17) - 중간 요약

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

3일 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (16) - 수정과 삭제 - 2

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

3일 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (15) - 수정과 삭제 - 1

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

4일 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (14) - 리얼타임 트윗

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

5일 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (13) - 트윗 받기

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

5일 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (12) - Twitting

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

5일 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (11) - 양식 및 데이터베이스 설정

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

6일 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (10) - 로그아웃

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

6일 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (9) - 소셜 로그인

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

7일 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (8) - 로그인-2

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

2020년 9월 18일
·
0개의 댓글
post-thumbnail

React Twitter Clone (7) - 계정 생성

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

2020년 9월 17일
·
0개의 댓글
post-thumbnail

React Twitter Clone (6) - 로그인-1

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

2020년 9월 17일
·
0개의 댓글
post-thumbnail

React Twitter Clone (5) - Firebase 사용하기

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

2020년 9월 17일
·
0개의 댓글
post-thumbnail

React Twitter Clone (4) - 라우터 세팅

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

2020년 9월 16일
·
0개의 댓글
post-thumbnail

React Twitter Clone (3) - 보안 키(Github)

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

2020년 9월 16일
·
0개의 댓글
post-thumbnail

React Twitter Clone (2) - 프로젝스 생성/세팅 - Firebase 생성 & 연결

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

2020년 9월 16일
·
0개의 댓글