하리하링웹

immer란React에서 상태의 불변성은 성능에 큰 영향을 미친다. 상태가 불변하게 유지되면 React는 변경된 부분만 효율적으로 다시 렌더링할 수 있기 때문에 성능 최적화가 가능해진다. 하지만 불변성을 수동으로 관리하는 것은 번거로울 수 있는데, 이때 immer 라이브러리는 개발자가 불변성을 유지하는 데 신경을 많이 쓰지 않더라도 이를 쉽게 관리할 수 있도록 도와준다. immer는 프록시(proxy)를 사용하여, 객체나 배열을 직접 수정하는 요청을 가로채어 새로운 객체에서 해당 요청을 작업한다. immer의 핵심 함수인 produce는 두 가지 인자를 받는데, 첫 번째는 원본 상태, 두 번째는 상태를 변경하는 콜백 함수이다. 이 함수 내에서 원본 객체는 수정할 수 있는 것처럼 보이지만, 실제로는 프록시..

개발 목표현재 회사의 테스트 코드는 작성은 잘 되어 있지만 이를 실행하는 환경이 너무 느려 모든 테스트를 한 번 실행하는데 수십분 길면 한 시간이 넘는 시간이 걸린다. 심지어 제대로 전역으로 테스트를 실행하는 로직도 없어 사실상 유닛 테스트를 여러 번 실행하는 느낌으로 동작하고 있다. 약 1~2주 정도 타임라인을 잡고 단위 테스트, 전체 테스트를 빠르게, 테스트 코드 개발자가 편하게 작성할 수 있도록 하는것이 목표로 개발을 진행할 예정이다. 아래는 기획, 설계에 앞서 정리한 개발 요구사항이다.CLI로 실행 가능해야한다. ex)ecDev testRun —path테스트 파일에서 F6과 같이 shorcut 입력 시 동작해야한다.백그라운드에 테스트를 위한 웹 서버 실행스토리북 서버: 스토리북 UI에서 단순 클릭..

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

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

개요프론트엔드에서 애니메이션을 구현할 때 CSS를 사용하는 방법을 주로 사용하지만 Javascript를 사용하는 방법도 있다. 물론 CSS에 비해 Javascript는 성능이 떨어지지만 모든것을 CSS로 해결할수 는 없기에 Javascript 를 사용해야만 하는 경우가 있으며 requestAnimationFrame Javascript로 애니메이션을 구현할 때 성능과 UX를 최적화 하기에 좋은 함수이다. requestAnimationFrame는 사용시에 브라우저에게 작업의 실행을 알려주며 내부적으로  requestAnimationFrame 전용 queue에 해당 작업을 집어넣는다.이후 해당 작업은 대기하고 있다가 다음 repaint 작업 전에 해당 큐의 작업을 처리해주는 방식으로 동작한다.  이를통해 re..

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

javascript에서 Code splitting을 해서 Dynamic하게 import를 진행할 때에 주의해야 할 점이 있다. 이 글에서는 Next.JS의 dynamic을 사용하여 예를들어 설명해보겠다. import dynamic from 'next/dynamic'; import { useState } from 'react'; import { Button } from '@/components/ui'; const DynamicComponent = dynamic(() => import('@/components/test/DynamicComponent')); export default function TestPage() { const [isRender, setIsRender] = useState(false); ..