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 태그 안에 데이터가 들어가게 됩니다.
다음은 채팅화면을 작성해보겠습니다.
챕터 완성 소스 :
5. Realtime Database를 이용한 채팅기능 구현 - 유저리스팅 화면.zip728x90
