Front End Develop Front End Develop

다나와 기술블로그 내용을 재구성하였습니다. 서드파티 쿠키 2년내로 사용 불가 서드파티 쿠키는 사용자가 방문한 사이트 내에서 생성되는 쿠키가 아닌 다른 웹사이트에서 들어오는 쿠키를 말합니다. 사용자가 지마켓을 방문한 뒤에 구글 검색을 이용하고 있는데 그 페이지 내에서 지마켓에서 본 상품들이 광고로 뜨는 것을 확인할 수 있습니다. 이런 서드파티 쿠키를 2년 내로 차단하겠다고 구글측에서 발표했습니다. 기존에도 서드파티 쿠키를 차단하는 방법이 있었는데요. 광고업계에서는 일대 파란이 예상됩니다. 본래, 사용자의 기록을 추적하기 위한 행위는 개인정보보호 이슈로 판단되어 사파리, 파이어폭스, 엣지 등은 쿠키를 추적하지 못하게 하거나 서드파티 쿠키 사용을 금지 해 왔습니다. 크롬은 이제 적용하지만 점유율이 높아 매우 ..

JS 이벤트 루프에 대한 이해에 30분만 투자하면 완벽하게 이해할 수 있는 영상이 있어 공유드립니다. * 실제로 스크롤 이벤트를 작성하면 스크롤 이벤트는 스크롤 한번 할 때마다 수없이(15 milliseconds당) 이벤트를 일으키기 때문에 수 많은 이벤트들이 콜백 queue에 쌓이게 됩니다. * 핵심은 stack에 불필요한 느린 코드를 쌓아서 이벤트 루프를 막지 말아라 즉, 브라우저가 Rendering하는 과정을 막지 말라는 것입니다. 출처 : https://www.youtube.com/watch?v=8aGhZQkoFbQ&feature=youtu.be

미디어쿼리는 상당히 유용합니다. w3c 에서는 미디어 쿼리 레벨 5 스펙을 한창 작성중입니다. https://drafts.csswg.org/mediaqueries-5/#script-custom-mq Media Queries Level 5 Abstract Media Queries allow authors to test and query values or features of the user agent or display device, independent of the document being rendered. They are used in the CSS @media rule to conditionally apply styles to a document, and in various othe drafts.c..

, , 혼동이 올 수 있는 태그입니다. Blockquotes 흐름 요소 (즉, "블록 수준"요소)로서 인용 부호 안에 다른 요소가 포함될 수 있습니다. 예를 들어, 문제없이 단락(태그)을 넣을 수 있습니다. 인용 부호는 디자인의 장식 요소가 아닌 인용 용도로만 사용되어야합니다. 또한 화면 판독기 사용자가 인용 부호 사이를 이동할 수 있으므로 접근성을 지원합니다. 따라서 미학에만 사용되는 인용구 요소는 실제로 사용자를 혼란스럽게 할 수 있습니다. 확장 된 인용의 범위를 벗어나는 장식적인 것이 필요하다면 클래스가있는 div가 갈 길입니다. Quoting with Q 태그는 인라인 따옴표 입니다. 많은 최신 브라우저는 자동으로 따옴표에 의사 요소로 인용 부호를 추가하지만 이전 브라우저에는 fallback이 필..

In its current state, there is no "direct” way to create a private variable in JavaScript. -> 현재 상태에서 자바스크립트 private 변수를 (은닉화) 만드는 "직접적인" 방법은 없습니다. In other languages, you can use the private keyword or double-underscores and everything works, -> 다른 언어에서, private 키워드(자바 등) 또는 __ 이중 underscore 를 사용하는 등의 방법을 사용할 수 있지만 but variable privacy in JavaScript carries characteristics that make it seem mor..

많은 사람들이 CSS가 성능이 높고 성능이 떨어질 수 있다는 사실을 잊거나 단순히 깨닫지 못합니다. 그러나 성능이 좋지 않은 CSS를 얼마나 적게, 실수하고, 실현할 수 있는지 알면 쉽게 용서받을 수 있습니다. 이 규칙은 실제로 속도가 특징 인 고성능 웹 사이트에만 적용되며 특정 페이지에 1000 개의 DOM 요소가 나타날 수 있습니다. 그러나 모범 사례는 모범 사례이며, 다음 Facebook 또는 로컬 데코레이터를위한 사이트를 구축하든 상관없이 항상 알아 두는 것이 좋습니다. Steve Souders 의 책 Even Faster Websites에서 인용하는 css 선택자 스피드의 순위는 다음과 같습니다. ID, e.g. #header Class, e.g. .promo Type, e.g. div Adja..

이미지에 대한 Client Hints를 사용하기 위해 head 태그 내에 삽입해야되는 메타태그 Accept-CH: DPR, Viewport-Width Accept-CH: Width Accept-CH-Lifetime: 86400 Vary: DPR, Viewport-Width, Width Accept-CH를 통해서 위와 같은 속성들을 사용할 수 있으며, 저는 이번에 DPR, Viewport-Width, width를 사용해 봅니다. DPR의 범위를 제한함과 동시에 medaqueries 사이즈를 통해 각각 노출할 수 있습니다.

이 글은 하단 출처에서 발췌하여 필요한 부분만 따로 정리한 글입니다. 이미 지연 로딩이 실행되는 것을 본 적이 있을 것입니다. 지연 로딩은 다음과 같이 진행됩니다. 페이지에 도달하여 콘텐츠를 읽으면서 스크롤을 시작합니다. 특정 지점에서 자리표시자 이미지를 표시 영역으로 스크롤합니다. 자리표시자 이미지가 순간 최종 이미지로 교체됩니다. 현대의 브라우저는 Intersection observer API를 통해 요소 확인 작업을 수행하는 더욱 우수하고 효율적인 방식을 제공합니다. document.addEventListener("DOMContentLoaded", function() { var lazyImages = [].slice.call(document.querySelectorAll("img.lazy")); i..