하리하링웹

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

최근 회사에서 특정 파일 경로를 입력받아, 그 경로와 관련된 파일들의 경로를 의존성에 따라 배열로 반환하는 코드를 개발하는 Job을 받았다. 이 과정에서 Input 값으로 2가지의 정보를 받을 수 있었는데 이는 아래와 같다. 1. 파일 경로 2. parse 옵션(isProduction, isForce) 그리고 회사 repo의 각 project안에는 project의 의존성 관계를 인터페이스화하여 알려주는 .json파일이 platform 별로 @개 만큼 있는 구조였으며 이를 옵션, 의존성, project의 구조별로 잘 조합하여 효과적으로 그리고 문제가 없도록 파싱하는것이 가장 중요한 목표였다. 처음에는 경로를 받아 절차지향형 방식으로 개발을 진행하였다. 어찌저찌 문제없이 돌아가도록 완성은 시켰지만 앞으로의 ..

얼마전에 회사에서 비동기 작업의 시간에 따라 자동으로 로딩 표시를 보여주는 기능을 개발해달라는 요청을 받아 이를 개발하게 되었다. 물론 간단하게 구현할수도 있겠지만 회사 내부의 코딩 룰, 어디서 보기 힘들정도로 큰 저장소 크기, 여러번 요청할수도 있는 비동기 작업 등으로 인해 간단하게 구현하는 방식은 불가능하게 되었다. 이러한 제약조건을 딛고 이를 구현하기 위해, 비동기 작업이 지정된 시간 이상 걸릴 경우 사용자에게 로딩 상태를 알려주는 간단하면서도 효과적인 방법을 고안했다. 이 기능의 핵심은 Promise.race를 사용하여 비동기 작업과 타임아웃을 결합시키는 것이다. 핵심 개념: Promise.race Promise.race는 여러 프로미스 중 가장 먼저 완료되거나 실패하는 프로미스의 결과를 반환한다..

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

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

프론트엔드 개발 직군으로 이직준비를 하며 느낀점에 대한 간단한 글이다. 예전에 약 한 달간 이직을 준비했었는데 이로인해 얻은것이 굉장히 많다고 생각하여 글로 쓰게되었다. 아래는 내가 한달동안의 이직준비와 그 과정에서 얻었다고 생각하는 것들이다. 현재 업계에서 유행하는 기술스택 현재 기업이 원하는 인재 서류작성을 통한 커리어의 방향성 검증 나의 부족한 점 내 코딩 방식에서 잘못된 점 1번 현재 업계에서 유행하는 기술스택 부터 차근차근 말해보자면 일단 현재 대기업들에서 사용하는 프론트엔드 스택들과 내가 사용하는 스택의 차이를 확인할 수 있었다. 이를통해 거의 같은 동작을 하는데 나와는 다른 라이브러리를 기업들이 택한 이유 ex)swr, react-query 제법 유명한데 동작방식을 잘 몰랐던 스택들 ex) ..

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을 동작하지 않게 해버리는 치명..

React에서 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 re-render되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이번 글에서는 2.부모 컴포넌트가 re-render되었을 때 발생할 수 있는 re-rendering을 방지하는 방법에 대해 작성할 예정이다. 간단하게 예시 코드를 보자 import { useState } from 'react'; function BigComponent() { console.log('revaluating'); return complex calculations ; } e..