Do it! 클론 코딩 트위터 (3)

4장 회원가입, 로그인, 소셜 로그인 기능 만들기 

- 누이와 파이어베이스 로그인 시스템을 연동 

 

4-1 파이어베이스 로그인 준비하기

 

footer 엘리먼트 : 보통 사이트 아래에 있는 요소 

App 컴포넌트에서 isLoggedIn를 AppRouter에 넘기고, AppRouter는 이를 받아 사용하도록함. 

 

<jsconfig.json 파일과 함께 절대 경로 적용하기> = 깔끔한 경로를 사용하기 위한 방법 

//jsconfig.json

현재는 ../routes/Home 과 같이 상대 경로를 사용중임 -> 가독성이 좋지않다. 

jsconfig.json 파일 = 리액트에 사용할 자바스크립트를 위한 설정 파일 -> 절대 경로를 설정한다. 

 

 

.../components/Router ------> components/Router 등과 같이 절대경로로 모두 수정해준다. 

 

‼️절대 경로의 한계 

파일 이름과 npm install로 설치한 패키지 이름이 같으면 오류 발생 

=> firebase.js 를 fbase.js로 수정

 

//fbase.js 

 

initializeApp(firebaseConfig)는 파이어베이스 초기화를 위함. 

getAuth()는 로그인을 위함. 

 

< 로그인폼 만들기 >

구글, 깃허브 소셜 로그인 담당 

< 로그인 폼에서 데이터 받기 >

event.target 에서 가져올 수 있는 값에는 여러가지가 있음. 여기서 필요한 값은 name 과 value. 

if 문을 이용하여 name을 구별해서 각각에 대한 입력값을 setEmail 함수와 setPassword 함수로 상태를 업데이트. 

 

< 파이어베이스로 로그인과 회원가입 처리하기 >

파이어베이스에서 제공하는 인증 기능 중 EmailAuthProvider에 속한 

createUserWithEmailAndPassword 함수와 signInWithEmailAndPassword 함수 사용

0. createUserWithEmailAndPassword 함수 :  인자로 전달받은 이메일, 비밀번호를 파이어베이스의 데이터베이스에 저장 

1. signInWithEmailAndPassword함수: 인자로 전달받은 이메일, 비밀번호를 파이어베이스 데이터베이스에 전달하여 확인 후 로그인 허용

 

authService의 함수들은 서버로 값을 요청해서 결괏값을 수신 받기까지 시간이 걸림

-> 기다렸다가 실행하라는 뜻의 async, await 문을 사용 

 

try-cath 문 : 로그인 또는 회원가입의 성공 또는 실패를 처리함. 

 

 

 

파이어베이스르  이용하여 회원가입을 3번 시도해서 3개의 데이터가 추가된 경우 

 

<로그인 상태 지속 3가지> = setPersistence (local, session, none)

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

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

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

 

<사용자 정보가 저장되어 있는 곳>

local 옵션으로 저장한 사용자 로그인 정보 -> 브라우저 내에 있는 "IndexedDB" 라는 데이터베이스에 사용자 정보를 저장함. 

파이어베이스로 회원가입을 성공했고 회원가입에 성공한 순간 브라우저의 내장 데이터베이스인 IndexedDB에 사용자 정보를 저장함. 

이를 이용하면 로그인 유지 가능 

IndexedDB는 웹 브라우저에 내장된 데이터베이스임. 

-> JSON 구조로 데이터를 저장하여 자바스크립트로 다루기도 좋음. 

 

<로그인 처리 후 currentUser가 null인 이유>

누이터에 로그인 처리가 반영되었다면 currentUser값이 null이 아닌 다른 값이어야함. but, 지금은 null 임. 

파이어베이스에서 로그인 처리를 마치고 누이터에서 그 신호를 받기까지 시간 간격이 생김. 

즉, 파이어베이스에서 회원가입, 로그인 처리르  마친 후 누이터에 데이터를 보내주면 

누이터는 그 데이터를 받아 이후 화면을 그려줘야함. 하지만 지금 코드는 데이터를 기다리고 있지 않음. 

 

setInterval 함수 : 지정한 2번째 인자로 지정한 시간 간격마다 1번째 인자로 전달한 코드를 실행함.  

 

<useEffect 함수 사용>

useEffect 함수는 특정한 시점에 실행되는 함수

특정 시점 : 파이어베이스 로그인 정보를 받게 되었을 떄( = 파이어베이스가 초기화되는 시점) 

 

onAuthStateChanged : 인증 관련 상태가 바뀌는 것을 감지하는 함수