Serverless - Firebase startAt 과 limit을 통해 pagination 구현

Serverless - Firebase (startAt 과 limit)을 통해 pagination 구현

| 시작하기에 앞서,

프론트쪽에 개발을 집중하기 위해, 백엔드 쪽은 firebase로 구축하고 firebase+ react 조합으로 웹앱을 제작하고 있다. 그때 게시판기능을 구현하는데, pagination 기능을 직접 구현해 보고 있는데, 쿼리에서 limit offset과 같은 기능을 하는 firebase 쿼리로 요청을 했어야했다.

| 구현

#firebase.js
export const getBoard = () => {
  return database.ref().child('boards')
}

위와 같이 board 관련 데이터를 받아오는 쪽을 구현했다.

  prevPage(){
    // 리팩토링 필요
    const {board}= this.props;
    const {contentLength} =this.state;
    getBoard().orderByChild('id').startAt((board.selectedId+1)).limitToFirst(contentLength).once('value')
      .then((res) =>{
        this.props.getBoardData(res.val());
      });
​
  }
​
  nextPage(){
    // 리팩토링 필요
    const {board}= this.props;
    const {contentLength} =this.state;
    const nextPage = (board.selectedId-contentLength);
    if(nextPage >0){
      getBoard().orderByChild('id').startAt((nextPage-contentLength)+1).endAt((nextPage)).limitToFirst(contentLength).once('value')
        .then((res) =>{
          this.props.getBoardData(res.val());
        });
    }else{
      window.alert('마지막페이지 입니다!')
    }
  }

위는 다음페이지, 이전페이지로 가는 함수이다.( 부끄러운 코드이다. refactoring이 시급하다. )

조금 시간을 잡아먹었던 부분은 startAt 을 쓰려면 orderBychild 와 같은 함수가 앞에 있어야 정상적으로 동작한다는 것이다. 이는 firebase database 쿼리관련해서 어떤 data가 return 되는지와 관련이 있는것 같은데, 지금은 구글링을 통해 정상적으로 돌아가게만 되게하고있다. firebase 쿼리관련 부분을 더 자세히 살펴봐야겠다.