분류 전체보기307 [web] 렌더링 차단 CSS 아래의 글을 정리한 포스팅입니다. https://web.dev/articles/critical-rendering-path/render-blocking-css?hl=ko 렌더링 차단 CSS | Articles | web.dev기본적으로 CSS는 렌더링 차단 리소스로 취급됩니다. 렌더링이 차단되지 않도록 방지하는 방법을 알아보세요.web.devCSS는 렌더링 차단 리소스로 취급그렇지 않으면 아래의 이미지처럼 보였다가 스타일이 입혀서 노출되어서 스타일이 적용되기 전까지 페이지를 정상적으로 이용할 수 없는 상황이 발생할 수 있음그래서 불필요한 스타일은 제거하여 다운로드를 최대한 빠르게 해야 합니다. 렌더링 차단 리소스렌더링 트리 생성 하려면 CSSOM과 DOM을 읽어들어야 합니다. CSSOM은 CSS를 .. 2024. 10. 23. [web] 렌더링 트리 생성, 레이아웃 및 페인트 아래의 글을 정리한 포스팅https://web.dev/articles/critical-rendering-path/render-tree-construction?hl=ko 렌더링 트리 생성, 레이아웃 및 페인트 | Articles | web.dev주요 렌더링 경로에서 중요한 한 가지 단계는 렌더링 트리를 생성하고, 레이아웃 작업을 실행하여 이 트리에서 페이지를 생성하고, 결과 페이지의 픽셀을 화면에 칠하는 것입니다.web.dev요약 렌더링 트리 생성하려면 DOM 트리와 CSSOM 트리를 결합하여 생성 (화면에 보여질 것들만 추려서, 스타일도 마찬가지)레이아웃은 렌더링 트리에 속한 노드들이 어디에 위치할 지 결정페인트는 렌더링 트리와 레이아웃의 값들을 이용해서 화면에 노출 렌더링 트리 CSSOM 트리.. 2024. 10. 22. [JS] var 에 대해서 그리고 hoisting 까지 var변수 선언할 때 사용새로운 코드를 작성할 땐 사용하면 안됨 - let 또는 const만 사용 - 이유는 블록 scope가 없기 때문 (**매우 중요) - 그래서 var로 작성된걸 let 또는 const로 변경하는 작업을 한다면 스코프에 유의해야한다.블록 scope가 아닌 함수 수준 scope를 갖는다.var 선언은 함수가 시작되는 시점에 처리 된다.scope 무시되는 예제예제 1) if statement scope가 무시됨if (true) { var test = true;}alert(test); // alert의 값이 true로 찍힘 예제 2) for loop에서도 scope이 무시됨for (var i = 0; i 예제 3) 함수 안의 scope 무시됨function sayHi() { if (.. 2024. 9. 12. [javascript] import 자세하게 파해쳐보자 퀴즈 하나 내본다. 맞춰봐라. 상품은 없다. 두개의 파일이 있다고 해보자hello.tsclass Greeting { say() { const a = Math.random() * 0.3; return `hello ${a}`; }}export const hello = new Greeting(); index.tsimport { hello } from "./hello";const d = hello;const e = hello;console.log(d === e); index.ts에서 console에 찍히는 값은 무엇일까?답은 true이다. 왜 true인지 파해쳐 보려 한다. code 실행 시 import statement가 hoisted 된다. 이 말은 코드가 돌기 전에 먼저 다뤄진다는 말이다.처.. 2024. 9. 12. [요점 정리] 난생처음 만드는 Vite 플러그인 - 이은재 브라우저는 .jsx, .vue 이런 확장자를 모른다. 누가 js로 변환해줄까?> vite rollup 이란?> webpack은 웹을 만들기 위한 번들러라면, rollup은 라이브러리를 만들기 위한 번들러> vite를 만들 때 rollup plugin을 그대로 사용할 수 있게 만듬 vite plugin 구성 - resolveId(source, importer, options) - load(id) - transform(code, id) resolveIdsource 보고, 우리가 다룰 수 있는건지 확인 (처리할 수 있니?)다룰 수 있으면 응답을 내려주고 그렇지 않으면 null 반환응답을 내려주면 vite가 load fn을 실행 loadid를 보고 파일의 정보를 메모리에 올려 반환해준다. transfrom메모리.. 2024. 9. 11. [요점 정리] 인프런 아키텍처 2024-2025 - 이동욱 글로벌 진출을 위해 트래픽 비용절감무료 강의를 제공 후 결제 하지 않으면 트래픽 비용만 나가는 셈. 트래픽 비용을 최소화 이미지avif로 변경. caniuse 에서는 iOS 14는 지원 안됨..성과: png, jpeg 기준 대비 약 60프로 감소 API 응답WAS에 로컬캐쉬 넣어서 DB 트래픽은 낮췄지만, 여전히 부족함로드 벨런서 앞에 CDN을 두어서 캐쉬로 응답성과: 일 150GB, 월 4.5TB 트래픽 EC2에서 처리안함**주의: API 응답을 CDN 캐쉬 설정 시 기본 값으로 설정하면, 해더도 캐쉬가 됨.해더가 캐쉬가 되니, set-cookie 값도 같이 전달되어 처음 캐쉬 구을 때 유저의 새션 정보도 같이 저장되어 캐쉬로 얻은 유저는 제일 처음 접속한 유저의 페이지로 보여지게 됨 인프런 아키텍처.. 2024. 9. 10. 이전 1 2 3 4 5 6 7 8 ··· 52 다음
