재시민

배경

오랜만에 쭈꾸미 집을 들려 안부 인사를 묻고 웹사이트는 문제 없냐 물어봤다. 그런데 직원 핸드폰에서는 접속이 잘되는데 가끔 외국인 핸드폰에서는 404 에러가 뜬다고 한다. 아니 이런.. 그게 무슨 말이야?! 왜지 왤까.. 집에가면서 계속 생각을 해봤고 아무래도 vercel 에서 해외 IP 차단을 한 것 일 수도 있다고 생각이 들었다.

부랴부랴 집에 와서 vercel 에서의 내 프로젝트를 확인해 오류 로그를 보려고 하니 아뿔싸 분석기는 따로 import 해서 layout.tsx 에 넣어야 작동을 한다는 것!?

바로 설치해.

Step 1 : npm 설치

npm i @vercel/analytics

위 명령어를 실행하면 자동으로 패키지가 설치된다.

무이스~! 아주 잘 설치가 됐군요

Step 2 : Layout.tsx 에 컴포넌트를 넣는다.

Layout.tsx 에 위처럼 Analytics 를 불러온다.

이후에 body 태그 안에 예쁘게 붙여 넣는다.

Step 3 : Publish

git에 저장하면 자동으로 deploy!

https://vercel.com/docs/analytics/quickstart#add-the-analytics-component-to-your-app

위 사진처럼 이제 방문객을 확인할 수 있다.

그런데..

이제 해외 IP 에서 웹 사이트를 접속해보려고 VPN 을 이용해 접속해보았다. 그런데 오류가 시뮬레이션이 되지 않았다...

도대체 무엇이 문제일까..

지속적인 로그 확인을 통해 지켜보아야겠다.