728x90
새로 가입한 유저 데이터를 저장할때는 몇 가지 고민해야 할 부분이 있습니다.
첫번째는 유저데이터를 저장하는 시점입니다. Realtime Database의 특성상 권한이 부여된 후 저장이 되는 것이 바람직합니다. 가입 메소드에서 수행하면 아직 미인증 상태이므로 기본을 설정된 데이터베이스 권한으로는 저장할 수 없습니다. 그러므로 저장 위치는 onAuthChange 메소드에서 저장해야할 것입니다.
두번째는 onAuthChange메소드 위치에 두면 로그인할때마다 프로세스를 수행하게 됩니다. 그리고 새로 가입한 유저데이터를 저장하는 프로세스를 로그인할 때마다 저장하는 것은 Realtime Database 특성상, 만약에 Users 위치를 클라이언트에서 변화 감지해서 데이터를 받아오는 코드가 작성되어 있다면 불필요한 데이터 로딩을 일으킬 수 있습니다. 그러므로 Realtime Database에 Users데이터가 저장되어 있는지 확인 후 저장을 수행하거나 로컬(localStorage, indexedDB 등등)에 해당 유저의 데이터를 데이터베이스에 기록했는지 여부를 저장하여 확인 후 저장을 수행할 수 있습니다. Users데이터가 저장되어 있는지 매번 확인하는 것은 불필요한 데이터베이스 접근이므로 두가지 방법을 함께 사용하여 코드를 작성하겠습니다.
다음 코드를 수정 및 추가하겠습니다.
이번에 추가한 코드는 브라우저에 저장할 수 있는 offline storage(LocalStorage, SessionStorage, IndexedDB, Cookie) 들 중에 IndexedDB를 활용하여 가입 메소드가 실행이 되면 IndexedDB에 저장하는 코드입니다.
IndexedDB는 HTML5에 추가된 storage 관련 API 중 하나 입니다. LocalStorage, SessionStorage 또한 HTML5에 추가된 storage 입니다. LocalStorage, SessionStorage 에 비하여 구조화된 데이터 저장에 적합합니다.
IndexedDB에 대하여 조금 더 자세한 내용을 확인하시려면 아래의 URL을 참조해주세요.
코드를 자세히 살펴보겠습니다.
init메소드에는 saveUserAtIndexedDB메소드에서 사용할 상수들이 정의되어 있습니다.
saveUserAtIndexedDB는 가입시 수행되는 createEmailUser메소드와 signInWithPopup메소드에서 실행 중에 받게되는 user object를 파라미터로 받게되고, userName파라미터는 이메일 가입시에는 유저 이름 파라미터를 user object안에서는 받을 수 없으므로 따로 받도록 파라미터를 추가하였습니다. 그리고 마지막 boolean 형태로 받게될 isSave파라미터는 후에 Realtime Database 에 유저 데이터를 저장 한 후에 값을 변경 저장하기 위한 구분 값입니다.
saveUserAtIndexedDB는 createEmailUser메소드와 signInWithPopup메소드 안에 추가되어 있습니다.
여기까지는 브라우저의 offline storage중 하나인 IndexedDB에 가입 시 데이터를 저장하는 코드였습니다. 이제는 onAuthChange메소드 안 setLogin메소드안에서 IndexedDB의 데이터의 데이터로 Users 데이터베이스에 저장하였는지 여부(isSave) 를 확인 한 후 저장하지 않았으면 Realtime Database에 유저데이터를 저장하고 다시 IndexedDB에 값을 저장하였다는 것을 표시하겠습니다. 아래의 코드를 추가해주십시오.
위 코드는 가입 후 onAuthChange메소드 수행 이후 동작입니다. IndexedDB의 데이터의 데이터로 Users 데이터베이스에 저장하였는지 여부(isSave) 를 확인하는 코드인 checkAndSaveUser메소드는 saveUserAtIndexedDB메소드와 비슷하게 진행이 됩니다. IndexedDB를 오픈하고, IndexedDB안에 User Object를 User의 uid 값을 기준으로 검색하여 isSave값이 false인 경우에만 saveUserAtRealDB 메소드를 실행하여 Realtime Database에 유저 데이터를 저장합니다.
본격적으로 Realtime Database의 메소드들을 사용하게 됩니다. saveUserAtRealDB를 살펴보면 Realtime Database 의 Reference객체의 메소드 once 는 데이터를 한번 수신하고, 더 이상 변경사항에 대해서는 데이터를 수신하지 않는 메소드 입니다.
성공적으로 수신이 되면 cbUserRefResult 콜백 함수가 수행이 됩니다.
cbUserRefResult 콜백함수에서는 dataSnapShot 객체를 얻을 수 있고 자식객체가 있는지를 체크한 후 없다면 set 메소드로 저장을 수행합니다.
정상적으로 동작이 되는지 점검을 해보겠습니다.
점검을 하실 때는 Firebase console화면에서 테스트에 사용할 아이디는 초기화 해주세요. 그리고 가입을 다시 수행하고 개발자 도구를 열어 크롬의 경우 Application 탭으로 들어가 봅니다. Firefox는 개발자 도구에 저장소 라는 탭이 있습니다. 좌측 IndexedDB 라는 항목을 보시면 아래와 같이 저장이 되어 있는 것을 확인할 수 있습니다. isSave 항목이 정상적으로 모두 true로 변경되어 있음을 확인 할수 있습니다. Realtime Database에도 저장이 되어 있는지 확인해보겠습니다.
Firebase console 화면에서 Database 항목으로 들어가 Realtime Database항목으로 들어가면 데이터를 확인할 수 있습니다. 아래의 화면을 확인해 주십시오.
유저 데이터가 정상적으로 저장이 되었음을 확인하였습니다.
4.Realtime Database를 이용한 채팅기능 구현 - 유저데이터 저장하기.zip728x90
'CodeLab > Firebase' 카테고리의 다른 글
| Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 채팅방 리스팅화면 (0) | 2017.12.03 |
|---|---|
| Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 채팅메세지 전송기능 (3) | 2017.12.03 |
| Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 채팅화면 및 채팅메세지 리스팅 (3) | 2017.12.03 |
| Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 유저리스팅 화면 (0) | 2017.12.03 |
| Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - Reatime Database 특징 및 데이터 구조 (1) | 2017.12.03 |
| Firebase Web 채팅앱 만들기 - Authentication을 이용한 유저 가입 및 로그인 구현하기 (5) | 2017.12.02 |
| Firebase Web 채팅앱 만들기 - Hosting을 활용한 프로젝트 준비 작업 (14) | 2017.12.02 |
| Firebase Web 채팅앱 만들기 - Firebase 설정하기 (1) | 2017.12.01 |
