IT/web35 [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. [web] Script error https://sentry.io/answers/script-error/ 읽고 가공한 글입니다. What is "Script Error"?Learn what causes the inscrutable JavaScript “Script error”sentry.ioScript error. origin이 다른 곳에서 javascript file를 읽는 도중 에러가 발생했을 때 onerror callback을 보내는데, 그때 callback이 `Script error.` 문구를 노출한다. (여기서 origin이라면 다른 도메인, 다른 포트, 다른 프로토콜을 의미한다) 예제 html app.js// another-domain.com/app.jsfunction foo() { bar(); //.. 2024. 7. 12. [css] Animiation 만들 때 유용한 사이트 소개 사이트 소개https://brumm.af/shadows리액트로 만들어진 CSS Shadow Generator, 그래프로 더 정교하게 shadow생성 가능 https://www.grabient.com/ 그라데이션 추천 사이트, 목록이 몇 개 없지만, 커스텀이 가능해서 유용 https://tinytools.design/easing이런 애니메이션 어떻게 만들지? 할 때, 가서 찾고 클립보드 복사하면 끝 https://animista.net/animation을 커스텀할 수 있는 사이트 https://coolors.co/예쁜 색조합들을 추천해주는 사이트 2024. 6. 19. 이전 1 2 3 4 ··· 6 다음
