개발일지6 서브도메인에 gtag로 심은 이벤트가 추적되지 않을 때 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 이벤트를 추적하려는데 이벤트가 오지 않는다 최근에 마케팅팀과 서비스에 gtag 심는 작업을 했다. gtag는 웹서비스에서 사용자 행동을 추적하고 분석하는 데 활용하는 태그이며, 구글에서 제공한다. 꽤 간단하게 생겼다. gtag('event', 'event_name', { 'key': 'value', }); 그 중 에디터 페이지에 클릭 이벤트를 심는 작업이 있었는데, 어라? 로컬에서 확장자 프로그램으로 확인할 때는 이벤트가 잘 넘어갔는데 배포 후 살펴보니 기록되는 이벤트가 없다. 특이한 점은 page view, scroll 등의 기본 이벤트는 잘 기록되는데 내가 등록한 커스텀 이벤트.. 2023. 11. 12. 브라우저의 렌더링 과정 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 브라우저의 주요 역할은 웹페이지 렌더링이다 브라우저의 주요 역할은 사용자가 요청한 웹페이지를 렌더링하는 것이다. 브라우저는 서버로부터 필요한 리소스(HTML, CSS, JS, 이미지, 폰트 등의 정적 파일 또는 서버에서 동적으로 생성한 데이터)를 요청하고 이를 응답받아 브라우저에 시각적으로 렌더링한다. 이 과정을 좀 더 상세하게 나타낸 것이 아래의 도식이다. 하나씩 살펴보도록 하자. 사용자가 주소창에 원하는 URL을 입력하고 엔터 키를 누르면, 입력한 URL의 호스트 이름이 DNS(Domain Name System)를 통해 해당 서버의 IP 주소로 변환되고, 이 IP 주소를 갖는 .. 2023. 11. 10. [Yarn Berry] yarn berry 프로젝트에서 자꾸만 node_modules가 나타나는 이유 (with. Vite) 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 Yarn berry를 사용하는 프로젝트에 자꾸만 node_modules가 나타나는 이유 (with. Vite) 지금 작업하는 프로젝트의 빌드 도구는 Vite, 패키지 매니저로는 Yarn Berry가 세팅되어 있다. Yarn Berry를 사용하는 프로젝트에서 아래와 같이 설정하면 PnP(Plug'n'Play) 방식으로 의존성을 관리할 수 있는데, PnP는 프로젝트에 쓰이는 패키지를 가상 파일 시스템에 저장하고 필요할 때 프로젝트 코드에서 자동으로 로드하는 방식이다. 우리가 익히 알고 있는 node_modules 폴더를 생성하는 대신 의존성은 .pnp.cjs 파일을 통해 관리하고, 의.. 2023. 10. 3. [Yarn Berry] 배포 이슈_ Cannot find type definition file for 'vite/client'. 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 이슈 빌드 중 vite/client를 찾을 수 없다는 에러를 만났다. 혹은 다른 에러메세지를 만날 수도 있겠다. TS2688: Cannot find type definition file for 'vite/client'. 해결 2시간을 헤맸는데, 정신차리고 보니 'vite/client'은 존재하지 않는 패키지다. 그렇다면 의존성 문제일 가능성이 높다. git 히스토리에서 yarn.lock 파일의 이전 버전으로 복원 후 다시 배포하니 해결 됐다. 2023. 10. 3. Cube.js를 이용한 실시간 데이터 시각화 과정에서 발생한 이슈와 해결 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 Cube.js를 이용한 실시간 데이터 시각화 과정에서 발생한 이슈와 해결 요즘은 계속 대시보드 작업을 하고 있다. 서비스에서 데이터 처리와 시각화에 Cube.js라는 플랫폼을 이용하고 있는데, 최근에 Cube.js를 이용해 실시간으로 데이터를 적재하고 보여주는 과정에서 이슈가 있었기에 문제와 해결 과정을 기록하고자 한다. Cube.js를 사용하면 마치 graphQL처럼 프론트에서 직접 DB에 query를 날려 원하는 데이터를 가져올 수 있다. cube.js query문 { "limit": 5000, "measures": [ // y축 "default.impressions", "de.. 2023. 9. 24. 이전 1 2 다음
