[1팀 주산들] Chapter 4-1 성능 최적화

packages/lib/src/ServerRouter.ts

@@ -0,0 +1,116 @@
+import type { AnyFunction, StringRecord } from "./types";
+
+export type ServerRoute<Handler extends AnyFunction> = Route<Handler>;
+
+interface Route<Handler extends AnyFunction> {
+  regex: RegExp;
+  paramNames: string[];
+  handler: Handler;
+  params?: StringRecord;
+}
+
+type QueryPayload = Record<string, string | number | undefined>;
+
+export type ServerRouterInstance<T extends AnyFunction> = InstanceType<typeof ServerRouter<T>>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class ServerRouter<Handler extends (...args: any[]) => any> {
+  readonly #routes: Map<string, Route<Handler>>;
+  query: StringRecord = {};
+
+  #route: null | (Route<Handler> & { params: StringRecord; path: string });
+
+  constructor() {
+    this.#routes = new Map();
+    this.#route = null;
+  }
+
+  get params() {
+    return this.#route?.params ?? {};
+  }
+
+  get route() {
+    return this.#route;
+  }
+
+  get target() {
+    return this.#route?.handler;
+  }
+
+  addRoute(path: string, handler: Handler) {
+    // 경로 패턴을 정규식으로 변환
+    const paramNames: string[] = [];
+    const regexPath = path
+      .replace(/:\w+/g, (match) => {
+        paramNames.push(match.slice(1)); // ':id' -> 'id'
+        return "([^/]+)";
+      })
+      .replace(/\//g, "\\/");
+
+    const regex = new RegExp(`^${regexPath}$`);
+
+    this.#routes.set(path, {
+      regex,
+      paramNames,
+      handler,
+    });
+  }
+
+  #findRoute(url: string) {
+    console.log("url", url);
+    const { pathname } = new URL(url, "http://localhost");
+    console.log("pathname", pathname);
+
+    for (const [routePath, route] of this.#routes) {
+      const match = pathname.match(route.regex);
+      if (match) {
+        // 매치된 파라미터들을 객체로 변환
+        const params: StringRecord = {};
+        route.paramNames.forEach((name, index) => {
+          params[name] = match[index + 1];
+        });
+
+        return {
+          ...route,
+          params,
+          path: routePath,
+        };
+      }
+    }
+    return null;
+  }
+
+  push() {}
+
+  start(url = "/") {
+    this.#route = this.#findRoute(url);
+    console.log("this.target", this.target);
+  }
+
+  static parseQuery = (search = "") => {
+    const params = new URLSearchParams(search);
+    const query: StringRecord = {};
+    for (const [key, value] of params) {
+      query[key] = value;
+    }
+    return query;
+  };
+
+  static stringifyQuery = (query: QueryPayload) => {
+    const params = new URLSearchParams();
+    for (const [key, value] of Object.entries(query)) {
+      if (value !== null && value !== undefined && value !== "") {
+        params.set(key, String(value));
+      }
+    }
+    return params.toString();
+  };
+
+  static getUrl = () => {
+    return "";
+  };
+
+  subscribe() {
+    return () => {};
+  }
+}

packages/lib/src/createStorage.ts

@@ -1,6 +1,22 @@
 import { createObserver } from "./createObserver.ts";
 
-export const createStorage = <T>(key: string, storage = window.localStorage) => {
+const memoryStorage = () => {
+  const state: Record<string, string> = {};
+  return {
+    getItem: (key: string) => state[key],
+    setItem: (key: string, value: string) => {
+      state[key] = value;
+    },
+    removeItem: (key: string) => {
+      delete state[key];
+    },
+  };
+};
+
+export const createStorage = <T>(
+  key: string,
+  storage = typeof window !== "undefined" ? window.localStorage : memoryStorage(),
+) => {
   let data: T | null = JSON.parse(storage.getItem(key) ?? "null");
   const { subscribe, notify } = createObserver();
 

packages/lib/src/hooks/useRouter.ts

@@ -2,10 +2,18 @@ import type { RouterInstance } from "../Router";
 import type { AnyFunction } from "../types";
 import { useSyncExternalStore } from "react";
 import { useShallowSelector } from "./useShallowSelector";
+import type { ServerRouterInstance } from "../ServerRouter";
 
 const defaultSelector = <T, S = T>(state: T) => state as unknown as S;
 
-export const useRouter = <T extends RouterInstance<AnyFunction>, S>(router: T, selector = defaultSelector<T, S>) => {
+type RouterType = RouterInstance<AnyFunction> | ServerRouterInstance<AnyFunction>;
+
+export const useRouter = <T extends RouterType, S>(router: T, selector = defaultSelector<T, S>) => {
   const shallowSelector = useShallowSelector(selector);
-  return useSyncExternalStore(router.subscribe, () => shallowSelector(router));
+
+  return useSyncExternalStore(
+    router.subscribe,
+    () => shallowSelector(router),
+    () => shallowSelector(router),
+  );
 };

packages/lib/src/hooks/useStorage.ts

@@ -4,5 +4,5 @@ import type { createStorage } from "../createStorage";
 type Storage<T> = ReturnType<typeof createStorage<T>>;
 
 export const useStorage = <T>(storage: Storage<T>) => {
-  return useSyncExternalStore(storage.subscribe, storage.get);
+  return useSyncExternalStore(storage.subscribe, storage.get, storage.get);
 };

packages/lib/src/hooks/useStore.ts

@@ -8,5 +8,9 @@ const defaultSelector = <T, S = T>(state: T) => state as unknown as S;
 
 export const useStore = <T, S = T>(store: Store<T>, selector: (state: T) => S = defaultSelector<T, S>) => {
   const shallowSelector = useShallowSelector(selector);
-  return useSyncExternalStore(store.subscribe, () => shallowSelector(store.getState()));
+  return useSyncExternalStore(
+    store.subscribe,
+    () => shallowSelector(store.getState()),
+    () => shallowSelector(store.getState()),
+  );
 };

packages/lib/src/index.ts

@@ -2,6 +2,7 @@ export * from "./createObserver";
 export * from "./createStorage";
 export * from "./createStore";
 export * from "./Router";
+export * from "./ServerRouter";
 export { useStore, useStorage, useRouter, useAutoCallback } from "./hooks";
 export * from "./equals";
 export * from "./types";

packages/react/package.json

@@ -13,7 +13,7 @@
     "build:client-for-ssg": "rm -rf ../../dist/react && vite build --outDir ../../dist/react",
     "build:server": "vite build --outDir ./dist/react-ssr --ssr src/main-server.tsx",
     "build:without-ssg": "pnpm run build:client && npm run build:server",
-    "build:ssg": "pnpm run build:client-for-ssg && node static-site-generate.js",
+    "build:ssg": "pnpm run build:client-for-ssg && NODE_ENV=production node static-site-generate.js",
     "build": "npm run build:client && npm run build:server && npm run build:ssg",
     "preview:csr": "vite preview --outDir ./dist/react --port 4175",
     "preview:csr-with-build": "pnpm run build:client && pnpm run preview:csr",
@@ -24,33 +24,35 @@
     "serve:test": "pnpm run build:without-ssg && pnpm run build:ssg && (pnpm run dev & pnpm run dev:ssr & pnpm run preview:csr & pnpm run preview:ssr & pnpm run preview:ssg)",
     "tsc": "tsc --noEmit",
     "lint:fix": "eslint --fix ./src",
-    "prettier:write": "prettier --write ./src"
+    "prettier:write": "prettier --write ./src",
+    "deploy": "pnpm run build && npx gh-pages -d dist/react --dest react"
   },
   "dependencies": {
+    "@hanghae-plus/lib": "workspace:*",
     "react": "latest",
-    "react-dom": "latest",
-    "@hanghae-plus/lib": "workspace:*"
+    "react-dom": "latest"
   },
   "devDependencies": {
     "@babel/core": "latest",
     "@babel/plugin-transform-react-jsx": "latest",
     "@eslint/js": "^9.16.0",
+    "@types/node": "^24.0.13",
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "@types/use-sync-external-store": "latest",
     "@vitejs/plugin-react": "latest",
-    "@types/node": "^24.0.13",
+    "compression": "^1.7.5",
     "eslint": "^9.9.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "express": "^5.1.0",
+    "gh-pages": "^6.3.0",
     "msw": "^2.10.2",
     "prettier": "^3.4.2",
+    "sirv": "^3.0.0",
     "typescript": "^5.8.3",
-    "vite": "npm:rolldown-vite@latest",
-    "express": "^5.1.0",
-    "compression": "^1.7.5",
-    "sirv": "^3.0.0"
+    "vite": "npm:rolldown-vite@latest"
   }
 }

packages/react/server.js

@@ -1,32 +1,60 @@
 import express from "express";
-import { renderToString } from "react-dom/server";
-import { createElement } from "react";
+import compression from "compression";
+import sirv from "sirv";
+import { createServer as createViteServer } from "vite";
+import { readFileSync } from "fs";
+import { mswServer } from "./src/mocks/node.js";
 
 const prod = process.env.NODE_ENV === "production";
 const port = process.env.PORT || 5174;
 const base = process.env.BASE || (prod ? "/front_6th_chapter4-1/react/" : "/");
 
 const app = express();
 
-app.get("*all", (req, res) => {
-  res.send(
-    `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>React SSR</title>
-</head>
-<body>
-<div id="app">${renderToString(createElement("div", null, "안녕하세요"))}</div>
-</body>
-</html>
-  `.trim(),
+mswServer.listen({ onUnhandledRequest: "bypass" });
+
+let vite;
+if (!prod) {
+  vite = await createViteServer({
+    server: { middlewareMode: true },
+    appType: "custom",
+    base,
+  });
+  app.use(vite.middlewares);
+} else {
+  app.use(compression());
+  app.use(
+    base,
+    sirv("./dist/react", {
+      extensions: [],
+    }),
   );
+}
+
+async function importModule(path) {
+  if (!prod) {
+    return await vite.ssrLoadModule(`/src/${path}`);
+  } else {
+    return await import(`./dist/react-ssr/${path}`);
+  }
+}
+
+app.use("*all", async (req, res) => {
+  // TODO: render 를 import 더 잘해보기
+  const { render } = await importModule("main-server.js");
+  const { html, head, initialData } = await render(req.originalUrl.replace(base, ""), req.query);
+
+  const template = prod ? readFileSync("./dist/react/index.html", "utf-8") : readFileSync("./index.html", "utf-8");
+  const initialDataScript = `<script>window.__INITIAL_DATA__ = ${JSON.stringify(initialData)};</script>`;
+
+  const finalHtml = template
+    .replace("<!--app-head-->", head)
+    .replace("<!--app-html-->", html)
+    .replace("</head>", `${initialDataScript}</head>`);
+
+  res.send(finalHtml);
 });
 
-// Start http server
 app.listen(port, () => {
   console.log(`React Server started at http://localhost:${port}`);
 });

packages/react/src/App.tsx

@@ -1,13 +1,7 @@
-import { router, useCurrentPage } from "./router";
-import { HomePage, NotFoundPage, ProductDetailPage } from "./pages";
+import { useCurrentPage } from "./router";
 import { useLoadCartStore } from "./entities";
 import { ModalProvider, ToastProvider } from "./components";
 
-// 홈 페이지 (상품 목록)
-router.addRoute("/", HomePage);
-router.addRoute("/product/:id/", ProductDetailPage);
-router.addRoute(".*", NotFoundPage);
-
 const CartInitializer = () => {
   useLoadCartStore();
   return null;

packages/react/src/api/productApi.ts

@@ -1,6 +1,15 @@
 // 상품 목록 조회
 import type { Categories, Product } from "../entities";
 import type { StringRecord } from "../types.ts";
+import { isServer } from "../utils/ssrUtils.ts";
+
+const withBaseUrl = (url: string) => {
+  if (isServer()) {
+    return `http://localhost:${process.env.PORT ?? 5174}${url}`;
+  }
+
+  return `${url}`;
+};
 
 interface ProductsResponse {
   products: Product[];
@@ -33,19 +42,19 @@ export async function getProducts(params: StringRecord = {}): Promise<ProductsRe
     sort,
   });
 
-  const response = await fetch(`/api/products?${searchParams}`);
+  const response = await fetch(`${withBaseUrl(`/api/products?${searchParams}`)}`);
 
   return await response.json();
 }
 
 // 상품 상세 조회
 export async function getProduct(productId: string): Promise<Product> {
-  const response = await fetch(`/api/products/${productId}`);
+  const response = await fetch(`${withBaseUrl(`/api/products/${productId}`)}`);
   return await response.json();
 }
 
 // 카테고리 목록 조회
 export async function getCategories(): Promise<Categories> {
-  const response = await fetch("/api/categories");
+  const response = await fetch(`${withBaseUrl("/api/categories")}`);
   return await response.json();
 }

packages/react/src/entities/products/components/ProductDetail.tsx

@@ -1,17 +1,18 @@
 import { useState } from "react";
-import { router } from "../../../router";
 import type { StringRecord } from "../../../types";
 import type { Product } from "../types";
 import { PublicImage } from "../../../components";
 import RelatedProducts from "./RelatedProducts";
 import { useCartAddCommand } from "../../carts";
 import { log } from "../../../utils";
+import { useRouterContext } from "../../../router/hooks/useRouterContext";
 
 export function ProductDetail(product: Readonly<Product>) {
   log(`ProductDetail: ${product.productId}`);
   const addToCart = useCartAddCommand();
   const { productId, title, image, lprice, brand, category1, category2 } = product;
   const [cartQuantity, setCartQuantity] = useState(1);
+  const router = useRouterContext();
 
   const description = "",
     rating = 0,