[TIL - 2022.10.24]

1.구글 서치 콘솔 등록 : 

https://parkjeongwoong.github.io/articles/Develop/4

[GitHub Blog 개발기] 구글 검색 등록 & SEO 구현(1)

 

오늘은 나의 사이트를 구글 서치 콘솔에 등록하는 작업을 해봤다. 주로 참고했던 자료는 아래의 자료다. 

https://www.coderrocketfuel.com/article/get-a-next-js-website-indexed-on-google

Get A Next.js Website Indexed On Google

 

등록 완료되었다는 말.

2.GA 적용하기 : 

https://velog.io/@yunsungyang-omc/Next.js-Google-Analystics-%EC%9D%B4%EC%8B%9D%ED%95%98%EA%B8%B0

(Next.js) Google Analytics 이식하기

https://www.npmjs.com/package/nextjs-google-analytics

nextjs-google-analytics

https://www.makeuseof.com/nextjs-google-analytics/

How to Add Google Analytics to a Next.js Website

내가 주로 참고했던 자료는 바로 위의 자료이다. 이 자료를 읽다보니 nextjs의 script 컴포넌트를 사용하고 잇었다. script 태그를 좀 읽어줘야겠다. 

 

 

https://nextjs.org/docs/basic-features/script

Basic Features: Handling Scripts | Next.js

<script>의 확정된 버전이라고 생각하면 된다. 이것은 라이브러리 스크립트 같은 것을 가져올 때 우선순위를 결정할 수 있다. 

sciprt 를 가져올 때 개발자 경험을 해칠 위험이 있다. 어떤 script는 loading performance를 상당히 높인다. 이것은 render blocking으로 이어질 수 있다. 그리고 개발자는 어디에다가 이 script를 넣어서 옵셔널 하게 로드해야할지도 고민하게 된다. Script 컴포넌트는 개발자들이 이런 부분에 있어서 쉽게 결정할 수 있게 도와준다. 

strategy 속성을 통해서 어떻게 load할 것인지를 결정할 수 있다. 

• beforeInteractive: Load before the page is interactive
• afterInteractive: (default) Load immediately after the page becomes interactive
• lazyOnload: Load during idle time
• worker: (experimental) Load in a web worker

나머지 내용은 이 각각의 속성들에 대해서 상세하게 설명해주고 있다. 

 

 

다시 ga를 설정하는 과정으로 돌아가서, spa 같은 경우에는 페이지마다 유저의 움직임을 측정하기 위해서 직접 다 기록을 해줘야 한다고 한다. 

타입스크립트 버전으로 ga를 설정해주는 방법이다.

https://frontend-digest.com/using-nextjs-with-google-analytics-and-typescript-620ba2359dea

Using NextJS with Google Analytics and TypeScript

 

 

 

 

 

3.sentry 적용하기 : 

https://velog.io/@surim014/frontend-monitoring-with-sentry-and-react

[번역] Sentry.io 및 React를 사용한 프런트엔드 모니터링