하리하링웹

Support for Document Metadata / stylesheets / async scripts / preloading resourcesSupport for Document Metadata ... 이를 통해 초기 렌더링을 늦출 수 있는 요소들을 우선순위 혹은 설정에 따라 미리 가져오거나 최적화하여 가져와 초기 렌더링을 향상시킬 수 있음주요 기능preinit:초기 로드 시 중요한 스크립트를 미리 로드하여 페이지 로드 시간을 단축preload:폰트, 스타일시트, 이미지 등 다양한 리소스를 미리 로드prefetchDNS:특정 호스트에서 요청이 발생하지 않을 경우에도 DNS fetch를 미리 실행하여 네트워크 지연을 감소preconnect:특정 호스트에 대해 요청이 발생할 가능성이 있지만 ..

일반 공백 (space)과 &nbsp(non-breaking space)는 서로 다른 문자이다. 이로 인해 디버그깅이 어려운 문제가 발생하기도 하고, 코딩할 때 어떤것을 사용해야할 지 헷갈릴 수도 있다. 그렇다면 왜 이 두개를 나눠 놓았을까? 이제부터 알아보도록 하자 특징일반 공백문자 (space)코드: U+0020키보드의 스페이스바를 눌러 생성되는 공백 문자.여러 개의 일반 공백문자는 HTML에서 하나의 공백으로 압축될 수 있다.nbsp (non-breaking space)코드: U+00A0HTML에서   로 표현된다.줄바꿈을 방지하고, 여러 개의 비깨짐 공백문자는 연속해서 표시된다.  위 내용에서 알 수 있듯이 두 종류의 공백은 코드부터 시작해서 표현되는 모양도 다르다. 또한 두 공백의 출력..

프론트엔드에서 측정해야하는 성능 웹을 개발할 때 성능 관련하여 신경써야 하는 부분은 뭐가있을까?아래의 3가지가 가장 중요한 3가지 요소라고 생각하고 있으며 위에서 부터 아래순으로 더욱 중요하다고 봐도 무방할 것 같다.로딩렌더링메모리 로딩FCP(First Contentful Paint): 첫 요소가 로드 될 때까지 걸리는 시간* 로딩바, 텍스트 등FMP(First Meaningful Paint): 의미 있는 첫 요소가 로드 될 때까지 걸리는 시간* 많은 크기를 차지하는 부분 (이미지) , deprecated 되었다고 생각해도 됨LCP(Largest Contentful Paint): 주요 콘텐츠가 로드 될 때까지 걸리는 시간* 뷰포트 내에 있는 가장 큰 이미지, 텍스트의 렌더링 시간 * FMP가 부정확해서 ..

개요웹에서 대용량의 데이터를 보여주는 경우는 어떤 경우가 있을까? 아마 대부분의 경우 긴 리스트 혹은 테이블 형태일것이라고 생각한다. 이런 경우에는 보통 virtualization으로 성능을 최적화 할 수 있지만 개인 프로젝트가 아니라 회사 단위의 프로젝트라면 기획, 기존 코드와의 충돌과 같은 문제로 인해 virtualization과 같은 기법을 사용하지 못하는 경우도 있을 수 있다. 대용량의 데이터를 웹에서 보여주다보면 별 이슈를 다 겪을 수 있는데 이번에 겪은 이슈도 이로 인해 발생한 이슈이다.원인은 redux에서 상태 업데이트 시 구독된 middleware의 코드가 실행되는데 이러한 상태 업데이트를 여러 번 실행할 때 n번 middleware가 실행되었으며 약 5000줄의 행과 각 행에서 몇 개의 ..

Viewport size viewport의 size는 변할 수 있다. 브라우저 창 크기 조절 모바일 가로, 세로, etc.. 키보드 창 켜짐 자바스크립트에서 viewport size를 받는법 document.documentElement.clientWidth; /* 1200 */ window.innerWidth; /* 1200 */ window.outerWidth; /* 1200 */ document.documentElement.clientHeight; /* 800 */ window.innerHeight; /* 800 */ window.outerHeight; /* 900 */ document.documentElement.clientWidth: document의 가로 px값이며 패딩은 포함되지만 마진, 테두..

useTransition useTransition은 React 18버전에서 추가된 동시성을 다를 수 있는 새로운 훅입니다. React의 모든 렌더링은 동기적으로 작동하여 오래걸리는 렌더링 작업이 있으면 유저에게 안좋은 경험을 줄 수 있었지만 useTransition같은 훅을 사용하면 오래걸리는 렌더링 작업에 대해 로딩 화면을 출력하거나 지금 진행중인 렌더링을 버리고 다른 렌더링 과정을 실행하게하는 등 이를 잘 응용한다면 유저 경험을 향상시킬 수 있도록 만들어주는 역할을 할 수 있습니다. [사용법] import { useTransition } from 'react'; function TabContainer() { const [isPending, startTransition] = useTransition()..

React.memo개요 유저들은 반응이 빠른 UI를 선호한다. 100ms 미만의 UI 응답 지연은 유저들이 즉시 느낄 수 있고, 100ms에서 300ms가 지연되면 이미 유저들은 상당한 지연으로 느낀다. UI 성능을 증가시키기 위해, React는 고차 컴퍼넌트 개념인 memo를 제공하며 이는 렌더링 결과를 메모이징(Memoizing)함으로써, 불필요한 리렌더링을 건너뛸수있게 해준다. 컴퍼넌트가 React.memo()로 래핑 될 때, React는 컴퍼넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다. 공식문서에서의 정의 memo(Component, arePropsEqual?) • Co..

React에서 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 re-render되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이번 글에서는 잘 응용하면 대부분의 경우 발생할 수 있는 re-rendering을 방지하는 방법에 대해 작성할 예정이다. React의 memo에 대해 작성할 예정이다. 먼저 아래에 간단한 예시가 있다. import { useState } from 'react'; import { Button } from '@/components/ui'; function LargeComponent() ..

React에서 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 re-render되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이번 글에서는 3.컴포넌트의 Props값이 변경되었을 때 발생할 수 있는 re-rendering을 방지하는 방법에 대해 작성할 예정이다. import { Button } from '@/components/ui'; import { memo, useCallback, useState } from 'react'; function ButtonComponent({ onClick }: { onC..

https://jjongsk.tistory.com/entry/useSWR-%EB%98%91%EB%98%91%ED%95%98%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 useSWR 똑똑하게 사용하기 useSWR이 좋은 라이브러리라고는 이미 널리 알려져 있음에도 불구하고 useSWR에 관련된 대부분의 글들에서 좀 더 다양하게 응용하여 사용하는 방법에 대해 다루는 경우는 많이 보지못했기에 가볍 jjongsk.tistory.com 추가)이 방식대로 코딩을 진행하다가 아주 큰 문제를 발견하였다. 일단 결론적으로 말하면 이러한 방식으로 swr을 사용하지 않는것이 좋다. 아래의 방식대로 swr을 사용하게 되면 해당 key와 일치하는 mutation을 동작하지 않게 해버리는 치명..