본문 바로가기
매일 해내는 개발/Develog

[Develog] 리액트 심화프로젝트 / 파이어베이스 + 리덕스 툴킷으로 로그인 기능 구현

by 해야지 2022. 12. 25.
반응형

1. 현재상태

우리의 주제가 <칸반보드>이다 보니, 로그인 기능이 필요하다고 생각해서 파이어베이스를 사용하기로 했다.
파이어베이스는 서버리스 프로그램아닌가? 그런데 json server를 사용해야하나? 라는 고민에 부딪혔다.
파이어베이스에 db기능이 있는데 json 서버를 사용하는게 맞나?
하지만 배운걸 시도해본는데 의의를 두고 json-server와  redux toolkit, thunk, axios를 사용하여 구현해보기로 했다.

2. 구현사항
    1) 파이어베이스로 이메일/구글 회원가입, 로그인 기능 구현
    2) userSlice.js 파일을 만들어서 리덕스 툴킷 구현
        - __getUser : axios.get   dispatch시 데이터 받아오기
        - __addUser: axios.post  로그인 시 데이터 추가
        - __deleteUser: axios.delete  로그아웃 시 데이터 삭제
        - extraReducer로 pending, fulfilled, rejected 상태 관리
    3) configStore에 리듀서 추가
    4) db.json에 user 배열 만들어서 현재 로그인 한 사용자의 데이터 받아오기
    5) SideBar에서 로그인/로그아웃 화면 변환 구현
    6) db.json의 posts에 userId속성을 추가하여 PostsContainer에서 로그인 한 사용자의 posts 데이터만 보이도록 수정
    7) 로그아웃 상태에서는 글 추가버튼 눌렀을 때 dispatch 안되도록 조건 추가

반응형

댓글