8월 5주차 기록

August 31, 2024 • ☕️ 7 min read

weekly

배워가기

개발자 도구 Block Request URL

테스트를 위해 특정 url 또는 도메인을 block 처리할 수 있다

Ref https://dev-yujin.tistory.com/entry/개발자도구-Block-request-URL-사용하기

React 18 주요 변경사항

Concurrency(동시성)
- 렌더링 중단 가능
  - 업데이트 렌더링을 시작하고, 중간에 일시 정지 후, 나중에 계속할 수 있음
  - UI가 일관되게 나타날 것을 보장하기 위해, 전체 트리가 평가될 때까지 DOM 조작을 연기함
  - 메인스레드를 차단하지 않고 백그라운드에서 새로운 화면을 준비할 수 있어, 대규모 렌더링 작업 중에도 UI가 사용자 입력에 즉각 반응할수 있음
- 재사용 가능한 상태
  - UI의 일부를 화면에서 제거한 후 나중에 다시 추가할 때 이전 상태를 재사용한다.
  - <OffScreen> 이라는 컴포넌트 추가 예정, <Activity>로 이름을 변경하여 개발
Automatic Batching(자동 배칭)
- 기존 방식
  - React 이벤트 핸들러 내부에서만 상태 업데이트가 배칭됨
- 자동 배칭 도입 후
  - Promise, setTimeout, 네이티브 이벤트 핸들러와 같은 다양한 비동기 작업에서도 상태 업데이트를 자동으로 배칭
  - 추가적인 배칭 로직을 작성할 필요 없이 자연스럽게 성능이 향상됨
Transition
- 긴급한(urgent) 업데이트와 긴급하지 않은(non-urgent) 업데이트에 우선순위를 두어 구별함
  - 긴급한 업데이트: 직접적인 상호작용(ex. 유저의 타이핑, 클릭 등 즉각적인 반응이 필요한 경우)
  - 긴급하지 않은 업데이트(=transition updates): UI 전환 등 상대적으로 즉각적인 반응이 필요하지 않아도 되는 경우
- startTransition으로 감싼 업데이트는 긴급하지 않은 것으로 처리되며, 클릭, 키 입력과 같은 더 긴급한 업데이트가 들어오면 중단될 수 있음
- Transition이 사용자에 의해 중단되면, React는 완료되지 않은 오래된 렌더링 작업을 버리고, 최신 업데이트만 렌더링함
  - useTransition: transition을 사용하기 위한 훅
  - startTransition: transition을 사용할 수 있는 API
- 장기적으로는 동시성을 지원하는 라이브러리, 프레임워크에서 사용하게 될 것
Suspense
- 컴포넌트 트리 일부가 아직 표시될 준비가 되지 않은 경우, 해당 부분의 로딩 상태를 선언적으로 지정할 수 있게 함
- React18에서는 서버에서의 Suspense 지원 & 동시성 렌더링 기능과 통합하여 사용 가능
  - 서버 지원: 서버에서 데이터를 fetching하거나 준비할 때, 클라이언트로 HTML을 스트리밍하는 동안 Suspense를 사용하여 로딩 상태를 관리할 수 있음
  - 동시성 렌더링과 통합: transition 중에 컴포넌트를 suspend하면, React는 이미 화면에 보이는 콘텐츠를 fallback UI로 대체하는 대신, 충분한 데이터가 로드될 때까지 렌더링을 지연시켜서 잘못된 로딩 상태가 발생하는 것을 방지
Client, Server Rendering APIs
- React DOM 클라이언트
  1. createRoot
    1. React 18부터 React.render 대신 사용
  2. hydrateRoot
    1. 서버에서 렌더링된 애플리케이션을 hydrate하기 위한 메서드
    2. ReactDOM.hydrate 대신 사용
  - onRecoverableError 옵션
    - 렌더링 및 하이드레이션 중에 React가 오류를 복구할 때 알림을 받을 수 있음
    - createRoot, hydrateRoot 모두에서 사용 가능
- React DOM 서버
  1. renderToPipeableStream
    1. Node 환경에서 스트리밍을 위한 메서드
  2. renderToReadableStream
    1. Deno와 Cloudflare Workers같은 최신 엣지 런타임 환경을 위한 메서드
StrictMode
- 동시성에서 언급한 ‘재사용 가능한 상태’ 를 추가하기 위해 Strict Mode 체크가 도입되었다
- 컴포넌트가 처음 마운트될 때마다 자동으로 모든 컴포넌트를 언마운트하고 다시 마운트하여 이전 상태를 복원하는 과정을 통해, 미래 성능 최적화를 도입할 수 있도록 준비
- React 18 이전
  1. React가 컴포넌트를 마운트
    1. layout effect 생성
    2. 일반 effect 생성
- React 18 이후
  1. React가 컴포넌트를 마운트
    1. layout effect 생성
    2. 일반 effect 생성
  2. React가 컴포넌트를 언마운트하는 것을 시뮬레이션함
    1. layout effect 파기
    2. 일반 effect 파기
  3. React가 컴포넌트를 마운트하는 것을 시뮬레이션함
    1. layout effect 생성
    2. 일반 effect 생성

React 18 추가된 hooks

useId
- 고유한 ID를 생성
  1. hydration 불일치 방지
  2. 고유한 ID 생성의 필요성
  3. 스트리밍 서버 렌더링의 영향
- 리스트의 키를 생성하는 용도로는 사용하지 말것!
  - 리스트의 키는 데이터로부터 생성할 것
  - useId 로 생성된 ID는 컴포넌트가 다시 마운트될 때마다 달라질 수 있다.
useTransition
- 긴급하지 않은 것으로 표시할 수 있게 해준다
- (기본적으로 다른 상태 업데이트는 긴급한 것으로 간주)
  
  Copy
```
const [isPending, startTransition] = useTransition();
```
useDeferredValue
- 긴급하지 않은 부분의 리렌더링을 지연시켜줌
- debounce와 비슷하지만, 고정된 시간 지연이 없어서 첫 번째 렌더링이 화면에 반영된 직후 지연된 렌더링을 시도함
  
  Copy
```
function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  // ... 
}
```
useSyncExternalStore
- 외부 스토어(mobx, redux 등)가 동시(concurrent) 읽기를 지원할 수 있도록 업데이트를 동기화하는 훅
  
  Copy
```
function TodosApp() {
  const [subscribe, getSnapshot] = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);
  // ... 
}
```
- 라이브러리에서 사용되는 hook
useInsertionEffect
- CSS-in-JS 라이브러리들이 렌더링 시 스타일을 주입하는 성능 문제를 해결할 수 있도록 돕는 훅
- layout 을 읽어야하는 Effects가 호출되기 전에 스타일을 주입할 수 있습니다.
  
  Copy
```
// CSS-in-JS 라이브러리 안에서
function useCSS(rule) {
  useInsertionEffect(() => {
    // ... <style> 태그를 여기에서 주입 ...
  });
  return rule;
}
```
- 라이브러리에서 사용되는 hook

React Profiler

React tree의 렌더링 성능을 측정해준다
phase: “mount” | “update” | “nested-update”
- mount: 컴포넌트가 처음 렌더링될 때
- update: prop, state, hook의 변경에 의해 컴포넌트가 리렌더링될 때
actualDuration
- <Profiler>와 그 서브트리가 현재 업데이트를 수행하는 데 걸리는 실제 시간
- subtree가 얼마나 잘 memoization되었는지 측정하기 위해 사용할 수 있다
baseDuration
- 모든 최적화를 제외했을 때 <Profiler>와 그 서브트리가 리렌더링하는 데 걸리는 시간
- 최악의 케이스에서의 렌더링 비용

👩‍🏫 baseDuration - actualDuration 값이 클수록 최적화(메모이제이션)가 잘 되었다는 의미

Ref https://react.dev/reference/react/Profiler

indexedDB

사용자의 브라우저에 데이터를 영구적으로 저장할 수 있는 방법 중 하나
객체 형태로 데이터를 저장할 수 있다.

기본 패턴

데이터베이스를 연다.
객체 저장소(Object store)를 생성한다.
트랜젝션(Transaction)을 시작하고, 데이터를 추가하거나 읽어들이는 등의 데이터베이스 작업을 요청한다.
DOM 이벤트 리스너를 사용하여 요청이 완료될때까지 기다린다.
(요청 객체에서 찾을 수 있는) 결과를 가지고 무언가를 한다.

Ref https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB

react-hook-form

uncontrolled와 controlled 두 가지 방식으로 사용 가능하다.

uncontrolled: register 함수를 사용
controlled: Controller 컴포넌트 사용

postman mockserver

가상 API서버를 제공해 주어 요청과 응답이 실제 처리되는 것처럼 시뮬레이션해 준다.

Ref https://darrenlog.tistory.com/44

vite에서 각 모듈을 처리하는 순서 조회하기

다음 코드를 vite.config.js에 추가한다.

Copy

function logBundleOrder(): Plugin {
  let config: ResolvedConfig
  return {
    name: 'log-bundle-order',
    configResolved(resolvedConfig) {
      config = resolvedConfig
    },
    generateBundle(options, bundle) {
      console.log('Bundle processing order:')
      Object.keys(bundle).forEach((fileName, index) => {
        console.log(`${index + 1}. ${fileName}`)
      })
    },
  }
}