TodoList 만들기(6)

 

이전에 연습했던 Firestore에 데이터 저장하고 꺼내오기 기능과 회원가입, 로그인 기능을 TodoList 에 구현해 보기로 했다.

 

데이터 저장

일단은 todolist를 작성하면 로컬 스토리지에 저장하는 기능까지 만들었었는데 이제 로컬 스토리지에 저장된 오늘자 todolist를 정산페이지에 렌더링이 되도록 코드를 작성해보았다.

오늘 날짜를 key로 로컬 스토리지에 저장해놓았기 때문에 꺼내오는 것 부터 시작했다.

로컬 스토리지에 오늘자 데이터가 있으면 꺼내오고, 아니면 빈배열을 할당해준다.

그리고 todayConfirmList를 map으로 렌더링 해주면 된다.

각각의 list들은 다음과 같은 형태를 가지고있는데, 

체크박스를 체크하면 done 프로퍼티가 true가 되도록 해주었다.

 

오늘 한 일을 체크하고 밑에 메모를 작성하고 완료 버튼을 누르면 FireStore에 저장이 되도록 해 줄 것이다.

버튼을 누르면 새로운 객체로 todolist와 메모를 만든다.( 메모는 엔터키를 기억하도록 정규식을 사용하였다.) list가 없으면 코드가 동작하지 않도록 조건문도 사용했다.

 

그리고 이전에 연습했던 데이터 저장 코드를 작성하여 Firestore에 저장이 되도록 해줬다. 만약 데이터 저장에 성공한다면 modal창이 뜨도록 상태를 변경해주고, 로컬 스토리지에 있던 오늘자 todolist를 제거하도록 해주었다.

 

로컬데이터는 삭제해도 현재 렌더링 된 데이터는 상태에 저장되어 남아있기 때문에 useNavigate hook을 사용하여 0.5초 후에 새로고침이 되도록 설정해주었다.

* 그런데 오류처리 같은것은 어떻게 해야 하는지 잘 모르겠다... 그냥 Modal창만 실패로 띄우게 해놓아야 할 것 같다.

 

잘되는지 확인 해보니

 

데이터는 잘 들어가는 것 같다.

* 그런데 지금보니 새로고침하니까 알맞지 않은 헤더 text가 뜨는걸 발견했다...

 

 

회원가입, 로그인 기능 추가

일단 로그인, 회원가입 기능을 만들기 위해서 메인 페이지를 수정했다.

회원가입 창은 회원가입 버튼을 클릭하면 Modal 창으로 뜨도록 해줬다.

ID는 이메일 형식이여야 하고, 비밀번호는 6자리이상, 비밀번호와 비밀번호 확인이 일치하면 아이디를 생성할 수 있도록 유효성 검사도 추가해주었다.

 

유효성 검사를 모두 거치면 handleCreateId 함수가 실행 되는데 handleCreateId 함수는 다음과 같다.

Firebase에서 지원하는 회원가입 함수로 간단하게 회원가입을 하고 회원정보를 Firebase 콘솔에서 확인할 수 있다.

회원가입에 성공하면 modal창이 뜨도록 상태변경함수를 작성해주었다.

 

이제 아이디, 비밀번호를 작성하고 Sign in을 누르면 로그인이 되도록 처리를 해줘야 하는데 여기서도 Firebase에서 지원해주는 함수를 사용하였다.

세션 스토리지에 로그인 정보를 저장하도록하고, 입력한 id 와 password가 유효한지 확인하고 로그인에 성공하면 전역 상태변수로 만들어둔 isSignIn이라는 상태를 true로 바꿔주도록 코드를 작성했다. 

로그인에 실패하면 로그인에 실패했다는 Modal 창이 뜨도록 코드를 작성했다.

 

isSignIn이라는 상태에 따라 메인페이지에 들어갈 때 로그인화면이 나오거나 마이 페이지가 나오도록 조건부 렌더링을 해 줄 것이다. 

로그인에 성공하면 isSignIn이 true가 되고 로그인 페이지가 마이페이지로 바뀌게 된다.

 

새로고침하면 상태가 초기화되기 때문에 다시 로그인 페이지로 돌아가게 되는데, 세션 스토리지에 로그인한 유저 정보가 있기 때문에 새로고침될 때 세션스토리지를 확인하여 유저정보가 있으면 가져와서 바로 마이페이지로 이동이 되도록 useEffect hook을 사용하여 코드를 작성해줬다.

새로고침될 때만 useEffect가 작동하도록 dependency array는 빈배열로 넣어줬다.

 

잘 작동하는 것 같다. 실제로 새로고침해도 마이페이지가 유지된다!

뭔가 갑자기 바뀌는 느낌이 있는데 로딩중 아이콘이라도 띄워야겠다.

 

 

아.... 뭔가 넣은 기능은 별로 없는거 같은데 되게 오래걸린다....

그리고 컴포넌트는 왜이렇게 많아진지 모르겠다. 벌써 35개를 돌파했다..... 정리를 어떻게하지?