add: 306, 307

src/content/memo/306.md

@@ -0,0 +1,9 @@
+---
+tags: ['nextjs']
+status: draft
+ctime: 2024-06-24
+mtime: 2024-06-24
+---
+
+- https://github.com/vercel/next.js/blob/16cf88e569552fe5060f1d28a657b749b967528d/packages/next/src/client/route-loader.ts#L121-L150
+- https://github.com/webpack-contrib/mini-css-extract-plugin/blob/3df97b62778fc4586c5198b9f3a447dc65979529/src/index.js#L947

src/content/memo/307.md

@@ -0,0 +1,24 @@
+---
+tags: ['react', 'suspense']
+status: release
+ctime: 2024-06-24
+mtime: 2024-06-24
+---
+
+```ts
+if (!data) {
+  throw fetch()
+}
+```
+
+1. 컴포넌트가 렌더링될 때, 비동기 작업(예: 데이터 패칭)이 시작됩니다. 이 작업은 일반적으로 promise를 반환합니다.
+2. 비동기 작업이 완료되지 않은 경우, 컴포넌트는 promise를 던집니다. 이는 JavaScript에서 예외를 던지는 것과 유사합니다. Suspense는 promise가 던져질 때 이를 캐치하고 fallback UI를 표시하는 역할을 합니다.
+3. React는 컴포넌트가 promise를 던졌을 때 이를 감지하고, Suspense 컴포넌트에서 이를 "캐치"합니다. Suspense는 이 promise가 해결될 때까지 대체 UI (fallback)를 렌더링합니다. Concurrent Mode에서는 React가 이 promise를 추적하고, 비동기 작업이 완료될 때까지 렌더링을 중단합니다.
+4. Promise가 해결되면(즉, 비동기 작업이 완료되면) React는 컴포넌트를 다시 렌더링합니다. Suspense는 현재 데이터 패칭 라이브러리(예: React Query, SWR)와 함께 사용되어 비동기 작업의 상태를 쉽게 관리할 수 있도록 도와줍니다.
+
+---
+
+- https://github.com/facebook/react/blob/main/packages/react/src/ReactLazy.js#L119C19-L119C26
+- https://github.com/TanStack/query/blob/main/packages/react-query/src/suspense.ts#L62
+- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/throw
+- https://jser.pro/ddir/rie?reactVersion=18.3.1&codeKey=ud62nsxll29yy0dzba8