일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 성능최적화
- typescript
- JS console
- javascript
- 타입좁히기
- const 단언문
- 제네릭
- 공통컴포넌트
- NonNullable
- react
- TSDoc
- Chart.js
- 개발콘텐츠
- 커스텀
- 리액트
- 2022
- 누구나 자료구조와 알고리즘
- React.js
- reactjs
- 티스토리꾸미기
- 폰트적용하기
- 레이아웃쪼개기
- 반복줄이기
- React Native
- 타입스크립트
- vue.js
- CSS
- click and drag
- utilty type
- returnType
- Today
- Total
목록전체 (622)
몽땅뚝딱 개발자
◽ 이미지 포맷 종류 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로..
여기서 [캐시 비우기 및 강력 새로고침]을 하니 해결되었다! 출처 idpiframe_initialization_failed 에러 · 쾌락코딩 idpiframe_initialization_failed 에러 25 Jul 2018 | react-google-login social-login chrome 증상 구글 개발자 콘솔에서 앱 등록을 마친 후 react-google-login로 구글 로그인 연동을 시도하던 중, 로그인 버튼을 클릭하면 id wooooooak.github.io
◽ 코드 스플리팅 덩치가 큰 번들파일을 쪼개서 작은 단위로 만드는 것으로, 페이지 단위 또는 모듈별로 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를 통한 ..
놀라움...! https://www.zerocho.com/category/JavaScript/post/5af6f9e707d77a001bb579d2 www.zerocho.com