개요 최근에 백엔드 관련 프로젝트를 2개 진행하게 되면서 프론트와의 통신과 관련해서 한가지 고민이 생겼었습니다. 첫번째로 진행했던 백엔드 프로젝트에서는 aws를 처음 써봐서 aws를 나중에 적용한 나머지 초반 개발과정에서는 백엔드코드와 프론트 코드를 둘다 github에 올리고 잘 되나 확인해보려면 두쪽에서 각각 백엔드와 프론트를 켜서 확인을 해야 했죠. aws를 적용한 후에도 비용문제로 각각 확인하는 방식을 많이 활용했고요. 하지만 두번째로 진행하는 프로젝트는 mysql을 활용한 데이터베이스를 적용해서 진행을 했습니다. 그러다 보니 그럼 각각 조원이 잘되나 확인해보려면 나랑 데이터베이스나 이런걸 똑같이 다 맞춰놓고 프로젝트를 해야하나.. 너무 비효율적인지 않나 라는 고민이 생겼죠. 그러다가 알게된것이 포..
Go lang을 처음 사용하시다 보면 package라는게 눈에 많이 띄실겁니다. 그렇다면 Go에서 package가 뭘까요? 1. Package package란 코드를 묶는 단위중 가장 큰 단위라고 생각하시면 됩니다. go 언어에서 package는 main package와 그 외 package로 나누어 집니다. 2. main package 프로그램의 시작점을 가르키는 package입니다. 이렇게 package를 main으로 설정하게 되면 go run [main package인 파일이름] main package가 아닌 파일을 실행시키려고 하면 이렇게 package command-line-arguments is not a main package 라는 오류가 발생합니다. 3. 그 외 package go 언어는 ..
[1] GA4 시작하기 (1) GA4 적용 방법 https://datas2.tistory.com/2 google analytics 적용해보기(tistory, github blog) google analytics란 2005년 11월 14일 출시된 웹 로그 분석 도구로 줄여서 GA라고 부릅니다. 여기서 웹로그는 쉽게 말해서 자신의 페이지에서 사용자가 언제, 어디서, 어떻게 방문했는지 등의 데이터를 datas2.tistory.com (2) UA와 GA4의 차이점 https://datas2.tistory.com/7 GA4로 전환되는 google analytics, UA와 GA4의 차이점 UA에서 GA4로의 변화 현재 구글은 공식적으로 2023년 7월부터 UA의 서비스를 종료하고 GA4만을 수집하겠다고 입장을 밝..
React에서는 npm과 npx라는 명령어를 볼 수 있는데 각각 무엇을 뜻하는지에 대해 알아보겠습니다. 또한, 배포방법에 대해서 설명하겠습니다. React 개발 환경 구축을 원하신다면 아래 게시글을 확인해 보시길 바랍니다. https://datas2.tistory.com/59 React: 시작하기 1. visual studio code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual S..
ga4에서 데이터를 수집하다 보면 ga4상의 데이터를 로컬에서 활용하고 싶다는 생각이 들 수도 있습니다. 그럴때 활용하면 좋은 것은 google anlaytics api가 있지만 사용하는데 있어 제한이 있습니다. 따라서 대안으로 ga4와 연동된 bigqeury를 활용하는 방법을 소개해보겠습니다. 1. 서비스 계정 생성 먼저 api를 발급받고자 하는 프로젝트로 이동해주세요. 그후 IAM 및 관리자 페이지로 이동해서 서비스 계정으로 들어와주세요 그 후 서비스 계정 만들기를 클릭해주세요 클릭한 후에는 서비스 게정이름, 계정 ID, 계정 설명을 입력해주세요 그 다음으로 역할을 Bigqeury 관리자로 설정한 해주세요 꼭 관리자로 해주시는게 좋아요. 다른것으로 설정해서 권한이 낮아지면 api를 사용해도 엑세스가 ..
프론트엔드 개발을 시도해 본 사람이라면 한번쯤은 들어봤을 용어, DOM은 무엇일까? 리액트를 이용한 대시보드를 만들고자 나는 최근에 HTML과 CSS에 대한 간략한 공부를 마치고, 리액트 공부를 하던 중 가상 DOM을 사용한다는 것을 보았고, 이전에 GTM을 이용한 GA4 적용 중, 'DOM 로드 시' 에 발생되는 트리거와 이벤트도 있었기에, DOM이 무엇인지에 대해 알아보고 싶었다. DOM 설명 전, 웹브라우저가 HTML문서를 어떻게 시각적인 화면으로 보여주는지에 대해 먼저 알아보겠다. 크롬이나 엣지와 같은 웹브라우저는 HTML 문서를 해석하고, 모니터를 통해 해석된 화면을 보여준다. 이 과정을 렌더링 이라고 부른다. 크롬이나 엣지와 같은 웹브라우저는 브라우저가 HTML 코드를 해석해 요소들을 트리 형..
1. visual studio code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2. node.js 설치 https://nodejs.org/ko Node.js Node.js® is a..
1. 사용자 식별하기 빅쿼리에는 user_id라는 값이 있지만 이는 우리가 코드를 통해 직접 ga4에서 수집해주어야 확인이 가능합니다. 그러나 우리는 user_pseudo_id를 통해 사용자를 식별할 수 있습니다. SELECT user_pseudo_id, FROM `project_id` WHERE event_name = 'page_view' 물론 로그인하는 서비스의 경우에는 사용자 id를 암호화서 user_id로 보내는 것이 사용자를 식별하는데 더 정확한 결과를 얻을 수 있습니다. 하지만 로그인을 하지 않는 웹사이트는 위와 같이 user_pseudo_id를 통해 사용자를 식별할 수 있습니다. 하지만 이 경우는 다른 브라우저로 들어오거나 다른 기기로 접속하면 다른 사용자로 식별된다는 점 유의하시기 바랍니다..
함께 프로젝트를 진행하는 회사에서, 개발중인 웹 페이지를 어떻게 사용하는 지 파악하고 싶어했다. 웹 페이지에 대해 간단히 설명하자면, 사람들의 건강관리를 위해 플랜을 대신 짜주는 케어플래너들이 플랜을 구성하는 웹페이지이다. 이때까지 공부했던 GA와 약간의 JS구문을 이용하여 필요하다고 생각되는 이벤트들이 어떤 게 있을까 생각해보았는데, 오늘은 상품결합 페이지에 관해 생각해보았던 것을 써 보려 한다. 상품결합 페이지는 케어플래너가 의도에 맞는 계획을 작성하여 사람들을 모집하기 전에, 플랜과 함께 사용하면 좋을 건강기능식품을 추가하는 페이지이다. 여기서 어떤 이벤트를 추가하면 좋을까 고민해보았는데, 가장 처음 생각해낸 것은 저장 버튼과 동시에 추가된 건강기능식품의 이름을 이벤트로 하여 개수만큼 발생시키는 것..
2023년 7월 1일부터 유니버설 애널리틱스(UA) 표준 속성의 데이터 처리가 중단되었습니다. 구글에서는 UA 서비스 종료를 알린 이후부터 지속적으로 GA4로 이전을 권고해 왔는데요. 물론 웹과 앱 속성을 통합한다는 의미도 있지만 다른 이유도 있다는 것을 알고 계셨나요? 그 이유는 유니버설 애널리틱스가 'GDPR'을 위반했다. 따라서 유럽에서 UA의 사용을 금지했기 때문입니다. 아래 기사에서도 확인할 수 있듯이 데이터 보호법에 근거해 설립된 이탈리아의 GPDP는 구글 애널리틱스 관련 서비스를 사용하고 있는 웹사이트는 적절한 수준의 데이터 보호가 이뤄지지 않는 국가인 미국에 사용자 데이터를 전송하기 때문에 EU 일반 데이터 보호 규칙(GDPR)에 위반된다. 라고 언급하고 있습니다. https://zdnet..
