재안 IT 공부 일기장

[React] useTransition, Concurrent Mode 쉽게 이해하기

개요[1] useTransition[2] concurrent mode[3] useTransition Details[4] reference [1] useTransition useTransitoin이란?  리액트 18에 추가된 훅으로 nonblocking 방식으로 상태(state)를 업데이트할 수 있게 해준다. nonblocking이란?  기존 리액트의 동기적 업데이트 방식에서는 상태가 업데이트되면 그에 따른 렌더링 작업이 바로 실행되는데, 해당 작업이 실행될 때, 사용자의 인터랙션이 발생하면 해당 인터렉션 처리가 지연된다. (blocking)   이때, useTransition의 startTransition을 통해 특정 상태 업데이트를 낮은 우선순위로 예약해 사용자 인터랙션을 우선 순위로 처리하게 된다. ..

[React] useOptimistic 쉽게 이해하기

개요[1] useOptimistic[2] reference [1] useOptimistic useOptimistic이란?  리액트 19 부터 지원하는 훅으로 optimistic update를 쉽게 구현할 수 있도록 해준다. 사용시 Concurrent Mode가 적용되서 nonblocking 방식으로 상태를 업데이트할 수 있다. optimistic update란,  비동기 통신과 같은 대기 상황이 발생했을 때, 결과를 기다리지 않고 기대되는 결과를 미리 UI에 반영하는 기법이다. 실제 결과와 기대된 결과가 다르다면, 롤백과 같은 상황에 맞는 조취를 하면 된다. const [optimisticValue, update] = useOptimistic( state, // updateFn (curr..

[Typescript] node 환경에서 빌드하기 tsconfig.node.json

이전 프로젝트에서 겪었던 특이사항을 기록하려고 한다. 노드환경에서는 빌드가 안되네?  이전 진행했던 프로젝트에서 Git Action을 통해 CI/CD를 수행했다. Git Action의 workflow를 통해 프로젝트를 빌드를 했는데 도중 에러가 발생했다. workflow 실행 중 스크립트에 적었던 `npm run build`에서 에러가 발생했다. 그래서 해당 에러 로그를 시작으로 빌드를 성공할 때까지 리서치하며 tsconfig.node.json의 속성을 하나 하나 바꿨다. 에러가 꼬리에 꼬리를 무는 형식으로 나와서 이에 관련해서 백지인 상태에서도 잘 따라갈 수 있었다. 최종 tsconfig.node.json은 아래와 같다.{ "compilerOptions": { "tsBuildInfoFile": ..