본문 바로가기
CodeLab/Firebase

Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 유저리스팅 화면

by 블리드카가 2017. 12. 3.
728x90





이제 저장된 유저 데이터를 읽어와 아래와 같은 사용자 목록화면을 완성해 보겠습니다.



이제 아래의 코드를 추가합니다.




위 코드는 로그인 인증이 완료되고 수행되는 setLogin메소드 안에서 Realtime Databse 에서 Users Reference를 불러오는 loadUserList 메소드가 수행됩니다. 

loadUserList 메소드를 살펴보면 Users 위치를 once메소드를 통해 한번 만 불러오도록 되어 있고, userName 순으로 정렬하여 데이터를 가지고 옵니다. off 메소드는 여러 메소드가 수행하는 과정에서 미리 할당된 이벤트가 있으면 이벤트를 제거한 후 다시 이벤트를 붙여서 중복으로 이벤트가 할당되는 것을 막기 위함입니다.

getUserList 메소드는 데이터를 받고 최종적으로 화면을 그리는 코드가 수행됩니다. getUserList 메소드안에 코드 수행 중에 _.template 구문이 있는데 이는 underscore.js 라이브러리의 template메소드 입니다. once메소드를 통해 받은 데이터를 String 문자열로 붙이는 대신에 템플릿을 통한 코드 생성을 하였습니다. 

index.html파일 하단에 보면 script태그로 이루어진 아래의 코드가 있습니다.




once메소드를 통해 받은 데이터를 underscore.js template 메소드를 통해서 위 템플릿 모양으로 데이터가 할당되게 됩니다. 이렇게 만들어진 데이터를 최종적으로 ulUserList 아이디를 가진 ul 태그 안에 데이터가 들어가게 됩니다.

다음은 채팅화면을 작성해보겠습니다.


챕터 완성 소스 :



  1. 예제 소개
  2. Firebase 설정하기
  3. Hosting을 활용한 프로젝트 준비 작업
  4. Authentication을 이용한 유저 가입 및 로그인 구현하기
  5. Realtime Database를 이용한 채팅기능 구현 - Reatime Database 특징 및 데이터 구조
  6. Realtime Database를 이용한 채팅기능 구현 - 유저데이터 저장하기
  7. Realtime Database를 이용한 채팅기능 구현 - 유저리스팅 화면
  8. Realtime Database를 이용한 채팅기능 구현 - 채팅화면 및 채팅메세지 리스팅
  9. Realtime Database를 이용한 채팅기능 구현 - 채팅메세지 전송기능
  10. Realtime Database를 이용한 채팅기능 구현 - 채팅방 리스팅화면
  11. Realtime Database를 이용한 채팅기능 구현 - 채팅방 초대 기능
  12. Realtime Database를 이용한 채팅기능 구현 - 접속 중인 유저 표시하기
  13. Storage를 이용한 파일 전송기능
  14. Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - FCM Token 정보 저장
  15. Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - Functions를 통한 FCM 발송
  16. Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - Service worker를 이용한 FCM수신
  17. Realtime Database 권한 설정

 








728x90