몽땅뚝딱 개발자

◽ 이미지 포맷 종류 PNG: 무손실 압축 JPG: 압축을 좀 더 하면서 화질이 저하됨 WEBP: jpg 보다 화질과 용량면에서 월등히 좋은 포맷 ◽ 이미지 최적화하기 구글이 Webp를 밀기위해 만든 사이트 Squoosh Simple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files. squoosh.app ◽ webp를 지원하지 않는 브라우저의 경우 ◽ 동영상 최적화하기 포맷을 webm으로 변경하고 용량을 줄인다. 지원하지 않는 브라우저를 고려하여 아래와 같이 사용한다. 출처 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(fea..

◽ 문제상황 동영상이 메인컨텐츠이지만 이미지가 먼저 다운로드되고 여유가 있을 때 동영상이 다운로드 된다. 따라서 그 전에는 pending 된 상태로 렌더링이 되지 않은 화면이 사용자에게 보여진다. 아래와 같은 해결책이 있다. 1. 이미지를 빠르게 다운로드한다. => 하지만 궁극적인 해결방법이 아니다. 2. ⭐️ lazy loading을 사용한다. ◽ lazy loading이란? element가 화면에 보여져야 할 타이밍에 element를 그린다. 이미지가 보여지는 부분까지 스크롤이 되었느냐 되지않았느냐로 판단하기때문에 스크롤 이벤트를 사용한다. ◽ Intersection Observer(=관찰자)의 사용 첫번째 인자는 콜백함수, 두번째 인자는 옵션을 사용한다. boxElement는 Dom Element로..

◽ 코드 스플리팅 덩치가 큰 번들파일을 쪼개서 작은 단위로 만드는 것으로, 페이지 단위 또는 모듈별로 chunk 파일을 쪼개어 로딩속도를 높인다. 불필요한 코드 또는 중복되는 코드 없이 적절한 코드가 적절한 타이밍에 로드 될 수 있도록 한다. 코드 스플리팅은 어떻게 모듈을 그루핑 할 것인지, 어떤 타이밍을 만들지 정해야한다. ◽ 코드 스플리팅하기 웹팩에 코드스플리팅을 위한 설정을 해주어야 한다. [수정 전] import React from 'react' import { Switch, Route } from 'react-router-dom' import './App.css' import ListPage from './pages/ListPage/index' import ViewPage from './page..

◽ Preload이란 필요한 리소스 자원을 서버에 요청할 때 여러자원을 동시에 요청하게 되고, 서버에서는 요청 순서에 상관없이 준비가 되는대로 응답을 하게 된다. 이때 우선순위를 부여하여 특정 리소스를 빠르게 로딩하도록 하는 것이 바로 preload이다. ◽ Preload 타이밍 1. 버튼 위에 마우스를 올려놨을 때 2. 최초페이지 로드 후 모든 컴포넌트의 마운트가 끝났을 때 모달 코드를 미리 로드한다. function App() { const [showModal, setShowModal] = useState(false) // 화면이 렌더링 된 후 특정함수를 실행하는 hook // 미리 import하여 화면이 미리 렌더링 될 수 있도록 한다. useEffect(() => { const Component ..

◽ 컴포넌트 Lazy Loading (Code Splitting) [전] import React, { useState } from 'react' import styled from 'styled-components' import Header from './components/Header' import InfoTable from './components/InfoTable' import SurveyChart from './components/SurveyChart' import Footer from './components/Footer' import ImageModal from './components/ImageModal' function App() { const [showModal, setShowModal] ..

◽ 애니메이션이 왜 버벅일까? 주사율은 초당 60frame이다. 브라우저도 그에 맞춰서 화면을 렌더링하려고 한다. 애니메이션이 버벅이는 이유는 초당 60frame의 화면을 그리지 못하기 때문이다. (=쟁크현상) ◽ 화면이 그려지는 과정 DOM + CSSOM > Render Tree > Layout > Paint > *Composite * Composite: 각 레이어를 합성하는 과정이다. 만약 완성된 화면에서 일부 스타일이 바뀐다면 브라우저는 화면을 이 과정을 다시 거친다. 이를 Reflow라고 하는데 비용이 많이 드는 Layout, Paint 과정을 건너뛰어야 성능이 좋아진다. - width나 height를 변경하는 경우: Reflow (5단계를 모두 재실행) - color, background-col..

◽ 이미지 성능 개선방법 1. 이미지 CDN을 사용 이미지 CDN이란 이미지를 사용자에게 보내기전에 이미지 포맷을 바꾸거나 사이즈를 바꿔 가공 후 전달하는 것으로 이미지 CDN을 사용하는 것이 성능에 좋다. url?src=[image_url]?width=200&height=200 2. unsplash의 사용 getParametersForUnsplash가 이미지 CDN의 역할을 해준다. ◽ 텍스트 압축 텍스트 압축이란 파일을 압축하듯 서버에서 보내는 리소스를 압축해서 서비스해주는 것이다. 네트워크 탭의 파일 중에서 Content-Encoding: gzip을 사용하는 파일을 볼 수 있다. 압축의 알고리즘에는 gzip, Deflate 2가지가 있다. gzip은 2KB를 기준으로 그 이하의 파일은 인코딩을 하지..

◽ 성능 최적화란? 로딩 속도와 렌더링 속도를 높이는 것 [로딩성능 최적화] 1. 이미지사이즈 최적화 2. code split 3. 텍스트 압축: 다양한 html, js 등을 다운받을 때 서버에서 압축해서 다운받으면 조금 더 빠르게 로드될 수 있다. 4. 컴포넌트 Lazy Loading (Code Splitting) 5. 컴포넌트 Preloading 6. 이미지 Preloading [렌더링 성능 최적화] 1. Bottleneck(=병목현상) 코드 최적화: 특정 js 때문에 느려지는 병목현상을 찾아내고 해결하는 방법을 배움 2. 애니메이션 최적화 (Reflow, Repaint) 이미지 지연(lazy) 로딩 Layouy Shift 피하기 useSelect 렌더링 문제 해결 Redux Reselect를 통한 ..