TodoList 만들기(7)

사용자에 맞게 데이터 저장하기 구현

회원가입, 로그인까지는 구현을 완료했고, 다음으로는 사용자에 맞게 데이터를 저장할 수 있도록 데이터베이스에서의 Collection과 Docs의 이름을 지어주는 작업을 했다.

작성한TodoList를 사용자의 uid를 컬렉션이름으로하고, 오늘 날짜를 Docs의 이름으로 데이터를 저장하도록 했다.

로그인이 되어있는 상태에서 완료 버튼을 누르면 새로운 객체에 todolist와 memo를 저장해서 FireStore에 저장하도록 코드를 작성했다. 데이터베이스에 저장은 FireStore에서 지원하는 setDoc 함수를 사용했다.

 

데이터 저장이 성공하면 Modal창으로 데이터가 잘 들어갔다는 문구를 보여주고 로컬 스토리지에 저장되어 있던 오늘자 todolist를 지워준다. 그리고 1초 후에 새로고침을 해줘서 현재 페이지의 내용들이 초기화 될 수 있도록 해주었다.

데이터 베이스에도 잘 저장되는것 같다.

 

History 컴포넌트에서 데이터 꺼내오기

이렇게 현재 사용자가 날짜별로 저장한 데이터를 History 컴포넌트의 달력에서 꺼내올 수 있도록 해보았다.

먼저 달력 각각의 div박스를 클릭하면 해당 날짜를 받아서 state에 저장을 해준다.

클릭한 날짜를 key로 가지는 데이터가 있으면 curDayData라는 state에 저장해준다. 

그리고 curDayData가 변경되면 바로 해당 데이터를 담은 Modal창이 뜰 수 있도록 useEffect hook을 사용한다.

isModalOpen이 true가 되면 CalenderDataModal이라는 컴포넌트가 렌더링된다. 클릭할 적당한 아이콘도 달력안에 넣어보았다.

잘 되는 것 같다 😆

클릭시 해당 날짜를 받아오는게 힘들었는데 데이터 출력은 금방 한거 같아서 다행이다. 

 

마이 페이지 만들기

이제 처음 구상한것은 다 만든것 같다. 마지막으로 로그인시 렌더링할 마이페이지를 만들고 프로젝트를 끝내기로 했다.

사실 컨텐츠가 별로 없어서 마이페이지에 넣을게 별로 없었다..

그냥 TodoList 이니까 매일매일 접속할 것으로 생각하고 오늘 날씨를 오픈 api에서 받아서 렌더링하고, 지금까지 작성한 todolist가 몇개인지 알려주기로 했다. 덤으로 로그아웃 기능도 만들었다.

https://openweathermap.org/ 

Сurrent weather and forecast - OpenWeatherMap

위의 날씨 open API 를 사용하여 데이터를 받아왔는데, 여기서 현재 날씨, 현재 날씨 아이콘, 현재 온도를 받아와서 페이지에 렌더링하였다.

그리고 상태로 가지고 있는 유저 정보에서 username과 현재 데이터 개수를 받아서 나타냈다.

로그아웃 버튼은 onClick 이벤트로 Firebase에서 지원하는 로그아웃 함수를 사용하여 로그아웃하고, 전역상태로 관리하고 있는 로그인 상태를 false로 바꿔주었다.(changeTosignOut 리듀서 사용)

 

메인 페이지 동작

 

 

이후 할것들

일단 1차 완성은 한 것 같다. 다음주에 그룹 프로젝트를 시작하기 때문에 기능을 추가할 시간은 없을 것 같고 이제부터 마무리 작업을 하고 리펙터링을 해야 할 것 같다.

컴포넌트가 40개가 넘어가는데 쓸데없는 파일들이 많은 것 같다. 특히 Modal창이 10개가 넘는데 이걸 코드를 잘 작성하면 2~3개 정도로 압축할 수 있을 거 같다. 그리고 코드 군데군데있는 비효율적인 로직이나 사용하지 않는 변수나 상태들도 찾아봐야 할 것 같다. 

그리고 폴더 정리하고.... Read Me 작성하고 마무리 하면 될 것 같다. 

아! 배포도 해야한다.