[Next.js] firebase 게시물 조회수 기능 구현 (생성, 조회, 갱신)

(제목에는 Next.js 붙였지만 딱히 Next.js 에 관한 내용없음)

 

시작하며...

이번 프로젝트에서 베타 테스트를 진행하면서 사용자들의 의견을 받았다.

 

그중에서 게시판 페이지에 조회수 기능이 있었으면 좋겠다는 의견이 있었다. 그런데 백엔드 API 요청을 새로 못하는 상황이기 때문에, 고민을 하다가 Firebase 를 사용하기로 했다.

(그리고 나도 조회수 기능 구현하면 좋을 것 같다는 생각이 있었음)

 

의견

그리고 Firebase 를 선택한 이유는 작년 졸업작품에서 React Native + Firebase 로 어플리케이션을 만들면서 Firebase 의 다양한 기능을 사용해 봤고 익숙하기 때문에 러닝커브가 낮아 빠른 시간내에 구현할 수 있을 것 같기 때문이었다.

 

세팅하기

Firebase 에서 FireStore 를 생성했다.

 

FireStore

 

1. SDK 설정 및 구성

"프로젝트 설정 → 일반" 에 들어가면 SDK 를 설정할 수 있는 코드가 있는데 그걸 그대로 복사해 준다.

 

그리고 `firebase` 라는 디렉토리에 파일을 생성한 후 복사한 내용을 붙여 넣는다.

 

폴더구조

해당 프로젝트에서는 Firebase 의 Firestore 를 사용하기 때문에 해당 인스턴스를 생성하고 내보냈다.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "apiKey 는 비밀",
  authDomain: "authDomain 는 비밀",
  projectId: "projectId 는 비밀",
  storageBucket: "storageBucket 는 비밀",
  messagingSenderId: "messagingSenderId 는 비밀",
  appId: "appId 는 비밀",
};

const app = initializeApp(firebaseConfig);

// firestore 인스턴스 생성
const FIREBASE_DB = getFirestore(app);

// 내보내기
export default FIREBASE_DB;

이제 FireStore 를 사용하기 위해서는 FIREBASE_DB 를 import 하면 된다.

 

2. DB 구성

boards 라는 컬렉션을 만들고 게시물 id 를 문서로 추가하여 viewCount 에 조회수를 담았다.

 

 

 

2. 조회수 값 가져오기 (Read)

상세 게시물 페이지에 들어올 때마다 조회수가 증가할 수 있게 useEffect 를 사용하였다.

 

• doc(): Firestore 문서를 가리키는 참조 생성
• getDoc(): 참조하는 문서 가져오는 함수
• data(): 문서 데이터 가져오는 함수

 

  useEffect(() => {
    const getViewCount = async () => {
      const docRef = doc(FIREBASE_DB, "boards", boardId.toString());

      // 조회수 가져오기
      const boardDb = await getDoc(docRef);
      const boardData = boardDb.data();
    };

    getViewCount();
  }, [boardId]);

그러면 boardData 를 출력해보면, 위에 DB 에 저장한 데이터가 나오게 된다.

 

3. 조회수 값 업데이트 (Update)

조회수를 1 증가한 값을, useState 를 통해 화면에 보여주고 DB 에 있는 조회수 값을 업데이트하였다.

 

• updateDoc(): 문서를 업데이트하는 함수 

 

if (boardData) {
  // 조회수 업데이트
  const currentViewCount = boardData.viewCount + 1;
  setViewCount(currentViewCount);
  updateDoc(docRef, { viewCount: currentViewCount });
}

이제 해당 페이지에 접근할 때마다 조회수가 1씩 증가하게 된다.

 

4. 조회수 값 생성 (Create)

위에 DB 를 생성하지 않은 페이지일 경우 제대로 동작하지 않는다. 

그래서 DB 값이 없을 경우 새로 DB 에 데이터를 추가하고 화면에 조회수 1을 보여주었다.

 

• setDoc(): 새로운 문서를 생성하거나 기존 문서를 덮어쓰는 함수

 

} else {
  // 조회수 생성
  await setDoc(docRef, { viewCount: 1 });
  setViewCount(1);
}

그러면 게시물을 생성한 후 조회수가 DB 에 생성되고 화면에 조회수 1을 보여주게 된다.

 

결과

조회수 조회 및 증가

새로고침을 할 때마다 조회수가 증가한다.

(게시물 내용은 프리패치 + 캐싱되어 있음)

 

증가

 

조회수 생성

게시물을 새로 작성하면 조회수가 새로 생성된다.

 

생성

 

전체코드

조회수 기능의 전체 코드는 다음과 같다.

  useEffect(() => {
    const getViewCount = async () => {
      const docRef = doc(FIREBASE_DB, "boards", boardId.toString());

      // 조회수 가져오기
      const boardDb = await getDoc(docRef);
      const boardData = boardDb.data();

      if (boardData) {
        // 조회수 업데이트
        const currentViewCount = boardData.viewCount + 1;
        setViewCount(currentViewCount);
        updateDoc(docRef, { viewCount: currentViewCount });
      } else {
        // 조회수 생성
        await setDoc(docRef, { viewCount: 1 });
        setViewCount(1);
      }
    };

    getViewCount();
  }, [boardId]);

 

마치며...

오랜만에 Firebase 를 사용하여 다시 사용법에 대해 상기해 보는 시간이었다.

단순한 구현이지만 Firebase 에 관한 내용을 블로그에 정리하고 싶어 글로 작성하게 되었다.

(CRUD 중에서 D 기능이 없어 좀 아쉽다..ㅠ)

 

그리고 조회수 기능은 베타 테스트에서 유저 피드백을 받아 수용한 의견이며, 기획 상으로 불가능한 기능을 다른 방법을 통해 문제를 해결해 나갔다는 거에 의의를 두고 싶다!