전체 글355 Next.js - GA4 pageview 추가하기 (Nextjs 셋업편) 사이드로 만들어 보았던 랜딩 페이지의 방문객이 어느정도 되는지 알고 싶었다.이러한 니즈로 방문객 수를 알아보고 싶으면 GA 를 프로젝트에 심어야 한다더라예전에 회사에서 전략팀이 주는 소스로 A/B테스트 정도로 코드에 심어서 테스트 요청을 해본 적은 있었지만GA 설정부터 시작해야한다. 분명 나같은 사람들이 많겠지. 그래서 직접 포스팅 해보려고 한다.해당 포스팅은 GA 페이지 내 설정 / Nextjs 프로젝트 내 설정 요렇게 두 파트로 나눠보았다. 지난 시간에는 GA 페이지 설정을 해보았고, 이번에는 Nextjs 프로젝트 내 설정을 해보려고 한다. GA 페이지 설정이 궁금하시다면 클릭👇👇👇 Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편)사이드로 만들어 보았던 랜딩 페이지의 방.. 2025. 4. 1. Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편) 사이드로 만들어 보았던 랜딩 페이지의 방문객이 어느정도 되는지 알고 싶었다.이러한 니즈로 방문객 수를 알아보고자 하였더니 GA 를 프로젝트에 심어야 한다더라예전에 회사에서 전략팀이 주는 소스로 A/B테스트 정도로 코드에 심어서 테스트 요청을 해본 적은 있었지만GA 설정부터 시작해야한다. 분명 나같은 사람들이 많겠지. 그래서 직접 포스팅 해보려고 한다.해당 포스팅은 GA 페이지 내 설정 / Nextjs 프로젝트 내 설정 요렇게 두 파트로 나눠보았다. Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편) 1. 구글 계정으로 텅~ 비어있는 GA 페이지로 진입해보자. 메뉴 패널 > 어드민 메뉴로 들어가보자 2. create 버튼을 눌러 property 를 클릭! 3. property.. 2025. 3. 30. 디자인패턴 - Flyweigh 디자인 패턴을 항상 공부하고 싶었다.하지만 그 시절의 나에겐 뭔가 어려웠고, 개념 자체가 이해가 잘 되지 않아 여러번 포기 했었던 것 같다.올해 초부터 이제 공부할 타이밍이구나를 느끼고, 강의를 찾아보게 되었다. 그동안 업무하면서 겪었던 경험들이 하나둘씩 떠오르면서,머리 속에 각각 떠돌아다니던 지식들이 패턴화되어 깔끔하게 정리가 되는 느낌이었다. 타입스크립트로 보는 GoF의 디자인 패턴 강좌 라는 유튜브 강의를 듣게 되었는데타입스크립트를 사용하여 이해도 되고 전반적으로 깨닫는 것이 많아서 학습 내용을 정리해보려고 한다. 디자인패턴 - FlyweighFlyweight동일한 객체를 중복하여 생성하지 않고, 미리 생성된 객체를 공유해서 사용한다는 개념의 패턴이다.공유할 속성과 아닌 속성을 구분해서 생각해 주어.. 2025. 3. 9. React - eslint 세팅하기 eslint 를 세팅을 하였다. 하면서 정확한 개념을 이해하게 되었다.prettier 가 한 사람이 짠 것 같은 코드 규칙을 적용하는 거라면,eslint 는 여러 명이 협업할 때 잘못된 코드(중복, typo) 등을 고칠수 있도록 도와준다.이친구가 없다면 배포할때에서야 잘못된 점들을 알아챌 수 있기 때문에 모든 프로젝트의 동반자같은 녀석이다. 먼저, 최신버전을 다운받았다.하지만 리액트 플러그인과 호환성이 안맞는 부분이 있어 9버전에서 8버전으로 다운그레이드 하였다.(무조건 최신보다는 안정성이 확인되고 업그레이드 하는 것을 추천) eslint.config.js import eslint from "@eslint/js";import tseslint from "@typescript-eslint/eslint-plu.. 2025. 2. 18. Figma - 피그마에 폰트 추가하기 (Feat. 맥) 피그마 데스크탑 앱에 원하는 한글 폰트가 없어 추가를 하려고 한다 😁 1. 일단 폰트를 다운받아주자 (TTF 혹은 OTF 확장자의 폰트 파일만 가능)나는 귀여운 삼립호빵체를 받아주었다 (호호) 2. 맥북에 폰트 파일 설치하기spot light 를 키고 font book 을 검색해보자** font book 은 맥북의 폰트 모음 폴더라고 생각하면 된다 3. font book 안에 폰트 넣어주기맥북에 폰트 설치가 되었다 4. 피그마 데스크탑 앱에서 사용하기잘 나온다! 2025. 2. 9. React - 구글 스프레드 시트 API 연동하기(2) - 프로젝트 설정 구글 스프레드 시트에 저장한 데이터를 API 로 받아 리액트에서 호출하여 보여주려고 한다그러려면 구글에서 제공하는 구글 스프레드 시트 API 를 사용해야 한다. 어떻게 사용해야 할까? 일단 오버뷰 단위로 정리 한 번 해보자 (적어도 내가 뭘하는지는 알아야 하니까)지난 포스팅에서는 구글 콘솔에서 할 일을 먼저 정리해보았다. 이번 포스팅에서는 프로젝트 설정을 해보려고 한다.자, 머리에 그려졌으면 따라와보시길 ! 1. 구글 콘솔에서 할일 1) 서비스 계정 만들고 키 발급 받기 2) 구글 스프레드 시트 API 페이지 라이브러리 활성화 시키기 3) 구글 스프레드 시트 : 서비스 계정 메일 주소를 추가하기 React - 구글 스프레드 시트 API 연동하기(1) - 구글 콘솔 설정구글 스프레드 시트에 저장한 데이터를.. 2025. 1. 30. 이전 1 2 3 4 ··· 60 다음 반응형
