2021. 9. 9. 21:33ㆍDiary/201~300
1. fbase.js 수정
2. App.js 수정
3. 파이어베이스 로그인 방법 설정
4. Auth.js 수정
- 회원가입 성공 여부 확인
5. 파이어베이스 로그인 유지 (setPersistence) 및 크롬 로그인 여부 확인
local : 웹 브라우저를 종료해도 로그인 유지
session : 웹 브라우저의 탭을 종료하면 로그아웃
none : 새로고침하면 로그아웃
6. 리액터에서 DB 데이터 활용 시, 주의해야 할 점
리액트의 비동기는 값을 가져오는 시간을 기다려 주지 않는다.
위의 코드를 보면, 딜레이가 없을 경우에는 null값을 가져오고, 딜레이를 2초로 걸었을 때는 값이 잘 넘어온다. 이를 주의해서 알고리즘을 짜야할 것 같다.
7. useEffect ( 특정한 시점에 실행되는 함수 )
파이어베이스 로그인 정보를 받게 되었을 때, 즉, 파이어베이스가 초기화 되는 시점을 잡아 놓고, 로그인 완료 이후 보여줄 화면을 렌더링한다.
onAuthStateChange는 인증 관련 상태가 바뀌는 것을 감지하는 함수이다.
첫 번째 인자는 인증 관련 상태가 바뀌는 것을 감지하는 것이고, 두 번째 인자의 빈 리스트 []는 무엇인가? 이는 컴포넌트가 최초로 렌더링이 완료되었을 때, 1회만 동작하게끔 하는 방식이다.
8. 소셜 로그인 기능을 위한 소스코드 수정
- Auth.js
- fbase.js
- 소셜 회원가입 여부 확인
9. 로그아웃, 메뉴 기능 구현
- Navigation.js
- Router.js
- Profile.js
10. 트윗 기능 구현 전 사전작업
- 파이어베이스 테스트 데이터베이스 생성
- fbase.js
- Home.js
- 파이어베이스 데이터 저장 확인
11. 파이어스토어에서 문서 가져오기
- App.js
- Router.js
- Home.js
- 데이터 저장 확인
12. 실시간 데이터베이스로 트윗 목록 보여주기
- Home.js
13. 트윗 삭제 기능
- Home.js
- Tweet.js
14. 트윗 수정 기능
- Tweet.js
'Diary > 201~300' 카테고리의 다른 글
256일차 리액트(React) - 트위터 웹사이트 완성 (0) | 2021.09.11 |
---|---|
255일차 리액트(React) - 트위터 웹사이트 (3) (0) | 2021.09.10 |
253일차 리액트(React) - 트위터 웹사이트 (1) : 환경 설정 (0) | 2021.09.08 |
252일차 - 현재까지 리액트(React) 느낀 점 정리 (0) | 2021.09.07 |
252일차 - 리액트(React) : 영화 평가 웹사이트 완성 (0) | 2021.09.07 |