[Firebase&Web연동 9] 로그인 한 사용자에게만 글 리스트 뿌려주기

[Firebase&Web연동 9] 로그인 한 사용자에게만 글 리스트 뿌려주기

● 들어가기 전

이전 포스팅에서 로그인한 사용자만 글을 쓸 수 있는 기능을 구현했다. 이번 포스팅에서는 메인화면에서 로그인 한 사람만 글 리스트를 볼 수 있는 기능을 구현해보겠다. firebase sessoin 체크 함수를 이용해서 메인화면에서 로그인이 되었는지 확인하고 로그인 상태면, firebase 데이터베이스의 'thanks(글이 담겨있는 위치)레퍼런스에서 글의 내용,글쓴시간, 유저key, 유저닉네임을 가져와서 뿌려주도록 하겠다.

● 실습순서

1.글목록을 동적으로 뿌려줄 <div> 태그 만들기

2. firebase레퍼런스.on() 함수를 이용해서 글조회하기

3.글목록을 동적으로 구성하는 동적템플릿 만들어 붙이기

1.글목록을 동적으로 뿌려줄 <div> 태그 만들기

index.html 페이지를 열고 쓰기 버튼이 종료되는 부분 <div class="text-center"><button></button></div> 이 부분 아래에

<!-- 감사리스트 출력하기-->

<div class="container">

<hr>

<h3>감사리스트</h3>

<br>

<!-- 감사 리스트 붙일 곳 -->

<div class="thanksList"></div>

</div>

글목록을 가져와서 append()로 붙여줄 위치를 만들어준다. 소스코드파일에보면 이미 만들어 놓은 것을 볼 수 있다. 일단 이 녀석이 어떤역할을 하는 녀석인지만 확인하고 넘어가자.

2.firebase레퍼런스.on() 함수를 이용해서 글조회하기

function userSessionCheck(){} 함수 아래에 아래 thanksList 함수 작성. 이번에 session 체크는 loginUserkey로 했다. 처음에 페이지를 로딩할때 스크립트에서 userSessionCheck함수가 실행되는데 이때 로그인한 유저의 key값을 전역변수에 할당한다. 그리고 firebaseDatabase.ref('경로')를 이용해서 글을 가져오는데 이때 .on 함수를 호출한다. on 함수 왼쪽에는 'child_added'라는 문자열 값이 들어간다(문서참조). 오른쪽 인자 on_thanks_list 는 호출할 함수 이름이다.

//감사글 목록가져와서 뿌려주기

function thanksList() {

//로그인한 유저라면

if(loginUserKey){

//글이 저장된 레퍼런스 값 가져오기

var thanksRef = firebaseDatabase.ref('thanks');

//on 함수로 글 목록가져오기

thanksRef.on('child_added', on_thanks_list)

}else{

return;

}

}

loginUserkey가 있으면, 즉 로그인 한 상태면 on_thanks_list 함수를 호출한다. 호출에 성공하면 인자 값으로 data가 넘어오는데 data에 글들의 정보들이 다 들어 있다. key값을 이용해서 값을 가져오면 되겠다. 그리고 값을 넣어서 태그로 만들어줄 동적 태그들을 만들어서 그 사이사이에 값을 넣어준다. 그리고 자바스크립트 함수 append()를 이용해서 이 포스팅 제일 처음에 만들어준 글목록이 들어갈 위치 태그에 붙여준다.  중요한건 동적 태그에 userkey를 넣었다는 것이다. 나중에 각각의 글을 클릭하면 글쓴 user의 페이지로 갈 수있도록 하기위함이다. 

//땡스리스트 thanks 테이블의 thanks 키 들을 연속적으로 가져온다.

function on_thanks_list(data) {

console.log("on_thanks_list() 함수안으로 들어왔습니다 리스트를 가져오겠습니다")

var key = data.key;

var Data = data.val();

var comment = Data.comment;

var createtime = Data.createtime;

var name = Data.name;

var userkey = Data.userkey;

//무슨값이 넘어오는지 찍어보세요

//alert(comment +"/"+ createtime + "/"+name +"/"+userkey);

//감사리스트 동적으로 붙이기

var html =

"<div class=\"media\" id='" + userkey + "' onclick=\"show_user_page(this.id)\">" +

"<div class=\"media-body\">" +

"<h4 class=\"media-heading\">" + name +

" <span STYLE=\"color: green; font-size: 5pt\">" + createtime + "</span></h4>" +

"<p>" + comment + "</p></div></div>" +

"<hr>";

$(".thanksList").append(html);

}

3.thanksList()함수 호출 위치

글 목록은 sessoinCheck가 끝나야지 볼 수 있으니깐 userSessionCheck() 아래 부분에서 thanksList()를 호출하면 되겠구나 생각한다면 큰일난다. 나도 해봤더니 firebase는 비동기 함수인것 같다. 즉 로직을 순차적으로 읽는게 아니라 1번로직을 읽는 중에 2번로직이 실행되고 2번로직이 실행되는 중에 3번 로직이 실행이 된다. 그래서 userSessoinCheck()가 다 안끝났음에도 thanksList() 를 호출해버린다.당연히 loginUserKey가 할당안된 상태다. userSessoinCheck()가 다 안끝났기 때문에. 그래서 thanksList()호출은 userSessoinCheck()함수가 끝나는 부분에 넣어준다. return true 바로 위에! 자세한건 전체 소스코드를 참조하면 좋겠다.

//감사리스트 호출

thanksList();

return true

4.실행

터미널을 열고 firebase 서버를 실행해보자. 그리고 로그인을 해보면 이전 포스팅에서 삽입해준 글 내용과 시간, user 닉네임이 뜨는 것을 볼 수 있을 것이다. 다른아이디로 가입해서 다양한 글을 쓰면서 확인 해보자. 먼저 firebase 데이터베이스 thanks 레퍼런스에 어떤 값이 들어가있나 확인해보자. 그리고 웹페이지에서 그 값을 잘 가져오는지 확인해보자.

▲firebase 데이터베이스에 들어있는 값.

▲웹페이지에서도 잘 나오는 것을 볼 수있다. 여러글을 한번 입력해보자.

5.마무리

오늘은 firebase 모듈을 이용해서 글을 조회하는 기능을 구현해 보았다. 덧붙이자면 레퍼런스.on('child_added','함수이름') 함수는 그 레퍼런스에 있는 값의 개수 만큼 작동이 된다. 즉, thanks레퍼런스에 10개의 글이 있으면 10번 돌면서 글을 뿌려주는 것이다. 'child_added'말고 상태에 따라 다양한 값이 있으니 firebase 레퍼런스에서 이 부분을 참조하면 좋겠다. 다음 포스팅 부터는 마이페이지를 만들고 거기서 한줄 상태작성, 사진업로드, 글 수정삭제 등을 구현해보겠다. 

5.소스코드

thanksMemo.zip

보다 자세한 설명은 유튜브에 영상으로 정리해 놓았으니 공부하시다가 참고하셔도 좋을것 같습니다