[Firebase&Web연동 14] firebase key를 이용해서 내가 쓴 글만 가져오기

[Firebase&Web연동 14] firebase key를 이용해서 내가 쓴 글만 가져오기

● 들어가기 전

지난 포스팅에서는 firebase storage를 이용해서 파일을 저장하는 법에 대해서 알아보았다. 이번 포스팅에서는 snapshot.key를 이용해서 내가 쓴 글만 조회하는 법에대해서 살펴보도록하자.

● 실습순서

1.sessionCheck가 완료되면 내가 쓴 글 조회하는 함수 호출

2.loginUserKey를 이용해서 현재 로그인 한 사람의 글 데이터 값만 가져오기

3.javascript 동적 태그를 만들어줘서 데이터 삽입하고 붙여주기

1. 세션체크 완료 후 글조회 함수 호출

mypage.html에서 sessionCheck 함수 아래 1초뒤 myThanksList를 가져오는 함수를 호출 한다. 왜 1초뒤에 하냐면 firebase sessoin 체크함수는 비동기 함수이기 때문에 sessoin을 체크하는 동안 thanksList 함수를 호출 하기 때문에 아직 login 한 user key를 가져오지 않은 상태에서 thanksList에서 userkey 비교를 할 수 없기 때문이다. 그래서 1초정도 있다가 sessoinCheck가 다 완료되면 myThanksList를 호출 하도록 작성했다.

        $(document).ready(function () {
            //세션체크 함수먼저 호출!
            userSessionCheck();
            setTimeout(function() {
                //내가쓴 글만 가져오는 함수
                myThanksList();
            }, 1000);
 
 
        });

myThanksList() 함수는 아래와 같다. 우리가 불러올 글 목록은 thanks 레퍼런스에 위치해있기 때문에 레퍼런스를 가져와서 on 함수를 이용해서 글을 가져오는 함수를 호출 해준다. mypage.html 스크립트에서 적당한 곳에 넣어주자.

//감사리스트 가져오기

function myThanksList() {

console.log("땡스 리스트 함수안으로 들어왔습니다")

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

//조회

thanksRef.on('child_added', on_thanks_list)

}

2. loginUserKey를 이용해서 내가 쓴글만 가져오기

이 함수가 호출이 되면 함수인자(data)로 글의 객체들이 전달이 된다. 참고로 이 함수는 글의 갯수만큼 돈다. data.val().userkey와 현재 로그인한 유저의 key값인 loginUserKey값을 비교해서 같으면 데이터를 가져온다. 그리고 javascript 부분에 동적으로 태그를 만들어서 위에서 가져온 값을 넣어주고 append함수를 이용해서 서 동적으로 태그를 붙여준다. 이 태그에는 수정과 삭제 버튼도 붙어 있고 수정 버튼 부분에는 key+"mod_btn" 이라는 id 값을 주었다. 

        //땡스리스트 thanks 테이블의 thanks 키 들을 연속적으로 가져온다.
        function on_thanks_list(data) {
            console.log("on_thanks_list() 함수안으로 들어왔습니다 리스트를 가져오겠습니다")
            //글 게수만큼 반복된다.
            //alert(loginUserKey);
            //alert(data.val().userkey);
            //헌재 로그인한 유저의 key와 감사리스트 객체의 user key가 일치하는 것 만 가져오기
            if (loginUserKey == data.val().userkey) {
                var key = data.key;
                var Data = data.val();
                var thankComment = Data.comment;
                var createtime = Data.createtime;
                var name = Data.name;
                var userkey = Data.userkey;
 
               
 
                var mod_btn_key = key + "mod_btn"
 
                //감사리스트 동적으로 붙이기
                var html =
                    "<div class=\"media\">" +
                    "<div class=\"media-body\">" +
                    "<h4 class=\"media-heading\">" + name +
                    " <span STYLE=\"color: green; font-size: 5pt\">" + createtime + "</span></h4>" +
                    "<div id='" + key + "'><p>" + thankComment + "</p></div></div>" +
                    "<div align=\"right\" id='" + mod_btn_key + "'>" +
                    "<button type=\"button\" class=\"btn btn-warning modify\" id='" + mod_btn_key + "' onclick=\"btn_modify('" + key + "')\">수정</button>" +
                    " " +
                    "<button type=\"button\" class=\"btn btn-danger\" onclick=\"btn_delete('" + key + "')\">삭제</button>" +
                    "</div></div>" +
                    "<hr>";
 
 
                $(".thanksList").append(html);
            }
        }

3. 오류

실행해보면 마이페이지에서 내가쓴 글이 안뜨는것을 확인 할 수 있다. 이유는 가입할때 key값을 따로 저장해 놓지 않았기 때문이다. 다시 join.html 페이지로 가서 set함수 호출 전에 아래와 같이 수정해주자. 가입했을 때 받은 pk 값을 database에 key value 값으로 넣어주는 로직이다.

//가입 성공했을 때 호출 되는 함수 - 위의 firebase의 인증 모듈과 다른 database 모듈임을 확인하자.
function logUser(){
    var ref = firebaseDatabase.ref("users/"+userInfo.uid); //저장될 곳을 users라는 부모 키를 레퍼런스로 지정.
    
    //저장 형식
    //key 값도 같이 넣어준다.
    var obj = {
        name: name,
        userkey:userInfo.uid
    };
 
    ref.set(obj); // 고유한 자식 키가 하나 생셩이 되면서 json 삽입
    alert("가입성공");
 
    //메인 페이지로 이동시키고 세션 저장시키기
    window.location.href = "/index.html"
}

4. 재가입 및 실행

번거롭겠지만 다시 가입을 해서 글을 써보자. 아래는 새로운 user를 만들어서 담벼락에 글을 쓴다음에 마이페이지에서 확인한 결과다.

▲ 새로 가입을 해준다.

▲ userkey라는 key값이 생성되고 value 값으로 가입할때 자동생성되었던 userPK값이 저장되었다. 

mysql, oracle 같은 관계형 데이터 베이스에서는 상상도 할 수 없는 일이다.

▲ 담벼락에 글을 써본다.

▲ 마이페이지로 이동하면 내가 쓴 글만 조회되어서 뿌려지는 것을 볼 수 있다.

5. 마무리 

userkey 값을 이용해서 내가쓴 글만 가져오는 법을 살펴보았다. 이쯤 되면 firebase에서 대해서 많이 익숙해졌으리라 생각된다. 이번 작업을 통해 firebase에서 key값을 생성하고 다루는 것이 중요하다는 것을 인지했으면 이제 반은 성공인것이다. 다음 포스팅에서는 수정 버튼과 삭제 버튼에 이벤트를 걸어 보겠다.

6. 소스코드 

thanksMemo.zip

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