일평균 50~80명 사이 방문자를 기록하던 제 블로그에 무려 3000여명 가까이 기록되는 일간 방문수가 기록되는 일이 있었습니다. 처음엔 기뻤으나,,, 엥 ...제 블로그는 이런 몇천명의 트래픽이 발생하는 인기 블로거가 아닌데 말입니다. IP를 확인할수있는 방법이 없고 무효트래픽이 발생하게되면 광고 제재가 들어올수도 있다는 소식에 GA4를 티스토리와 연동하여 무효트래픽을 모니터링하고자 합니다. GA는 주로 마케팅에서 잠재고객 분석/활용에 사용되고 있고 앞서 GA에 대한 소개와 이점을 간략하게 소개하자면 1. GA (Google Analytics) Google Analytics는 Google에서 무료로 제공하는 "웹 로그 분석 툴"입니다. Google Analytics를 웹사이트에 설치하여 방문자의 유입 ..

무중단 배포 전략 ? 소프트웨어나 애플리케이션의 변경사항을 사용자에게 서비스 중단 없이 지속적으로 배포하는 전략 입니다. 애플리케이션의 중단 시점 운영중인 서버가 하나일 경우 v1 서비스가 현재 실행중이고 새 버전인 v2를 다운로드를 받습니다. v1 서비스를 종료시키는 시점부터 v2 서비스를 시작하기 전까지 서비스는 중단됩니다. (Downtime) 문제점은? V2가 실행되기 전까지 빨간색 "X"로 표시된 부분은 애플리케이션을 사용할 수 없게됩니다. 실제 가동중인 애플리케이션이라면 사용자는 중단하는 그 시간동안 기다려야만 할까? 그건 있어서는 안될 일입니다. 서비스를 중단없이 새로운 버전으로 계속 배포하는 방법을 찾아봅니다. 무중단 배포 전략에는 Rolling, Blue-Green, Canary 방식이 있..

최근 media query에 대해서 공부를 하다가 이제서야 발견한 사실.. 브라우저내에서 지원하는 Device Mode인데요. 사실 반응형웹에 대해서 크게 관심이 없다면 스쳐지나갈법 합니다. Device Mode Device Mode는 모바일이나 데스크탑의 장치별로 Viewport를 확인하거나 조정할 수 있습니다. 그동안 브라우저 창의 크기를 마우스로 수동 조정하여 해상도별 디자인을 확인해야했던 시간들을 단축시킬 수 있습니다. 개발자도구 (브라우저 + F12 혹은 아래 이미지 참고)를 엽니다. 개발자 도구를 확인할 수 있는데, 아래 이미지중 노란색으로 동그랗게 칠한 아이콘을 누릅니다. width, height 조정 (웹페이지 해상도 수동 확인) 아래의 이미지처럼 width와 height를 원하는 크기만큼..

메타태그란 무엇일까요? 프론트 개발을 하면서 메타태그를 스쳐지나간 경험이 있을거라 생각합니다. 메타태그란 html의 태그 요소중 하나입니다. html 문서가 어떤 내용물을, 핵심 키워드는 무엇인지, 어떤 정보들이 있는지를 담고있는 태그라고 볼 수 있습니다. 성공적인 SEO를 위해서도 사용됩니다 기본적인 문법은 로 이루어져 있습니다. 아직 meta 태그를 본적이 없으신가요? 가령 티스토리의 meta태그는 아래와 같습니다. 1. viewport 모바일웹이나 반응형웹에서 기기장치를 인식할 때 사용 사용중인 장치와 동일하게 뷰포트의 너비를 설정하는데 사용 width=device-width : 모바일 기기(장치)의 화면 너비를 따르도록 페이지 너비를 설정 initial-scale=1.0 : 브라우저에서 페이지를 ..