Firebase를 사용하게 된 계기
이전에 팀 프로젝트로 진행했던 오목 게임을 머릿속으로 구상하면서 이번에는 소셜 로그인을 꼭 구현해 봐야겠다고 생각했다. 한 번도 구현해 본 적이 없기도 했고, 대부분 서비스가 소셜 로그인이 구현되어 있으므로 간단하게라도 경험해 보고 싶었다!
아무튼 그렇게 방법을 찾아 구글링하던 중 Firebase를 알게 되었고,(사실 알고는 있었지만 찾아본 적은 없음) 간단한 구현할 수 있는 로그인 기능과 서버를 직접 구현하지 않아도 되는 서버리스 환경이라는 말에 Firebase를 선택하게 되었다.
추가로 이전에 토이 프로젝트로 만들었던 My-Todo 서비스에 로그인 기능과 Firebase Store를 적용하면 좋을 것 같았다. (서버랑 데이터베이스는 따로 배포하지 않아서 로그인과 저장하기가 안 됐음)
제 1장 로그인
로그인 기능은 구글링과 공식 문서를 찾아보며 쉽게 구현할 수 있었다. 구현은 금방 했지만, 구글 로그인을 구현하던 중 COOP 에러를 만나게 되었는데 이것 때문에 시간을 꽤 오래 썼다. 로그인은 되는데 콘솔 창에 자꾸 빨간색으로 에러가 나오니까 마음이 굉장히 찝찝해서 이틀 정도 찾아봤는데 결국 해결 못해서 문의함 받은 답변은 이전에 작성한 글이 있어서 링크를 걸어 놓겠습니당.
기가 막힌 디자인,, 괜찮아,, 테스트 용이니까,,
어쨌든 성공
COOP에러 포스트: https://velog.io/@b_d_o_o/파이어베이스-구글-로그인-COOP
공식 문서: https://firebase.google.com/docs/auth?hl=ko
2장 Firebase 스토어
로그인 기능을 구현할 때와 마찬가지로 구글링과 공식 문서를 보면서 구현했는데 그동안 oracle과 MySql만 사용해 봤지 NoSql이라는 문서 중심의 데이터베이스는 사용해 본 적이 없어서 처음에는 약간 어지러웠다,, collection?? docs?? 머릿속은 물음표로 한가득;; 노가다로 하나씩 추가하면서 콘솔에 찍어보다 보니 조금씩 이해할 수 있었고, 기존에 My_Todo 서비스에 적용하기 위해 기존에 사용했던 데이터 구조와 비슷하게 컬렉션 구조를 설계해 봤다.
├── users - collection (유저 목록)
│ ├── uid - doc (회원가입한 유저의 uid)
│ ├── all_todo_list - collection (날짜별 할일 목록)
│ ├── date - doc (저장된 날짜)
│ ├── todo_list <Array> - field (해당 날짜의 할일 목록)
│ ├── todo_title <map-string> - field (제목)
│ ├── todo_id <map-number> - field (번호)
│ └── todo_checked <map-boolean> - field (체크)
처음 작성해 보는 거라 잘 작성한 건지는 모르겠지만 내가 원하는 대로 데이터를 불러오고 추가, 수정할 수 있도록 나름대로 고심해서 작성했음
잘 들어갔으니까 됐어,,,
3장 적용 및 후기
기존의 토이 프로젝트에 맞춰서 테스트해서 그런지 Firebase로 바꾸는 건 어렵지 않게 했다. 그것보다는 redux-persist 추가하고 github page로 배포했던걸 vercel로 변경하는 과정에서 약간의 이슈들이 있었지만 나름 성공적인 적용기 였다고 생각한다.
이후로는 카카오 로그인과 가능하다면 네이버 로그인도 추가해 볼 예정이다. 매번 새로운 걸 시도하더라도 프로젝트 처음부터 적용했지, 기존의 프로젝트에 적용한 건 처음인 것 같다. 하면서 가장 많이 들었던 생각은 클린코드의 중요성,,,나야 처음부터 나 혼자 코드를 작성했으니까 나름대로 쉽게 바꿀 수 있었지, 남이 바꾸려고 했으면 그냥 처음부터 작성하는 게 더 빨랐을 것 같다는 생각도 든다. 앞으로는 코드 작성도 네이밍도 좀 더 신경 써야 해야겠다,,
바뀐 링크 : https://bdw-my-todo.vercel.app/
