본문 바로가기

IT191

[web] tree-shaking 요약 webpack 기준 tree-shaking 적용 방법1. bundle 시 commonjs로 transpile이 되면 안됨 .babelrchttps://babeljs.io/docs/babel-preset-env#modules> Setting this to false will preserve ES modules.{ "presets": [ ["env", { "modules": false }] ], "plugins": [ ["transform-react-jsx", {"pragma": "h"}], "emotion" ]} 2. 필요한 함수만 import// asisimport * as utils from "../../utils/utils";// tobeimport { simpl.. 2024. 10. 27.
[web] 사용되지 않는 자바스크립트 및 CSS 찾기 아래의 글을 요약했습니다.https://developer.chrome.com/docs/devtools/coverage?hl=ko 적용 범위: 사용되지 않는 자바스크립트 및 CSS 찾기  |  Chrome DevTools  |  Chrome for DevelopersChrome DevTools에서 사용되지 않는 자바스크립트 및 CSS 코드를 찾고 분석하는 방법developer.chrome.com너무 쉽습니다. 몇년전에도 해당 기능을 알았지만 까맣게 잊고 있었네요. 오!! 이런것이 있어? 하면서 놀랬지만 이 글을 쓰는 시점에서는 '아.. 알고 있었는데..' 사용방법크롬 > 개발자 도구 > 범위 > 리프레스 버튼 > 녹화 중지*범위가 없으면 더보기(삼점)버튼 눌러서 범위 선택 테스트 2024. 10. 23.
[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.

티스토리툴바