하리하링웹

개요브라우저의 Javascript 엔진은 단일 스레드로 동작한다. 즉 Javascript는 하나의 스레드에서 모든 로직을 순차적으로 실행한다. 여기에는 UI 업데이트 작업도 포함되어있으며 스레드가 하나이기에 UI 업데이트 작업이 있더라도 앞에 다른 작업이 있다면 UI 업데이트가 중단되는 문제가 생기게 된다. React에서는 이러한 UI 업데이트 작업을 최적화기위해 Fiber라는 개념을 도입하였다. Fiber구조 에서 가장 중요한 키워드는 동시성 이며 Fiber는 동시성 스케쥴링을 통해 UI 업데이트 작업에 우선순위를 부여하여 더 높은 우선순위의 경우 먼저 처리해주는 방식으로 동작하도록 만들어주는 역할을 한다.이로 인해 javascript의 UI 업데이트 작업이 더 효율적으로 동작하게 된다.Fiber 알고..

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..