방문자 카운터 기능 구현 히어로 이미지

방문자 카운터 기능 구현

방문자 카운터 기능을 구현했습니다.

방문자 수가 꾸준히 증가했으면 좋겠습니다!

[사용자 페이지 푸터]

사용자 페이지 푸터 방문자 카운터

[관리자 페이지 대시보드]

관리자 페이지 대시보드

방문자 데이터 수집 항목

방문자 카운팅은 처음 구현해봐서 DB에 어떤 정보를 저장해야 하는지 몰라 AI에게 물어봤습니다.

User-Agent와 Referer를 저장한다고 합니다. 알아보니 접속 브라우저, OS, 접속 디바이스 정보인 것 같습니다. Referer는 직전 URL을 담는 것 같습니다.

아마 어디서 유입되는지 확인하는 용도인 것 같습니다.

방문자 데이터 수집 항목

이 데이터들로 대시보드를 풍부하게 채워넣을 수 있겠습니다.

ua-parser-js 사용 (User-Agent 파싱 라이브러리)

User-Agent를 콘솔창에 출력해보니 다양한 정보를 담은 매우 긴 문자열 데이터였습니다.

처음에는 split으로 분리해야 하나 생각했지만, 전용 라이브러리가 있었습니다.

ua-parser-js 라이브러리

정말 유용한 라이브러리입니다.

정리

소요시간: 약 1시간

난이도: 5/10점

프로젝트 진행도: 40%

코멘트:

방문자 카운터를 렌더링하다 보니 사용자 정보를 수집하게 되었습니다.

개인정보처리방침 페이지도 만들어 푸터에 추가해야겠습니다.