시작하며...이번 프로젝트에서 상태 관리 라이브러리인 Zustand 를 사용하여 로그인 여부를 확인하고, 로그아웃을 구현하게 되어 해당 글을 작성하게 되었다. Zustand 스토어 작성일단 다음과 같은 플로우를 생각해 보았다.로그인 → 토큰 쿠키에 저장 → 로그인 여부 O쿠키에 토큰 있음 → 로그인 여부 O쿠키에 토큰 없음 → 로그인 여부 X로그아웃 → 쿠키에 토큰 만료 useAuthStore.tsx일단 상태와 메서드 5개를 만들었다.user - 로그인하면서 저장할 유저 정보 상태saveUser - 유저 정보 저장하는 메서드isLogin - 로그인 여부 나타내는 boolean 상태checkLogin - 로그인 여부 확인하는 메서드logout - 로그아웃 처리하는 메서드 saveUser 로 유저 정보와 로..

지난 게시물에서 Firebase 를 사용하여 회원가입하는 것을 구현하였다. 그러면 로그인은 어떻게 하면 될까? Firebase 세팅 방법은 아래에 있는 게시물을 확인하면 된다. [React] 리액트 Firebase Authentication 회원가입 프론트엔드 구현으로만 회원가입, 로그인 기능을 구현하기 어렵다. 그러나 Firebase 의 Authentication 을 사용하여 손쉽게 회원 정보를 저장하고 관리할 수 있게 도와준다. 파이어베이스 세팅 파이어 jjang-j.tistory.com 로그인 하기 모듈 가져오기 Firebase의 Authentication 모듈에서 현재 Firebase 앱의 인증 객체를 가져오는 getAuth 이메일과 비밀번호로 로그인하는 signInWithEmailAndPassw..