milliwonkim의 블로그

애니메이션이 발생 시, 쟁크현상이 일어나는 이유? 애니메이션은 여러 이미지를 빠르게 보여줌으로써 움직임을 표현 => 만약 브라우저가 60FPS(Frame Per Second)를 그려야하는 애니메이션이 40FPS, 20FPS로 그려낸다면 끊김현상이 발생 쟁크(Jank) 현상 애니메이션이 뚝뚝 끊기는 현상 쟁크현상을 방지하는 방법? 리플로우, 리페인트를 막는 CSS 속성으로 애니메이션을 표현한다(= GPU 가속(하드웨어 가속)을 이용해서) 리플로우, 리페인트란? 리플로우, 리페인트를 이해하기 위해 브라우저에 렌더링되는 과정을 살펴볼 필요가 있습니다. 리퀘스트/리스폰스 및 로딩 서버로부터 HTML 파일을 요청해서 HTML파일을 로딩합니다. 스크립팅 HTML파일을 DOM으로, CSS 파일을 CSSOM으로 변환하..

FCP(First Contentful Paint) 초기 DOM 콘텐츠 렌더링 시간 측정 TTI(Time To Interactive) 이용자가 실제로 클릭이벤트 등을 발생 시킬 수 있게 만드는 시간 여기 전까지는 입력 및 동작이 입력 안됨 SI(Speed Index) 페이지 로드 중, 컨텐츠가 보여지는 속도를 뜻함 A가 B보다 더 점수가 높음 TBT(Total Blocking Time) - 사용자의 입력을 차단한 시간 - FCP와 TTI의 사이에서 발생 = 메인스레드를 독점해서 다른 동작을 방해한 시간 LCP(Largest Contentful Paint) 페이지 내의 컨텐츠 중 가장 큰 이미지 등 에셋이 로드 된 시간 CLS(Cumulative Layout Shift) 페이지 로드 과정에서 발생하는 예기치..

removeSpecialCharacter라는 함수의 실행으로 인해 Article 컴포넌트 렌더링이 자바스크립트 스레드에서 많은 시간 병목 현상을 만들어내고 있습니다. 10.33ms 차지 퍼포먼스 점수도 39점입니다. 이를 위해 해당 함수를 개선할 필요가 있습니다. 병목 코드 개선 function removeSpecialCharacter(str) { const removeCharacters = [ "#", "_", "*", "~", "&", ";", "!", "[", "]", "`", ">", "\n", "=", "-", ]; let _str = str; let i = 0, j = 0; for (i = 0; i < removeCharacters.length; i++) { j = 0; while (j < _..

다음과 같은 경우, Lighthouse에서 적절한 사이즈의 이미지로 렌더링을 권장하는 경고가 뜹니다. 적절한 사이즈로 줄인다면, 이미지를 가져오는 용량과 약 200KiB를 줄일 수 있고, 시간을 14.25s를 줄일 수 있습니다. function Article(props) { function getParametersForUnsplash({ width, height, quality, format }) { return `?w=${width}&h=${height}&q=${quality}&fm=${format}&fit=crop`; } ... return ( ) } 현재 가져온 이미지의 width, height는 각각 1200, 1200인데에 반해 렌더링되는 이미지의 넓이는 120, 120입니다. 다음의 코드에서 ..

기본적으로 HTML, CSS, JS 파일 모두 텍스트로 만들어져있습니다. 이 텍스트들도 용량을 갖고 있는데, 이 용량들도 압축시킨다면 더 빠른 파일 로딩이 가능합니다. 주로 텍스트 압축에 사용하는 방식은 gzip 방식입니다. (Deflate도 있습니다. gzip은 내부적으로 deflate를 사용하면서 deflate 방식에서 조금 더 효율적인 압축을 제공) 다음과 같이 articles API로 불러오는 것에는 Content-Encodinf: gzip 압축 방식이 적용돼있는 걸 확인할 수 있습니다. // package.json { ... "serve": "npm run build && node ./node_modules/serve/bin/serve.js -u -s build", ... } 여기에 있는 옵션들..

import React from "react"; import { Switch, Route } from "react-router-dom"; import "./App.css"; import ListPage from "./pages/ListPage/index"; import ViewPage from "./pages/ViewPage/index"; function App() { return ( ); } export default App; 다음과 같은 코드를 렌더링 하면 크롬에서의 퍼포먼스와 fetching하는 파일들은 다음과 같습니다. 퍼포먼스 앱이 로드 되자마자 ListPage, ViewPage에 관련된 모든 js 파일이 다 업로드 됐습니다. 0.chunk.js의 로딩 시간이 22ms 다음의 상황에서 퍼포먼스 ..

webpack5에서부터는 worker-plugin을 설치하지 않아도 worker-plugin을 이용할 수 있습니다.(자동으로 컴파일) 따라서 직접 worker-plugin을 설치해서 webpack에 적용하면 다음과 같은 에러를 만납니다 Module parse failed: ParserHelpers.addParsedVariableToModule is not a function 따라서 다음과 같이 해줍니다. // 이 라이브러리는 원하는 RPC와 같은 경험을 제공한다. // worker-plugin에 wrap해서 사용 yarn add comlink // App.css body { margin: 0; overflow: hidden; font-size: 3rem; } button { font-size: 1.2re..

DOM(Document Object Model = 문서객체모델) - 자바스크립트가 p, a 태그 등을 조작할 수 있게 만든 트리구조 객체모델 - HTML/CSS DOM JavaScript 가상돔이 필요한 이유 - 매번 document 객체를 이용해서 DOM 내의 태그 등을 가져올 경우 => 렌더링 비용이 큼 렌더링 = '스타일 => 레이아웃 => 페인트 => 합성'의 과정 중 스타일 이후의 과정(레이아웃, 페인트, 합성) 리렌더링 반복 시 => 돔 추가 삭제 등 계산이 계속 발생 => 안좋음 가상돔을 이용한 리액트의 렌더링 - '변화 전 가상돔 변화 후 가상돔' 끼리 비교 => 바뀐 부분만 실제 돔에 적용 레이아웃 계산은 한 번 뿐(일괄 돔 업데이트 방식) 작은 규모의 레이아웃이 여러번 발생(리플로우)보..

// package.json { "name": "esbuild-react", "version": "1.0.0", "main": "index.js", "author": "김기원", "license": "MIT", "scripts": { "build": "rm -rf build && node build.js", "start": "node start.js -w && open http://localhost:3000" }, "devDependencies": { "esbuild": "^0.15.8", "esbuild-plugin-inline-image": "^0.0.8" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" } } // build.js c..

젠킨스 설치 후 젠킨스 시작 brew services start jenkins-lts // 이미 실행됐을 경우 => Service `jenkins-lts` already started, use `brew services restart jenkins-lts` to restart. 젠킨스 MacOS 설치 및 실행 커맨드: https://www.jenkins.io/download/lts/macos/ macOS Installers for Jenkins LTS macOS Installers for Jenkins LTS Homebrew Installer Jenkins can be installed using the Homebrew package manager. Homebrew formula: jenkins-lts ..