본문 바로가기

웹(web)136

frontend 읽었던 링크 정리 브라우저는 어떻게 동작하는가? https://d2.naver.com/helloworld/59361 Eliminate render-blocking resources https://web.dev/render-blocking-resources/ Rendering on the Web https://developers.google.com/web/updates/2019/02/rendering-on-the-web?hl=en 어서 와, SSR은 처음이지? - 개발 편 https://d2.naver.com/helloworld/2177909 당신이 모르는 자바스크립트의 메모리 누수의 비밀 https://ui.toast.com/weekly-pick/ko_20210611?fbclid=IwAR3sSsRYJ4-TfFbmZ6tx-.. 2021. 6. 19.
렌더링 차단 리소스 페인트 시에 중단되는 경우에 대한 설명이다. https://web.dev/render-blocking-resources/ Eliminate render-blocking resources Learn about the render-blocking-resources audit. web.dev https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=ko 렌더링 차단 CSS | Web | Google Developers 기본적으로, CSS는 렌더링 차단 리소스로 취급됩니다. CSS가 렌더링을 차단하지 않도록 방지하는 방법에 대해 알아보세요. developers.google.com 2021. 5. 23.
크롬 콘솔에서 디버깅하기 크롬 개발자도구 콘솔을 사용하여 다양한 디버깅 방법을 알아보자. # 콘솔 키기 크롬 개발자도구를 키고 Console 탭이 아닌 경우에 단축키인 ESC를 클릭하면 개발자도구 아래쪽에 console drawer이 나타난다. 개발자도구 상단 쪽 X 버튼 왼쪽에 있는 점 세개를 누르면 show console drawer을 눌러도 된다. 상단 탭에서 Console 탭을 찾아서 클릭하면 다음과 같이 콘솔이 나타난다. 크게 보려면 탭을 찾아서 키면 된다. # expression을 모니터링하기 실시간으로 현재 viewport의 active element를 보고 싶다면 어떻게 해야할까? 위 버튼을 누르면 아래 처럼 입력할 수 있는 창이 나타난다. 여기에 document.activeElement를 입려한 후 엔터를 치면 .. 2021. 5. 5.
크롬으로 Layout(grid, flex) 디버깅 Styles의 Layout 탭에 대해서 살펴보자 Layout 탭에는 grid와 flex로 선언된 엘리먼트가 나타난다. Overlay display settings에서 show track sizes를 체크하고 grid overlays에서 원하는 요소를 체크해보면 viewport에서 아래 사진처럼 layout 정보를 보여준다. show track sizes에서 1fr - 238px 과 같이 나타나는데 1fr은 사용자가 지정한 값이고 238px은 computed된 px 값이다. grid나 flex는 복수 선택이 가능하며 엘리멘트 옆에 색상 네모칸은 해당 레이아웃을 viewport에서 하이라이팅 해줄 때 색상이다. 가장 오른쪽에 있는 화살표 버튼을 누르면 viewport에서 엘리먼트가 있는 곳으로 바로 이동이 .. 2021. 5. 5.

티스토리툴바