Front End Develop Front End Develop

Google Tag Manager, 2012년에 출시된 웹 분석, 광고 성과 측정, 제휴 마케팅 추적 등 다양한 이벤트를 관리할 수 있는 트래킹 관리 툴입니다. 이 툴들의 단점은 PO나 마케터나 원하는 행동 데이터를 추가로 추적하고 싶을 때마다 개발자에게 코드를 심어달라고 요청해야 된다는 것입니다. 그러나 GTM을 사용하게 되면 개발자가 코드 상에서 이벤트를 정의하고 발송하는 부분이 크게 줄어들고, GTM이 제공하는 관리 페이지에서 직접 PO나 마케터가 직접 이벤트를 정의하고 심지어 어떤 시점에 이벤트를 발송할 것인지도 정할 수 있습니다. 또한 어플리케이션의 코드 내에 비즈니스 로직과 전혀 관련없는 이벤트 로그 코드가 섞이지 않기 때문에 개발자에게도 좋은 것입니다. 마케터에게 그러면 어떻게 설명하고 마케..

async / await를 다룰 때 주의해야 할 점입니다. Non Blocking 형태의 I/O 작업을하는 Node.js는 익숙하지 않을 수 있습니다. let printNum = (number, delaySec) => { setTimeout(() => console.log(number), delaySec); // i/o 작업을 대신한다. }; let logPrintNum = (number, delaySec) => { console.log(`Enter logPrintNum ${number}`); printNum(number, delaySec); console.log(`Exit logPrintNum ${number}`); }; logPrintNum(1, 0); // 결과 Enter logPrintNum 1 ..

요즘 바야흐로 다크모드의 시대~ 웹도 시큐리티 웹도 모두 다크모두 전성시대인 것 같습니다. 다크모드를 지원하는 일부 기종과 media query가 나옴에 따라 조금 더 세분화하여 처리할 수 있게 되었는데요. 파비콘은 지금 보시고 계신 웹의 상단에 브라우저 타이틀에 제 캐릭터 아이콘이 떠 있듯이 각 웹 및 어플리케이션의 아이덴티티를 효과적으로 나타내는 수단 중 하나입니다. 파비콘? 브라우저의 북마크와 열린 탭을 통해 스캔 할 때 어떤 사이트가 어떤 사이트인지 이해하는 데 도움이됩니다. 아주 새로운 트릭 중 하나는 SVG를 즐겨 찾기 아이콘으로 사용하는 기능입니다. 대부분의 최신 브라우저가 지원하는 방식으로 더 많은 지원을 제공합니다. svg를 사용하면 path나 rect circle 등의 도형의 fill과..

CSS를 사용할 때 @charset "utf-8"을 많이 보셨을 것입니다. 이 선언은 html 문서 내의 태그 내에는 적용이 되지 않습니다. 유니코드 문자열(비 아스키코드)이 있을 때 utf-8로 명시적으로 선언해주어 utf-8 인코딩 셋을 지정합니다. [data-set="dragon"]::before { content: ' ↗'; display:block; width:10px; } 예를 들어 위와 같은 유니코드 문자열이 있을 경우에 Windows-1252로 인코딩이 읽히기도 합니다. html 문서 내에 와 같이 작성하는 것은 obsolete(사용하지 않는 상태로 됨) 되었습니다. 작성 규칙은 다음과 같습니다. @charset "UTF-8"; /* 유효 */ @charset 'iso-8859-15'; /..

CSS 모션 경로를 사용하면 사용자 정의 사용자 정의 경로를 따라 요소에 애니메이션을 적용 할 수 있습니다. 이러한 경로는 SVG 경로와 동일한 구조를 따릅니다. `offset-path`를 사용하여 요소의 경로를 정의합니다. .block { offset-path: path('M20,20 C20,100 200,0 200,100'); } 위 요소는 상대적인 offset-path입니다. 하지만 여기서 문제점은 크기에 따라 반응하지 않는 다는 것입니다. 왜냐하면 해당 숫자들은 `px` 기반이기 때문이지요. 스테이지를 설정하기 위해 offset-distance 속성은 요소가 해당 경로에서 있어야하는 위치를 나타냅니다. https://codepen.io/jh3y/pen/cd95c54d57891b095df99eaa0..

구글이 사용자 프라이버시를 위한 샌드박스 정책을 급진적으로 진행하고 있습니다. 현재, 코로나 때문에 샌드박스 정책 중 하나인 SameSite Cookie도 롤백한 상태인데요.. 기존에 `navigator.userAgent`를 사용한 곳이 많기 때문에 어떻게 대처해야할지 모호한 상태라 조금 더 자세하게 알아보았습니다. Client Hints는 W3C로부터 인정받은 표준도 아니며, W3C 표준 트랙에도 없습니다. 하지만, Apple과 Microsoft도 동의한 상태이며, 크롬과 파이어폭스 일부 버전에서 `Accept-CH`를 사용할 수 있기 때문에 충분한 대응책을 가지고 있어야 할 것 같습니다. 특정 서비스에서 웹브라우저의 종류를 파악하여 서비스를 제한하는 것은 소비자의 권리에도 부합되지 않는다는 주장입니다..

코로나가 만연한 봄입니다. 코로나의 여파 때문인지 구글에서도 다른 조치를 하기로 했는데요. 바로 2월에 업데이트 된 SameSite 이슈에 대해서 롤백을 강행하기로 했습니다. 코로나 기간 중에 문제가 생기는 것을 막기 위함인 것 같습니다. 2020년 2월4일 업데이트 된 chrome 버전 80에서 쿠키 정책이 크게 바뀌게 되었습니다 이 기능이 COVID-19 전염병의 한가운데서 필수 서비스 웹 사이트를 손상시키지 않도록합니다. 라고 업데이트의 주제를 나타내고 있습니다. 이 기능을 사용하려면 개발자가 웹 사이트 쿠키의 SameSite 속성을 표시해야합니다. 이 속성은 브라우저가 저장하는 쿠키 파일의 작동 방식을 나타냅니다. 그렇지 않은 경우 Google은 해당 속성을 보안 옵션(LAX)으로 자동 전환하여 ..

뷰와 리액트 등 프레임워크 및 라이브러리 자바스크립트에서 css와 sass를 사용하는 일이 자주 있습니다. 그럴 때 마주하고 싶은 것이 바로 css Custom variable과 Sass variable로 어떻게 하면 비용절감을할 수 있을까 고민하게 됩니다. 이러한 상황에서 자바스크립트에서 css 및 sass의 변수를 다루는 법을 공유하고자 합니다. CSS 커스텀 변수와 Javascript 간단명료한 속성을 사용해서 가능한 부분입니다. // setProperty 사용하기 document.documentElement.style.setProperty("--margin", 10 + "rem"); // 10rem 그리고 자바스크립트에서 getComputedStyle 속성을 사용하여 CSS 변수를 검색할 수도 있..