Firebase 서비스를 이용하여 방문자 수를 구현해보도록 하겠습니다.
우선 Firebase 서비스를 이용하기 위한 초기 세팅은 아래 링크를 참고바랍니다.
>> Firebase 초기 세팅
1. 방문자 수 저장하기
먼저 위와 같이 필드를 추가하여 Firestore 세팅을 해줍니다.
-
updateDoc과increment를 이용하여 필드의 값을 증가시켜줍니다. -
현재 날짜와
lastVisited필드를 비교하여 오늘 방문자수를 1로 만들거나 증가시켜줍니다. -
updateVisitorCount()를 App.js에서 import하여useEffect()로 사용하여 실행합니다.
2. 방문자 수 가져오기
visitorCounter.js에 방문자 수를 가져오는 함수를 추가합니다.
방문자 수를 표시할 컴포넌트에서 해당 함수를 사용하여 값을 설정합니다.
3. 같은 방문자는 하루에 1회만 증가 시키기
위 코드만으로는 페이지를 새로고침 할 때 마다 방문자 수가 증가하겠죠?
이를 방지하기 위해 로컬 스토리지를 이용합니다.
-
key는
visitedToday라고 명칭했으며 함수 최하단부에 value로 today를 저장하도록 합니다. -
이미 today로 저장되있을 때
return을 실행하여 함수를 종료합니다. -
localStorage.getItem()는 해당 key값으로 저장된 값을 불러오며 해당 key가 존재하지 않으면 오류가 발생하지는 않고 null이 반환됩니다.
