Front End Develop Front End Develop

2025년 크롬 개발자 도구(DevTools)는 웹 개발자들에게 더욱 강력한 도구를 제공하며, 디버깅과 최적화를 한층 더 쉽게 만들어 주고 있습니다. 이번 업데이트에서는 특히 성능, 보안, 그리고 사용자 경험 개선에 초점을 맞춘 여러 기능이 추가되었습니다. 아래는 주요 기능과 이를 활용하는 방법을 소개합니다.1. DOM 크기 최적화 (Optimize DOM Size)DOM 트리가 너무 크면 페이지 성능이 저하될 수 있습니다. 크롬 DevTools의 새로운 기능인 DOM 크기 최적화(Optimize DOM Size) 기능은 DOM 요소 수와 깊이를 분석하고 성능 병목현상을 일으키는 특정 노드를 바로 찾아 수정할 수 있게 도와줍니다.사용 방법성능(Performance) 패널에서 페이지 로드 기록을 시작합니다..

크롬 업데이트가 어느 덧 100을 바라보고 있습니다. 프론트엔드 개발자로써 브라우저 지분율을 대부분 차지하고 있는 크롬 브라우저의 업데이트는 민감할 수 밖에 없으리라 생각합니다. 저희가 보여주는 모든 UI, UX 작업들에 영향을 주기 때문이기도 하지요. 그럼 본격적으로 크롬 99에서 업데이트 된 점들을 하나 둘 씩 살펴보도록 합시다. : ) ​CSS 캐스케이딩 레이어, 새로운 Input 엘리먼트에 대한 피커 셀렉터 등 곧 크롬 100을 앞두고 있는 크롬 99에서는 다양한 옵션들이 추가되었는데요. 크롬 96부터 아래와 같은 옵션이 생겨서 navigator.userAgent로 탐색할 수 있는 버전을 강제 설정으로 변경해서 확인하실 수 있습니다. 크롬 버전에 대해서 2자리 숫자로 체크를 하고 있었다면 이제 달..

document.cookie = "cookie1=soo; SameSite=Lax"; document.cookie = "cookie2=soo"; document.cookie = "cookie3=hoo; SameSite=None; Secure"; SameSite를 명시한 cookie1과 cookie2는 기본적으로 크롬 80 이상부터 Default Lax로 동작합니다. 하지만 cookie3의 경우에는 None으로 속성을 지정하면서 Secure 속성도 반드시 같이 지정해주셔야 합니다. 그렇게 하면 반드시 HTTPS 프로토콜 환경에서만 전송이 가능하며 서드파티와 결재모듈 등의 연동 작업 및 사용을 할 수 있게 됩니다. 이 외에도 다양하게 서버에 세팅하는 등 해결할 수 있는 방법들이 있습니다.

크롬 88버전이 업데이트 되면서 새로운 속성이 등장했습니다. 바로 aspect-ratio에 관한 것 입니다. 이것은 1 월 6일에 출시된 Safari Technology Preview 118에서 지원을 발표한 Safari의 뒤를 잇는 것입니다. 이는 Edge, Firefox 및 기타 브라우저로 출시 될 때 기대할만한 무언가를 제공합니다. 크롬 88 업데이트에 관한 내용을 아래의 공식 youtube를 통해 확인해보세요. 가로 세로 비율은 요소 크기의 비율을 정의합니다. 예를 들어 가로 세로 비율이 1/1 인 상자는 완벽한 정사각형입니다. 3/1의 종횡비는 넓은 직사각형입니다. 많은 비디오가 16/9 종횡비를 목표로합니다. 이미지 및 iframe과 같은 일부 요소에는 고유한 종횡비가 있습니다. 즉, 너비 또..

별도의 언급이없는 한, 아래 설명 된 변경 사항은 Android, Chrome OS, Linux, macOS 및 Windows 용 최신 Chrome 베타 채널 릴리스에 적용됩니다. 제공된 링크 또는 ChromeStatus.com의 목록을 통해 여기에 나열된 기능에 대해 자세히 알아보십시오. Chrome 85는 2020 년 7 월 23 일 현재 베타 버전입니다. 업로드 스트리밍 가져오기 가져오기 업로드 스트리밍을 통해 웹 개발자는 읽을 수 있는 스트림을 가져올 수 있습니다. 이전에는 전체가 레디 된 후에만 ​​요청을 시작할 수있었습니다. 그러나 이제 컨텐츠를 생성하는 동안 데이터 전송을 시작하여 성능 및 메모리 사용량을 향상시킬 수 있습니다. 예를 들어, 온라인 양식은 사용자가 텍스트 입력 필드에 focu..

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

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

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