리액트 심화 2일차
📌오늘한 것
오늘은 파이어베이스를 사용해서 로그인, 회원가입 페이지를 구현해 보았다. 토큰 값을 활용하여 로그인 여부를 확인하고, 그에 맞는 처리 작업을 진행하였는데 그 과정이 다소 복잡해 오늘은 반복 학습에 초점을 두고 공부를 했다.
토큰 값으로 로그인 여부 확인하기
로그인 기능에는 JWT와 OAuth 두가지 토큰 기반 인증 방법을 많이 사용하는데 그 중에서도 OAuth 를 이용해 구현했다.
토큰을 받아 오려면 웹 저장소에 대한 알아야한다. 웹 저장소에는 쿠키, 세션 스토리지, 로컬 스토리지 등이 있는데 토큰을 저장하는 곳은 프로젝트의 성향에 맞춰 그때 그때 달라지게 된다.
서버에 로그인 요청을 보낸 후 응답을 받아 토큰을 저장한 후에 로그인 여부를 확인 할 수 있어 그 여부를 is_login에 담아 여부에 따라 다른 헤더 컴포넌트를 보여 줄 수 있다.
import React from "react";
import {Grid, Text, Button} from "../elements";
const Header = (props) => {
const [is_login, setIsLogin] = React.useState(false);
if(is_login){
return (
<React.Fragment>
<Button text="로그아웃"></Button>
</React.Fragment>
);
}
return (
<React.Fragment>
<Button text="로그인"></Button>
</React.Fragment>
)
}
또한 로그인 상태를 상태를 리덕스 저장해두고 어떤 컴포넌트에서 편히 볼 수 있도록 할 수 있다.
로그인과 회원가입은 파이어베이스에서 제공하는 인증기능(링크)을 사용하였다. 사용방법은 다음와 같다.
1.yarn add firebase : firebase 패키지 설치
2.firebase.js에서 auth 설정
import firebase from "firebase/app";
import "firebase/auth";
const firebaseConfig = {
// 인증정보!
};
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
export { auth };Redux의 프로세스는 크게 3가지로 나눌 수 있다.
1.dispatch
dispatch는 상태 변화의 시작이다. 리덕스 스토어로 정보를 넣고자 할 때 동작시킨다.
2.reducer 실행
reducer는 새로운 상태 값을 생성할 때 사용하는 함수이고 (state,action)를 파라미터로 가지며 현상태(state)를 dispatch가 전달해주는 action.type에 맞는 값으로 새로운 상태 값을 생성해주게 된다.
3.스토어에 저장 & 가져오기
2번 과정을 통해 생성된 새로운 상태가 리덕스 스토어에 저장된 후 부터는 어떤 컴포넌트에서든지 이 리덕스 상태 값을 꺼내어 사용할 수 있게 된다.
스토어를 주입할 때에는 아래와 같이 사용한다.
<Provider store={store}>
</Provider>💨회원가입 페이지
[회원가입 구현 순서]
1. firebase.js에 만들어둔 auth 가져오기
2. 리덕스에서 signupFB 함수 만들기
3. auth.createUserWithEmailAndPassword()로 가입 시키기
4. Signup 컴포넌트에서 signupFB를 호출!
5. 가입한 후, display_name 바로 업데이트하기
6. 사용자 정보 업데이트 후에 메인 페이지로 이동하기
firebase는 이메일과 패스워드로 가입하므로, 추가적으로 닉네임을 회원가입 요소로 추가하고 싶은 경우 5번과정을 통해 auth.가입한 후 바로 업데이트해준다.
가입시키기,닉네임 업데이트 모두 비동기적으로 실행이 된다.
💨로그인 페이지
[로그인 구현 순서]
1. firebase.js에 만들어둔 auth 가져오기
2. 리덕스에서 loginFB 함수 만들기
3. auth.signInWithEmailAndPassword()로 로그인
4. Login 컴포넌트에서 loginFB를 호출!
5. 리덕스의 user 정보 업데이트 후에 메인 페이지로 이동하기
리덕스에서 로그인 여부 data를 보는게 아닌 파이어베이스 인증 정보를 확인하고 세션에 저장한다.
그리고 세션에 로그인 여부를 판별해 로그인한 경우 해당 user 정보를 가지고 온다.
로그아웃 기능도 마찬가지로 파이어베이스 인증 정보를 이용하여 로그아웃 & 리덕스에 남아 있는 값도 지우기 작업을 한다.
Immer
Immer를 사용하여 리듀서를 만들게 되면, 객체의 불변성을 쉽게 관리할 수 있게 된다.(객체는 const로 선언해도 내용이 수정될 수 있어 불변성 관리가 중요하다.)immer 사용 예시
📌Error Point 기록
import 할 때, {}를 넣고 빼고의 차이가 있다.
괄호 없는 import 는 'export default' 인 컴포넌트를 쓸 때 사용하고, 오직 한개만 가능하다.
괄호 있는 import는 member import라고 하며 export 될 때, export 를 사용하고, 여러개가 가능하다.
컴포넌트를 import 해주지 않아서 발생하는 에러 줄이자.
자동완성기로 코딩을하다 보면 철자가 다른 변수나 컴포넌트를 불러올 수 있어 주의하자.
📌회고
-아직 로그인, 회원가입 기능을 이해하지 못했다. 'firebase의 인증 토큰을 사용하여 로그인, 회원가입 만들기'와 'permit으로 세션을 체크해 다른 로그인 상태 유지하기'를 정확히 짚고 다음 단계로 넘어가자.
-오늘은 비오는 토요일이라 그런지 집중해서 공부하기가 어려웠다. 외부 영향을 안받으면 좋겠지만 요즘 같이 너무 더운날은 쉽게 집중력을 잃는다.
시원한거를 마시거나, 가벼운 운동을 하면서 공부에 집중할 수 있도록 노력 하자.
-공부 시간중에 허비하는 시간이 많다. 50분 공부 + 10분 휴식 새로운 규칙을 적용 시켜보자.
