[9팀 임두현] Chapter 4-1 성능 최적화

.gitignore

@@ -25,3 +25,6 @@ dist-ssr
 /test-results/
 /playwright-report/
 /coverage/
+
+
+docs/

package.json

@@ -20,7 +20,7 @@
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:report": "npx playwright show-report",
     "prepare": "husky",
-    "gh-pages": "pnpm run build && gh-pages -d dist"
+    "gh-pages": "pnpm run build && gh-pages -d dist/react"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

packages/lib/src/Router.ts

@@ -36,8 +36,10 @@ export class Router<Handler extends (...args: any[]) => any> {
         return;
       }
       e.preventDefault();
-      const url = target.getAttribute("href") ?? target.closest("[data-link]")?.getAttribute("href");
-      if (url) {
+      const raw = target.getAttribute("href") ?? target.closest("[data-link]")?.getAttribute("href");
+      if (raw) {
+        // baseUrl을 고려하여 절대 경로로 정규화
+        const url = raw.startsWith(this.#baseUrl) ? raw : this.#baseUrl + (raw.startsWith("/") ? raw : "/" + raw);
         this.push(url);
       }
     });
@@ -76,7 +78,7 @@ export class Router<Handler extends (...args: any[]) => any> {
       })
       .replace(/\//g, "\\/");
 
-    const regex = new RegExp(`^${this.#baseUrl}${regexPath}$`);
+    const regex = new RegExp(`^${regexPath}$`);
 
     this.#routes.set(path, {
       regex,
@@ -87,8 +89,11 @@ export class Router<Handler extends (...args: any[]) => any> {
 
   #findRoute(url = window.location.pathname) {
     const { pathname } = new URL(url, window.location.origin);
+    // baseUrl 제거 후 매칭
+    const withoutBase = pathname.startsWith(this.#baseUrl) ? pathname.slice(this.#baseUrl.length) : pathname;
+    const normalized = withoutBase === "" ? "/" : withoutBase;
     for (const [routePath, route] of this.#routes) {
-      const match = pathname.match(route.regex);
+      const match = normalized.match(route.regex);
       if (match) {
         // 매치된 파라미터들을 객체로 변환
         const params: StringRecord = {};
@@ -151,16 +156,23 @@ export class Router<Handler extends (...args: any[]) => any> {
 
   static getUrl = (newQuery: QueryPayload, baseUrl = "") => {
     const currentQuery = Router.parseQuery();
-    const updatedQuery = { ...currentQuery, ...newQuery };
+    const updatedQuery: Record<string, unknown> = { ...currentQuery, ...newQuery };
 
-    // 빈 값들 제거
+    // 빈 값 제거
     Object.keys(updatedQuery).forEach((key) => {
-      if (updatedQuery[key] === null || updatedQuery[key] === undefined || updatedQuery[key] === "") {
+      const value = updatedQuery[key];
+      if (value === null || value === undefined || value === "") {
         delete updatedQuery[key];
       }
     });
 
-    const queryString = Router.stringifyQuery(updatedQuery);
-    return `${baseUrl}${window.location.pathname.replace(baseUrl, "")}${queryString ? `?${queryString}` : ""}`;
+    const queryString = Router.stringifyQuery(updatedQuery as QueryPayload);
+
+    // 경로 정규화: baseUrl 제거 후 항상 슬래시로 시작, 빈 경우 "/"
+    const pathname = window.location.pathname;
+    const withoutBase = pathname.startsWith(baseUrl) ? pathname.slice(baseUrl.length) : pathname;
+    const normalizedPath = withoutBase === "" ? "/" : withoutBase.startsWith("/") ? withoutBase : `/${withoutBase}`;
+
+    return `${baseUrl}${normalizedPath}${queryString ? `?${queryString}` : ""}`;
   };
 }

packages/lib/src/createStorage.ts

@@ -1,6 +1,33 @@
 import { createObserver } from "./createObserver.ts";
 
-export const createStorage = <T>(key: string, storage = window.localStorage) => {
+const createMemoryStorage = (): Storage => {
+  const store = new Map<string, string>();
+  return {
+    get length() {
+      return store.size;
+    },
+    clear() {
+      store.clear();
+    },
+    getItem(key: string) {
+      return store.has(key) ? store.get(key)! : null;
+    },
+    key(index: number) {
+      return Array.from(store.keys())[index] ?? null;
+    },
+    removeItem(key: string) {
+      store.delete(key);
+    },
+    setItem(key: string, value: string) {
+      store.set(key, value);
+    },
+  } as Storage;
+};
+
+export const createStorage = <T>(
+  key: string,
+  storage: Storage = typeof window !== "undefined" ? window.localStorage : createMemoryStorage(),
+) => {
   let data: T | null = JSON.parse(storage.getItem(key) ?? "null");
   const { subscribe, notify } = createObserver();
 

packages/lib/src/hooks/useRouter.ts

@@ -1,11 +1,15 @@
+import { useSyncExternalStore } from "react";
 import type { RouterInstance } from "../Router";
 import type { AnyFunction } from "../types";
-import { useSyncExternalStore } from "react";
 import { useShallowSelector } from "./useShallowSelector";
 
 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>) => {
   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

@@ -1,5 +1,5 @@
-import type { createStore } from "../createStore";
 import { useSyncExternalStore } from "react";
+import type { createStore } from "../createStore";
 import { useShallowSelector } from "./useShallowSelector";
 
 type Store<T> = ReturnType<typeof createStore<T>>;
@@ -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/react/server.js

@@ -1,31 +1,77 @@
 import express from "express";
-import { renderToString } from "react-dom/server";
-import { createElement } from "react";
+import fs from "fs";
 
 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(),
-  );
+const setupMiddlewares = async () => {
+  if (!prod) {
+    const { createServer } = await import("vite");
+    const viteServer = await createServer({
+      server: { middlewareMode: true },
+      appType: "custom",
+      base,
+    });
+    app.use(viteServer.middlewares);
+    return viteServer;
+  }
+  const compression = (await import("compression")).default;
+  app.use(compression());
+  return null;
+};
+
+const viteServer = await setupMiddlewares();
+
+const templateHtml = prod ? fs.readFileSync("./dist/react/index.html", "utf8") : "";
+
+const get = {
+  template: async (viteServer, url) => {
+    if (prod) return templateHtml;
+
+    const rawHtml = fs.readFileSync("./index.html", "utf-8");
+    const transformedHtml = await viteServer.transformIndexHtml(url, rawHtml);
+    return transformedHtml;
+  },
+  render: async (viteServer) => {
+    if (prod) return (await import("./dist/react-ssr/main-server.js")).render;
+    return (await viteServer.ssrLoadModule("/src/main-server.tsx")).render;
+  },
+};
+
+app.use(async (request, response, next) => {
+  try {
+    const accept = request.headers.accept || "";
+    if (!String(accept).includes("text/html")) return next();
+
+    const url = request.originalUrl.replace(base, "");
+
+    const template = await get.template(viteServer, url);
+    const render = await get.render(viteServer);
+    const { head, html, initialData, status = 200 } = await render(url, request.query ?? {});
+
+    const initialDataScript = initialData
+      ? `<script>window.__INITIAL_DATA__=${JSON.stringify(initialData).replace(/</g, "\\u003c")}</script>`
+      : "";
+
+    const finalHtml = template
+      .replace(`<!--app-head-->`, head ?? "")
+      .replace(`<!--app-html-->`, html ?? "")
+      .replace("</head>", `${initialDataScript}</head>`);
+
+    response.status(status).set({ "Content-Type": "text/html" }).send(finalHtml);
+  } catch (error) {
+    response.status(500).end(error.stack);
+  }
 });
 
+if (prod) {
+  const sirv = (await import("sirv")).default;
+  app.use(base, sirv("./dist/react", { extensions: [] }));
+}
+
 // Start http server
 app.listen(port, () => {
   console.log(`React Server started at http://localhost:${port}`);

packages/react/src/api/index.ts

@@ -0,0 +1,16 @@
+import type { Categories, Product } from "../entities";
+import type { StringRecord } from "../types";
+import * as mock from "./mockApi";
+import * as real from "./productApi";
+
+const isSSR = typeof window === "undefined";
+const isDev = typeof import.meta !== "undefined" && import.meta.env && import.meta.env.DEV;
+const useMock = isSSR || !isDev;
+
+export const getProducts = (params: StringRecord = {}) =>
+  useMock ? mock.getProducts(params) : real.getProducts(params);
+
+export const getProduct = (productId: string): Promise<Product> =>
+  useMock ? mock.getProduct(productId) : real.getProduct(productId);
+
+export const getCategories = (): Promise<Categories> => (useMock ? mock.getCategories() : real.getCategories());

packages/react/src/api/mockApi.ts

@@ -0,0 +1,86 @@
+import type { Categories, Product } from "../entities";
+import type { StringRecord } from "../types";
+import items from "../mocks/items.json";
+
+function getUniqueCategories(): Categories {
+  const categories: Record<string, Record<string, string | StringRecord>> = {};
+  (items as unknown as Product[]).forEach((item) => {
+    const cat1 = item.category1;
+    const cat2 = item.category2;
+    if (!categories[cat1]) categories[cat1] = {};
+    if (cat2 && !categories[cat1][cat2]) categories[cat1][cat2] = {};
+  });
+  return categories;
+}
+
+function filterProducts(products: Product[], query: Record<string, string>) {
+  let filtered = [...products];
+
+  if (query.search) {
+    const searchTerm = query.search.toLowerCase();
+    filtered = filtered.filter(
+      (item) => item.title.toLowerCase().includes(searchTerm) || item.brand.toLowerCase().includes(searchTerm),
+    );
+  }
+  if (query.category1) filtered = filtered.filter((item) => item.category1 === query.category1);
+  if (query.category2) filtered = filtered.filter((item) => item.category2 === query.category2);
+
+  switch (query.sort) {
+    case "price_desc":
+      filtered.sort((a, b) => parseInt(b.lprice) - parseInt(a.lprice));
+      break;
+    case "name_asc":
+      filtered.sort((a, b) => a.title.localeCompare(b.title, "ko"));
+      break;
+    case "name_desc":
+      filtered.sort((a, b) => b.title.localeCompare(a.title, "ko"));
+      break;
+    case "price_asc":
+    default:
+      filtered.sort((a, b) => parseInt(a.lprice) - parseInt(b.lprice));
+  }
+  return filtered;
+}
+
+const delay = (ms = 50) => new Promise((r) => setTimeout(r, ms));
+
+export async function getProducts(params: StringRecord = {}) {
+  const { limit = 20, search = "", category1 = "", category2 = "", sort = "price_asc" } = params;
+  const page = Number(params.current ?? params.page ?? 1);
+  const filtered = filterProducts(items as unknown as Product[], { search, category1, category2, sort });
+  const start = (page - 1) * Number(limit);
+  const end = start + Number(limit);
+  const products = filtered.slice(start, end);
+  await delay();
+  return {
+    products,
+    pagination: {
+      page,
+      limit: Number(limit),
+      total: filtered.length,
+      totalPages: Math.ceil(filtered.length / Number(limit)),
+      hasNext: end < filtered.length,
+      hasPrev: page > 1,
+    },
+    filters: { search, category1, category2, sort },
+  };
+}
+
+export async function getProduct(productId: string): Promise<Product> {
+  await delay();
+  const product = (items as unknown as Product[]).find((i) => i.productId === productId);
+  if (!product) throw new Error("Product not found");
+  return {
+    ...product,
+    description: `${product.title}에 대한 상세 설명입니다. ${product.brand} 브랜드의 우수한 품질을 자랑하는 상품으로, 고객 만족도가 높은 제품입니다.`,
+    rating: Math.floor(Math.random() * 2) + 4,
+    reviewCount: Math.floor(Math.random() * 1000) + 50,
+    stock: Math.floor(Math.random() * 100) + 10,
+    images: [product.image, product.image.replace(".jpg", "_2.jpg"), product.image.replace(".jpg", "_3.jpg")],
+  } as Product;
+}
+
+export async function getCategories(): Promise<Categories> {
+  await delay();
+  return getUniqueCategories();
+}

packages/react/src/api/productApi.ts

@@ -1,6 +1,7 @@
 // 상품 목록 조회
 import type { Categories, Product } from "../entities";
 import type { StringRecord } from "../types.ts";
+import { BASE_URL } from "../constants.ts";
 
 interface ProductsResponse {
   products: Product[];
@@ -33,19 +34,19 @@ export async function getProducts(params: StringRecord = {}): Promise<ProductsRe
     sort,
   });
 
-  const response = await fetch(`/api/products?${searchParams}`);
+  const response = await fetch(`${BASE_URL}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(`${BASE_URL}api/products/${productId}`);
   return await response.json();
 }
 
 // 카테고리 목록 조회
 export async function getCategories(): Promise<Categories> {
-  const response = await fetch("/api/categories");
+  const response = await fetch(`${BASE_URL}api/categories`);
   return await response.json();
 }