yevdev◡̈

이미지 포맷 크기 : PNG > JPG > WEBP 📌 WEBP 구글에서 나옴, 지원하지 않는 브라우저가 꽤 있음 하지만 화질, 용량을 따져봤을 때 JPG보다 좋은 면이 있어서 사용하려는 움직임이 있음! 이것을 이용해서 이미지 사이즈를 최적화 해볼것! 📌 Squoosh.app 구글에서 출시 WEBP를 위한 서비스 홈페이지에 적용해보기 - squoosh를 이용하여 이미지를 webp 확장자로 변경한 뒤, import! 하지만, 앞서 언급했듯이 webp를 지원하지 않는 브라우저가 있다. 이럴 경우, 맨 처음에 webp를 지원하는 브라우저인지 판단하는 작업이 필요하다 태그 이용! 📌 예제 1) : 내가 어떤 환경에서 특정 이미지를 사용하겠다를 명시하기 위한 태그, 여기서는 사이즈에 따라 로드할 이미지가 달라지고..

📌 이미지 지연(Lazy) 로딩 - 스크롤을 했을 때 화면에 특정 요소(이미지)가 뜨는 시점에서만 요소가 로딩되도록 해보자 - 단점 : 스크롤 이벤트를 가진 함수를 너무 많이 사용해서 오히려 성능이 저하될 수 있다 이런 단점을 해결할 방법은 ?! 바로, IntersectionObserver을 사용! 📌 IntersectionObserver - 지정한 특정 요소가 화면에 보여지는지 아닌지 판단 - 화면에 특정 요소가 보여질때 함수를 실행시켜 성능의 이득을 취할 수 있다! let observer = new IntersectionObserver([callback함수], [미리선언한 option]) observer.observe([Dom element]) → callback 함수 : 스크롤을 내리다가 지정된 요..

.. 임시저장 되어있던 이 포스팅.. 모르고 삭제해버려서 다시 쓰는^^.. 예전 글에서 Lazy Loading을 통해 Code Splitting 하는 과정을 기록해놨었다. 이 Lazy Loading에는 단점도 있는데..! Lazy 로딩을 통해 최초 페이지에서는 속도가 빨라졌지만, 이때 로드해두지 않은 특정 컴포넌트를 선택하여 로드해야할 때 다소 느릴 수 있다는 점이다. 이 Lazy로딩의 단점 컴포넌트 Preloading으로 해결해보고자 한다! 🌱 컴포넌트 Preloading? - 말 그대로 컴포넌트를 미리 로딩해 두는 것이다! 그럼 언제 컴포넌트를 미리 로드해야할까? - 두가지 방법이 있다. 컴포넌트를 띄우는 버튼 위에 마우스를 올려 두었을 그 때! 최초 페이지 로드가 되고, 모든 컴포넌트의 마운트가 끝..

저번 포스팅에서는 컴포넌트를 특정 시점에 Preloading 하는 것을 기록했었다. (이후 업로드 예정,, 실수로 삭제해버렸기 때문에^^) [WPO] 컴포넌트 Preloading .. 임시저장 되어있던 이 포스팅.. 모르고 삭제해버려서 다시 쓰는^^.. 예전 글에서 Lazy Loading을 통해 Code Splitting 하는 과정을 기록해놨었다. 이 Lazy Loading에는 단점도 있는데..! Lazy 로딩을 통해 최 yexjinitlog.tistory.com 이번에는 이미지를 Preloading 해보자! Modal 을 선택했을 경우, Modal 내부 이미지들 중에 가장 먼저 뜰 대문사진이 다른 이미지들과 함께 로딩이 되어 느리게 뜨는 것을 경험해본적이 있을 것이다. 이 Modal의 대문? 대표? 사..

지난 포스팅에서 브라우저 렌더링 과정에 대해 설명했었다. 마지막 내용에서 GPU의 도움을 받아서 Repaint, Reflow 를 생략할 수도 있다는 글을 적었는데, 자세히 이번 포스팅에 기록해보고자 한다! 📌 GPU(Graphics Processing Unit)? - 컴퓨터 화면에 이미지를 렌더링하는데 사용되는 처리 📌 GPU가 관여할 수 있는 속성 - transform, opacity 등등.. - 무거운 자바스크립트 코드를 돌리는 대신 이 속성을 사용할 경우, 독립된 스레드 상에서 재생되어 애니메이션이 빠르고 부드럽게 나타날 수 있다. 이제 transform 속성을 이용하여 애니메이션 최적화를 해보겠다! 기존 코드 const Bar = (props) => { return ( {props.percent}..

렌더링 최적화를 위해서 알아야할 개념! 💡 Critical Rendering Path ( = Pixel Pipeline ) Critical Rendering Path (= Pixel Pipeline, = 브라우저 렌더링 과정)은 크게 4가지 프로세스로 진행된다. DOM + CSSOM DOM : 요소들 간의 관계 CSSOM : Style 요소들 Render Tree DOM + CSSOM의 조합 Layout 요소의 위치와 크기 정보를 가지고 레이아웃을 잡음 Paint Layout에 색을 칠해 넣음 Composite 각 Layer들을 합성하는 과정 🌱 Reflow - Critical Rendering Path 과정이 다시 모두 재실행되는 것 🌱 Repaint - color, background-color가 변..

Code Splitting - 말 그대로 코드 분할하기! - Code Splitting을 통해, 불필요한 코드 또는 중복되는 코드가 없이 중복되는 사이즈의 코드가 적절한 타이밍에 로드될 수 있도록 한다. Code Splitting을 하기전에 cra-bundle-analyzer을 사용해보자 📌 cra-bundle-analyzer Webpack을 통해 bundle 된 파일들이 어떤 코드로 구성되어 있는지 확인 가능 cra-bundle-analyzer 라이브러리 설치 및 실행 방법 여기서 image-gallery.js는 모달창을 띄우는 모듈인데, 최초 화면이 렌더링될 때, 굳이 모달창은 렌더링을 할 필요가 없으니 이 모듈을 분리해보자 최적화 이전 코드 import React, { useState } from ..

Lighthouse? - 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구. - 웹, 앱의 품질개선을 위해 성능을 검사해주고 성능 향상을 위한 가이드를 제공 → 추천 : 로딩 성능 최적화를 위한 지표로 활용 → 진단 : 렌더링 성능 최적화를 위한 지표로 활용

원래 하던대로 Redux 상태관리 코드를 짜다가 '아 왜이렇게 폴더가 많아!!!!' '왜이렇게 코드길이가 길어!!!!!' 궁시렁대면서 어찌저찌 store 부터 dispatch까지 구현했는데 데이터를 받아오는 거 처음부터 화면도 안떠서 화가 났었던 오늘.. 그리고 진짜 너무 오랜만에 React 프로젝트를 만들다 보니 Redux를 사용하는데 있어서 부가적으로 필요한 라이브러리들도 골치 아프고 요건 또 뭐야.. 열심히 iOS공부하는 동안.. createStore는 지원도 안하고.. 저걸 어떻게 바꾸지? 하면서 구글링 하던 중,, redux-toolkit에 대해 알게 되는데..! 서론이 길었지만,, 코드도 짧게 할 수 있고 라이브러리도 덜 사용하는 이 redux-toolkit에 대해 포스팅을 시작해보겠당 Red..

진짜 오랜만에,, 반년만에,, create-react-app을 하는데 yarn start 에서 오류 발생 아 어떻게 났더라? 캡처해놓을 걸.. 해결 (Terminal) // (1) npm 일 경우 npm install -g create-react-app // (1) yarn 일 경우