fix

daangn · Oct 4, 2024 · cd9cf92 · cd9cf92
1 parent a515e3b
commit cd9cf92
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 13 deletions.
diff --git a/docs/pages/_meta.json b/docs/pages/_meta.json
@@ -2,6 +2,6 @@
   "index": "Stackflow 시작하기",
   "guided-tour": "가이드",
   "advanced": "활용하기",
-  "future-api": "(새 기능) Future API",
+  "future-api": "Future API",
   "plugins": "플러그인"
 }
diff --git a/docs/pages/advanced/fix-use-flow.mdx b/docs/pages/advanced/fix-use-flow.mdx
@@ -2,6 +2,10 @@ import { Callout } from "nextra-theme-docs";
 
 # useFlow 순환참조 해결하기
 
+<Callout type="info" emoji="💡">
+  [Future API](/future-api/introduction)를 사용하면 `useFlow()` 순환참조 문제를 쉽게 해결할 수 있어요. [Future API](/future-api/introduction) 사용을 권장해요. 
+</Callout>
+
 `stackflow()` 함수가 반환하는 `useFlow()` 함수는 선언된 액티비티 타입을 활용해요. 따라서 `useFlow()`와 액티비티 컴포넌트는 서로 맞물리면서 순환 참조(Circular Dependency)를 일으켜요.
 `useActions()` 훅을 사용하고 타입을 따로 `import` 받으면 이러한 순환 참조를 제거할 수 있어요.
 

diff --git a/docs/pages/advanced/preloading.mdx b/docs/pages/advanced/preloading.mdx
@@ -2,6 +2,10 @@ import { Callout } from "nextra-theme-docs";
 
 # 미리 API 호출하기
 
+<Callout type="info" emoji="💡">
+  [Future API](/future-api/introduction)를 사용하면 빌트인 Loader API를 활용해 프리로딩을 더 깔끔하게 구현할 수 있어요. [Future API](/future-api/introduction) 사용을 권장해요.
+</Callout>
+
 ## Preload 플러그인
 
 Preload 플러그인을 통해 미리 액티비티에 필요한 데이터를 가져올 수 있어요.

diff --git a/docs/pages/future-api/_meta.json b/docs/pages/future-api/_meta.json
@@ -1,6 +1,6 @@
 {
-  "introduction": "Future API 소개",
-  "config": "Config",
+  "introduction": "시작하기",
+  "config": "@stackflow/config",
   "changes": "API 변경사항",
   "loader-api": "Loader API",
   "api-pipelining": "API 파이프라이닝"

diff --git a/docs/pages/future-api/api-pipelining-diagram-1.png b/docs/pages/future-api/api-pipelining-diagram-1.png
diff --git a/docs/pages/future-api/api-pipelining.mdx b/docs/pages/future-api/api-pipelining.mdx
@@ -1,6 +1,8 @@
 # API 파이프라이닝
 
-이 모든 변화들이 모여서 API 파이프라이닝을 깔끔한 방법으로 구현할 수 있게 됩니다. 아래와 같이 엔트리 파일에서 리액트 앱 초기화와 API 요청을 동시에 수행해 초기 렌더링까지 걸리는 시간을 단축할 수 있습니다.
+![](./api-pipelining-diagram-1.png)
+
+아래와 같이 엔트리 파일에서 리액트 앱 초기화와 API 요청을 동시에 수행해 초기 렌더링까지 걸리는 시간을 단축할 수 있습니다. Stackflow Future API를 활용하면 API 파이프라이닝을 깔끔한 방법으로 구현할 수 있습니다.
 
 ```typescript
 /**
@@ -43,15 +45,15 @@ export function renderApp({ initialLoaderData }: { initialLoaderData: any }) {
   const root = ReactDOM.createRoot(document.getElementById("root")!);
 
   root.render(
-    // 에러와 로딩 처리는 React에서 가능
-		<ErrorBoundary>
-			<Suspense>
-				{/**
-				  * Stack에 initialLoaderData를 넘겨주면
-				  * 첫번째 loader를 실행시키는 대신 받은 loaderData로 결과를 덮어씁니다
-				  */}
-		    <Stack initialLoaderData={initialLoaderData} />,
-	    </Suspense>
+    // 에러와 로딩 처리는 React에서 가능합니다
+    <ErrorBoundary>
+      <Suspense>
+        {/**
+          * Stack에 initialLoaderData를 넘겨주면
+          * 첫번째 loader를 실행시키는 대신 받은 loaderData로 결과를 덮어씁니다
+          */}
+        <Stack initialLoaderData={initialLoaderData} />,
+      </Suspense>
     </ErrorBoundary>
   );
 }