🌟 Twinkle (React, Firebase)

What is Firebase? Firebase는 처음엔 그냥 데이터베이스였다. 구글에 인수되고 확장되기 시작했고 현재는 훌륭한 백엔드 기능을 포괄하여 그 기능들을 제공해 주고 있다. 한 마디로 하자면 웹사이트를 통해 제공하는 백엔드 서비스이다. (vs AWS amp

React Setup 깃허브 저장소 만들기 저장소 url 복사 해 두기 리액트 앱 다운 npx create-react-app twinkle VSC에서 twinkle 열기 cd twinkle 깃에 추가하기 git remote add origin 깃허브저장소url

twinkle/.evn 생성 비밀로하고 싶은 키 작성 >❗️CRA로 앱 만들고.env에서 환경변수 사용하려면 변수 이름을 REACTAPP으로 시작해야 한다. REACTAPP으로 시작하는 환경변수를 찾도록 자동으로 설정되어 있기 때문이다. REACTAPP대문자로환경변수

앱 구조 잡기(Structure of App) /src/components 폴더, /src/routes 폴더 생성 App.js components 폴더로 이동, index.js에서 App.js import path 수정하기 📍 /routes 폴더에 route 만들

상대경로 > 절대경로로 수정 /src/components/App.js에서 firebase import하기 1-1. 상대경로 가져오기 1-2. 절대경로 가져오기(absolute import)를 사용해보자 >절대경로 가져오기(absolute import) 절대 경로를

Firebase 콘솔 > Authentification Firebase 콘솔에서 Authentification으로 가면 아직 유저가 아무도 없는 것을 확인할 수 있다. 로그인 방법 설정 로그인 방법 설정 버튼을 클릭해 보자. "이메일/비밀번호"로 로그인하기 로그인

🎯 목표 이메일과 비번을 사용하는 firebase.auth의 메서드를 사용하여 새로운 계정을 만들고 로그인 해보자!

그나저나 로그인도 했는데 아직 이멜/비번 입력창이 보이는 것이 거슬린다. 왜 로그인했는데도 이멜/비번 입력창이 보이는 걸까? 문제 현재 currentUser 속성을 사용하여 현재 로그인한 사용자를 가져오고 있다. 이때 사용자가 로그인 상태가 아니라면 currentU

Social(구글/깃헙) 로그인 구현 signInWithPopup() 팝업 기반 OAuth 인증 흐름을 사용하여 Firebase 클라이언트를 인증한다. 즉, 팝업창 열어 로그인 인증을 하는 메서드이다. 성공하면 공급자의 자격 증명과 함께 로그인한 사용자를 반환 로그인

📍/components/Navigation.js /components/Navigation.js 파일 생성 후 내용컴포넌트를 사용하여 링크를 건다. 코드 📍/routes/Profile.js 사용자가 "/profile"로 이동 시 로그아웃 버튼을 볼 수 있게 하자

1. 트윗 날리는 form 만들기 트윗을 작성하는 form을 만들어 보자. 트위터에서 트윗을 작성하는 form은 이렇게 생겼다. 로그인 후 홈화면에서 위와 같은 화면이 렌더되게 하기 위해 routes/Home.js에 코드를 작성하면 된다. ![](https://im

CRUD with firebase: ✅ Create(만들기)-Tweeting 1. Cloud Firestore의 DB의 제한 사항 >- SQL database 오래됌 많은 규칙과 관습 그렇다 보니 좀 더 자유로움 관계 맺고 있는 데이터가 자주 변

CRUD with firebase: ✅ Read(읽기)-Getting the Tweets 트윗을 작성하여 db에 create 하는 것을 완료했으니 이제 파이어스토어db에서 작성한 트윗을 가져와 read! 읽어보자! 1. 세팅 firebase/firestore로 부

먼저 파이어스토어에서 이전에 작성한 트윗 모두 지우고 시작하자! 트윗 작성자 정보 넣기 트윗을 누가 했는지 알기 위해 로그인한 사용자의 정보를 받아와야 한다. App.js에서 모든 auth를 처리하고 있기 때문에 다음과 같이 처리하자. App.js > Router.

그나저나 현재 트윗을 날리면 바로바로 화면에 보여지지 않고 새로고침해야 데이터베이스에서 받아와서 트윗을 렌딩한다. 새로 생성되는 트윗이 실시간으로 보여지게 만들어 보자. 그러기 위해서는 코드를 좀 많이 수정해야 한다.(눈물🥲) >onSnapshot

누군가 수정하거나 지운 댓글이 실시간으로 나타나는건 보고 싶지 않다. 모든 페이지나 요소가 실시간일 필요는 없다. 트윗을 수정하고 지우는 기능을 넣어 보자. ✅ 먼저 Tweet 컴포넌트 만들기 📍 /components/Tweet.js 앞으로 트윗에 들어가는 내용

Recap Auth 이후로 진행한 사항 복습! 현재 Home에서 사용하고 있는 userObj는 어디에서 온 걸까? userObj는 Home의 props에서 온다. Home의 props는 Router으로부터 받는다. Router는 어플리케이션(App.js)으로부터 p

트윗에는 text만 있는게 아니라 이미지/동영상 등도 있다. 이를 구현하기 위해서는 Firebase의 Storage를 사용하면 된다. bucket은 내 파일을 넣는 곳이다. 트윗할 때 이미지 첨부 기능 넣기 트윗할 때 사진을 첨부할 수 있도록 type이 file이

이제 Firebase Storage의 bucket에 파일을 업로드해보자. 이를 위해 다음과 같은 단계가 필요하다. Firebase Storage 셋업 파일 위치에 대한 reference 만들기 ref() 파일 데이터를 그 reference로 업로드하기 Upload

앗..버킷주소/파일path 복사해서 브라우저 주소창에 붙여 넣기 했는데 이미지가 안뜨쟈나...? 스토리지가 보안 강화됐거나 아니면 Rules 때문일지도.. url을 다운로드 하려면 public url을 다운로드받아야 한다. Storage에서 파일 다운로드 받기 C

현재 사진을 첨부하여 트윗을 올리고 나서 삭제버튼으로 그 트윗을 삭제하면 db인 파이어스토어에서는 삭제가 되지만 이미지 파일이 올라가는 스토리지에서는 삭제가 안된다. 왜냐하면 아직 그 코드를 입력하지 않았기 때문이다. 스토리지에서 이미지 파일 삭제하기 delete()

이제 프로필 화면을 뜯어 고쳐보자! 프로필 화면을 구성할 내용은 다음과 같다. 로그아웃 ✅ 프로필 화면에 내가 쓴 트윗 가져오기 프로필 업데이트 로그아웃 기능은 이미 해 뒀고, 로그인한 사용자의 트윗을 볼 수 있도록 해보자! ✅ 프로필 화면에 내 트윗 가져오기

헤더 네비게이션의 프로필에 유저 이름 추가하기 유저 프로필 업데이트하고 다른 컴포넌트 갱신하고 싶을 수도 있으니 그때 편하라고 네비게이션에도 userObj를 보내서 유저 정보를 화면에 표시해 보자! 1. Navigation 컴포넌트에 prop으로 userObj 보내

잘 작동하는지 확인하는 와중에 경고문이 떴다. 문제 발생! 이메일/패스워드를 사용하여 가입 버튼을 누르니 경고문이 떴다. > **⚠️ Warning: Can't perform a React state update on an unmounted component. T

문제 발생! 다른 소셜로그인 유저가 로그인 하면 아무 문제가 없었는데 이메일/패스워드로 가입한 유저가 로그인 했을 때는 문제가 발생한다. 기존 소셜로그인은 유저의 프로필 정보를 이미 가지고 있기 때문에 displayName을 가지고 있지만, 이메일/패스워드로 가입한

⚠️ 문제 발생! 프로필에서 유저명 업데이트 시 헤더에 적힌 유저명이 바로 업데이트가 되지 않는다. 프로필 유저명 업데이트는 updateProfile() 메서드를 통하여 userObj를 업데이트 하고 있다. 이는 firebase에 있는 유저 오브젝트를 업데이트 하는

클린 코드를 실천해 보자!

``의 모양은 각 브라우저 별로 정해져 있어서 바꿀 수가 없다. 이럴 때 label 태그를 사용하여 약간의 꼼수아닌 꼼수를 부려볼 수 있다. css에서 hidden 클래스를 만든다. input에 label과 연결할 id를 주고 class명에 hidden을 입력한다

아니 첫 번째 두 번째 둘 다 같은 건데 왜 첫 번째는 작동이 안되고 두 번째는 되는거지 ㅠㅠ?저거 때문에 삽질 한 30분은 했다왜냐고 왜

프로필 수정을 위해 모달을 만들어 보고 싶어서 구글링 하던 중 아주 상세하게 모달 만드는 방법을 알려주는 블로그를 발견했다! 압도적 감사 :)💜 >How to create a Modal Component in React from basic to advanced?

트위터 헤더 네비의 유저 프로필 사진을 클릭하면 로그아웃하는 모달창이 뜬다. 브라우저의 넓이를 조절했을 때도 프로필 위를 졸졸졸 따라오는 말풍선 모달을 구현해 보았다. 여기서 핵심은 감싸고 있는 요소의 position! 현재 이 모달 구조는 .header 안에

기본적으로 z-index가 안먹는 경우 4가지 상황을 고려해 봐야 한다고 한다. 동일한 스택 컨텍스는 모양 순서대로 표시되며, 후자의 요소는 이전 요소 위에 표시된다. 즉 제일 뒤에 선언된 요소가 제일 상단에 쌓인다. position이 세팅되지 않으면 z-index

거의 오늘 하루 종일 날렸다고 해도 과언이 아닌데 아래 코드가 이 지옥에서 날 구출해 냈다 ...따흐흑 오늘 내내 한숨 푹푹 쉬며 구글링했는데 생각보다 답은 가까운 곳에 있었다. 그리고 오늘을 통해 깨달은 바, '언젠가 끝은 온다.' 각설하고, 리액트에서 textar

현재 profile.js 에서 tweet.creatorId === userObj.uid 인 트윗 컴포넌트의 리스트를 모두 가져오고 있다. 그리고 유저명을 userObj.displayName을 업데이트 하여 바꿀 수 있다. 그런데 tweetObj에 저장된 creator

일전에 브라우저 크기를 줄여도 헤더를 따라다니는 모달을 구현했었는데, 잘 되다가 어느새 보니 위치가 안 맞는게 아닌가... 아무리 position을 변경해 가며 삽질을 해도 안되길래 모달 클로징 방식을 바꿨다. 기존 방식 기존에는 LogOutModal 컴포넌트에서

소셜미디어로 로그인하는 유저의 경우 새로운 user 컬렉션에 해당 유저 정보를 새롭게 추가해 주었다. 이렇게 코드를 작성해 두니 소셜 로그인을 할 때 마다 user 컬렉션의 정보가 새롭게 업데이트 되어 버리는 현상이 있었다. 어떻게 수정하면 좋을까? user col

현재 네비게이션과 홈에서 `` 컴포넌트를 사용하여 새로운 트윗을 작성할 수 있다. useRef() 훅을 사용하여 DOM을 선택할 수 있게 해두었다. input 엘리먼트에 ref prop으로 fileInput 변수를 줘서 input 엘리먼트에 접근하여 DOM API를

package.json 파일을 열어 홈페이지 url을 작성한다."homepage": "https://깃헙아이디.github.io/저장소이름"현재 사용하고 있는 깃 저장소의 이름은 git remote -v라고 입력하면 확인할 수 있다.이렇게 하는 이유는 CRA가

BrowserRouter 사용시 문제점 BrowserRouter를 사용하는 경우, gh-pages로 리액트 사이트를 배포하면 url에 문제가 생긴다.

⚠️ Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'. 로그인하려고 봤더니 콘솔에 이런게 떠 있다. 문제의 원인은 리액트 라우터의 경로

배포는 잘 됐는데 소셜 로그인하려고 하니 이런 오류가 뜬다. > ⚠️ Info: The current domain is not authorized for OAuth operations. This will prevent signInWithPopup, signInWit

Security Rules 수정 파이어베이스 콘솔 > 파이어스토어 데이터베이스 탭 > 규칙 > 규칙 수정 firestore 안에 있는 databases의 모든 document에서 로그인을 했다면(request.auth != null) 읽고 쓸 수 있게 규칙을 수정하자