Vue로 PWA 개발

24. mylog 조회수 컬렉션

그랜파 개발자 2024. 10. 23. 15:03

조회수 컬렉션이 ‘/views/{postId}/users/{userId or anonymousId}’와 같은 구조를 가집니다.

ChatGPT 에게 물었습니다.

위 예제에서의 views 컬렉션 구조 설명해줘

 

ChatGPT

views 컬렉션은 각 글에 대한 조회 기록을 관리하기 위한 구조입니다. 특히, 회원과 비회원이 하루에 한 번만 조회수를 증가시키도록 조회 기록을 저장하는데 사용됩니다. 이 구조는 Firestore에 저장되며, 각 사용자의 조회 기록을 날짜와 함께 저장하여 중복 조회를 방지합니다.

views 컬렉션 구조

views 컬렉션은 특정 게시글(postId)에 대한 각 사용자의 조회 기록을 저장하는 방식으로 설계됩니다. 이를 통해 해당 사용자가 해당 게시글을 언제 마지막으로 조회했는지 확인할 수 있습니다.

구조 설명:

/views/{postId}/users/{userId or anonymousId}

1. views 컬렉션

  • 각 게시글에 대한 조회 기록을 저장하는 최상위 컬렉션입니다.
  • 컬렉션 이름은 views로 지정됩니다.

2. postId (Document)

  • 각 게시글의 고유 ID입니다. posts 컬렉션에서 게시글의 ID와 동일한 값입니다.
  • 게시글마다 조회 기록을 별도로 관리합니다.

3. users 서브 컬렉션

  • 각 게시글 안에 존재하는 서브 컬렉션입니다.
  • 이 서브 컬렉션은 특정 게시글을 조회한 사용자들을 관리합니다.
  • 회원은 userId를, 비회원은 고유한 anonymousId를 사용하여 사용자별로 문서를 만듭니다.

4. userId or anonymousId (Document)

  • 회원인 경우, userId는 사용자의 고유 ID입니다 (예: Firebase Auth에서 제공하는 사용자 ID).
  • 비회원인 경우, 쿠키나 로컬 스토리지를 사용하여 생성한 고유한 익명 ID를 사용합니다 (anonymousId).
  • 이 문서 안에는 해당 사용자의 조회 기록이 들어갑니다.

5. 조회 기록 필드

  • lastViewed: 사용자가 게시글을 마지막으로 조회한 시간(타임스탬프)을 저장합니다. serverTimestamp()를 사용하여 Firestore 서버 시간을 저장합니다.

구조 예시:

예를 들어, postId가 abc123인 게시글에 대해 사용자들이 조회한 기록이 다음과 같이 저장됩니다:

/views/abc123/users/user_1 (회원) /views/abc123/users/anon_9sdfsdf (비회원)

예시 데이터:

/views/abc123/users/user_1
{
  lastViewed: September 6, 2024, 12:34:56 PM UTC
}

/views/abc123/users/anon_9sdfsdf
{
  lastViewed: September 6, 2024, 08:15:42 AM UTC
}
  • abc123: postId로, posts 컬렉션에서 해당 게시글의 고유 ID입니다.
  • user_1: 회원 사용자 ID입니다.
  • anon_9sdfsdf: 비회원 사용자의 고유 익명 ID입니다. 이는 쿠키나 로컬 스토리지에서 가져온 고유 값입니다.
  • lastViewed: 사용자가 마지막으로 이 게시글을 조회한 날짜와 시간입니다.

데이터 구조 동작 설명:

  1. 회원이 abc123 글을 방문하면, Firestore의 /views/abc123/users/user_1 문서에 저장된 lastViewed 필드를 확인합니다.
  2. 오늘 이미 조회한 경우: 더 이상 조회수를 증가시키지 않습니다.
  3. 오늘 조회하지 않은 경우: viewCount를 증가시키고, lastViewed를 현재 날짜로 업데이트합니다.
  4. 비회원이 abc123 글을 방문하면, /views/abc123/users/anon_9sdfsdf 문서를 생성하거나 업데이트합니다. 이때 익명 ID는 로컬 스토리지에서 관리됩니다.
  5. 오늘 이미 조회한 경우: 조회수를 증가시키지 않습니다.
  6. 오늘 조회하지 않은 경우: 조회수를 증가시키고, lastViewed 필드를 업데이트합니다.

Firestore 조회 방식

Firestore에서 조회수를 관리하기 위해 getDoc() 함수를 사용해 사용자의 조회 기록을 불러오고, setDoc() 함수를 사용해 새로운 조회 기록을 추가하거나 업데이트합니다.

const viewDocRef = doc(db, 'views', postId, 'users', viewId); // Firestore 경로 참조
const viewDoc = await getDoc(viewDocRef); // 조회 기록 확인

// Firestore에 조회 기록 추가 또는 업데이트
await setDoc(viewDocRef, {
  lastViewed: serverTimestamp() // 현재 서버 시간을 저장
});

결론

이 views 컬렉션 구조를 사용하면, 회원과 비회원 모두에 대해 하루에 한 번만 조회수가 증가하도록 관리할 수 있습니다. userId 또는 anonymousId에 따라 조회 여부를 확인하고, 해당 글에 대해 중복 조회가 발생하지 않도록 Firestore에서 lastViewed 필드를 활용해 날짜를 관리하는 방식입니다.

'Vue로 PWA 개발' 카테고리의 다른 글

26. mylog 익명 ID  (0) 2024.10.24
25. mylog 날짜별 조회수  (0) 2024.10.24
23. mylog 조회수  (0) 2024.10.23
22. mylog 쓰기  (0) 2024.10.23
21. mylog 홈페이지  (0) 2024.10.22