TodoList 만들기(5)

이번에는 디자인....을 조금 수정해봤다.

디자인이 항상 힘든거 같은데 이번에는 어울리는 색을 찾아서 색깔 위주로 바꿔보았다.

 

https://colorhunt.co/

Color Palettes for Designers and Artists - Color Hunt

위 사이트를 참고해서 색깔을 넣어봤는데, 뭔가 좀 이상한거 같기도 하고 괜찮은거 같기도 하고 그렇다.

캐릭터는 라이언을 넣고싶었는데 저작권 문제가 있을까봐 저작권 문제없는 적당한 캐릭터를 찾아서 넣었다.

컨텐츠를 넣을게 별로 없어서 화면 채우기가 쉽지 않다... ㅠㅠ

다시한번 느꼈지만 css 작업은 오래걸린다..

 

History 컴포넌트에 있는 달력에 이전에 작성한 todolist와 메모를 나타내고 싶어서 데이터를 저장할 방법을 고민해봤다. 처음에는 서버를 만들어야 되겠다고 생각을 했었는데, 찾아보니 알맞은 서비스를 찾았다.

 

FireStore

https://firebase.google.com/products/firestore?hl=ko 

Cloud Firestore | 글로벌 규모의 앱 데이터 저장 및 동기화  |  Firebase

 

Firebase의 FireStore라는 빌드를 사용하면 서버없이 데이터베이스만으로 내가원하는 데이터를 관리할 수 있다고 한다.

잘은 모르겠지만 일단 사용해보기로 했다. 데이터를 넣고 빼는 기능을 시험해보려고 새로운 프로젝트를 만들어서 간단하게 실험해보았다.( 지금 하는 프로젝트에 바로 적용해보기는 무서웠다..)

 

공식문서를 토대로 내 FireStore 프로젝트에 있는 database를 react 프로젝트로 불러와서 데이터를 추가하고 삭제하는 것을 해봤다. 먼저 간단하게 데이터를 추가하는 코드를 작성했다.

공식 문서를 따라 db를 내 프로젝트에 불러와서

내가 이름과 메모를 적으면 그것을 객체로 만들어서 addDoc이라는 함수를 사용하여 firestore의 데이터베이스에 추가한다. 

그러면 랜덤한 id로 데이터베이스에 데이터가 추가된다.

 

그리고 데이터베이스에 있는 데이터를 가져오는 getDocs 함수도 사용해봤다. 버튼을 누르면 데이터베이스의 데이터를 가져와서 화면에 렌더링하게 코드를 작성했다.

 

음... 약간 로컬 스토리지 사용하듯이 사용할 수 있어서 되게 편했다.

이걸 이제 내 프로젝트에 적용시켜보면 될 것 같다.

 

Firebase 로그인 구현

그런데 firebase 둘러보다 보니까 '로그인 기능도 간단하게 구현할 수 있습니다!' 라고 되어 있어서 이거도 해보기로 했다.

일단은 이메일과 비밀번호로 회원가입을 하고 로그인 하는 기능까지만 실습해봤다.

 

아이디와 비밀번호를 작성하고 제출하면 createUserWithEmailAndPassword 라는 함수에 의해 인증 데이터베이스에 관련 정보가 추가된다. 

오... 뭔가 생각보다 더 간단한 것 같다.

 

사용자 로그인은 signWithEmailAndPassword라는 함수를 사용하면 된다.

그리고 유저관련 정보를 console에다 찍어보니 다음과 같았다.

음.... 여기서 내가 쓸만한 것을 생각해봤는데 먼저 uid 를 사용해서 해당 유저가 작성한 데이터를 uid 문서에 저장하고, 해당 유저가 로그인하면 history 탭에 그 유저가 작성한 todolist 만 뜰 수 있도록 할 수 있을 거같다.

 

그리고 accessToken을 사용하면 로그인 유지 기능 같은것도 만들 수 있을 거 같다.