Overview Web.dev에서 소개하는 Chrome DevTools에 대한 내용들을 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table Of Contents Chrome DevTools는 페이지가 로드되거나 실행되는 동안 발생하는 모든 것에 대한 심층 분석을 제공합니다. 성능 패널 UI에 익숙해지려면 런타임 성능 분석 시작하기를 참조하십시오. 다음 DevTools 기능이 특히 관련이 있습니다. CPU 조절로 덜 강력한 장치를 시뮬레이션합니다. 네트워크 조절로 느린 연결을 시뮬레이션합니다. 기본 스레드 활동 보기로 기록하는 동안 기본 스..

Overview web.dev에서 소개하는 Web Security에 대한 내용들을 2부에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table Of Contents 정보 유출 방지 Browser sandbox Same-origin policy Cross-Origin Resource Sharing (CORS) Making your website "cross-origin isolated" using COOP and COEP Why you need "cross-origin isolated" for powerful features Prote..

위 포스팅은 W3C의 스펙과 구글 개발자 문서를 참고하여 작성되었습니다. Overview 효율적인 웹 페이지를 작성하기 위해서는 이 웹 페이지를 다운로드하고, 파싱 하고, 렌더링 해서 사용자에게 보여주는 일련의 과정들을 이해하는 것이 중요합니다. 따라서 이번 포스팅에서는 브라우저가 웹 페이지를 HTTP를 사용해서 다운로드하여 사용자에게 보여주기까지 어떤 과정들을 거치게 되는지를 살펴보려고 합니다. Process 브라우저가 HTML파일을 파싱 해서 DOM트리를 그리고 렌더링을 하는 일련의 과정을 살펴보기 전에, 먼저 조금 더 포괄적인 관점에서 이를 살펴보려고 합니다. 먼저 아래와 같은 간단한 상황을 가정해보겠습니다. 현재 있는 페이지(www.a.com) 에서 주소창에 주소를 입력하여 다른 페이지(www.b..