254일차 리액트(React) - 트위터 웹사이트 (2) : 본격적인 시작

1. fbase.js 수정

 

2. App.js 수정

 

3. 파이어베이스 로그인 방법 설정

 

4. Auth.js 수정

 

- 회원가입 성공 여부 확인

 

5. 파이어베이스 로그인 유지 (setPersistence) 및 크롬 로그인 여부 확인

local : 웹 브라우저를 종료해도 로그인 유지

session : 웹 브라우저의 탭을 종료하면 로그아웃

none : 새로고침하면 로그아웃

 

6. 리액터에서 DB 데이터 활용 시, 주의해야 할 점

화면을 그린 직후

2초가 지난 후

 

리액트의 비동기는 값을 가져오는 시간을 기다려 주지 않는다.

위의 코드를 보면, 딜레이가 없을 경우에는 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