Refactor : 코드 리팩토링

Author: tooth-is-silver

packages/vanilla/server.js

@@ -1,19 +1,16 @@
 import compression from "compression";
 import express from "express";
-import fs from "fs";
+import fs from "fs/promises";
 import sirv from "sirv";
 import { mswServer } from "./src/mocks/serverBrowser.js";
 
 // 환경 변수 및 설정
 const isProd = process.env.NODE_ENV === "production";
 const port = process.env.PORT || 5173;
 const baseUrl = process.env.BASE || (isProd ? "/front_6th_chapter4-1/vanilla/" : "/");
-const templateHtml = isProd ? fs.readFileSync("dist/vanilla/index.html", "utf-8") : "";
+const templateHtml = isProd ? await fs.readFile("dist/vanilla/index.html", "utf-8") : "";
 const app = express();
 
-// 런타임에 결정되는 변수들 (개발/프로덕션 환경에 따라 달라짐)
-let template;
-let render;
 let vite;
 
 // MSW 서버 시작 (API 모킹을 위해)
@@ -39,8 +36,11 @@ if (isProd) {
 }
 
 // 모든 라우트를 처리하는 SSR 핸들러
-app.get("*all", async (req, res) => {
+app.get(/^(?!.*\/api).*/, async (req, res) => {
   try {
+    let template;
+    let render;
+
     if (!isProd) {
       // 개발 환경: 매 요청마다 템플릿을 다시 읽고 변환
       template = await fs.readFile("./index.html", "utf-8");

packages/vanilla/src/lib/createServerStorage.js

@@ -1,9 +1,14 @@
+/**
+ * 서버 환경용 메모리 스토리지 - localStorage API와 동일한 인터페이스 제공
+ * @returns {Object} localStorage와 호환되는 메서드를 가진 객체
+ */
 export const createServerStorage = () => {
   const storage = new Map();
 
   return {
     getItem: (key) => storage.get(key),
     setItem: (key, value) => storage.set(key, value),
     removeItem: (key) => storage.delete(key),
+    clear: () => storage.clear(),
   };
 };

packages/vanilla/src/lib/createStorage.js

@@ -1,10 +1,14 @@
+import { createServerStorage } from "./createServerStorage.js";
 /**
  * 환경별 스토리지 추상화 함수 - 브라우저/서버 환경에서 동일한 인터페이스 제공
  * @param {string} key - 스토리지 키 (예: "cart", "user-preferences")
  * @param {Storage} storage - 스토리지 구현체 (기본값: 환경별 자동 선택)
  * @returns {Object} { get, set, reset } 스토리지 조작 메서드들
  */
-export const createStorage = (key, storage = typeof window === "undefined" ? memoryStorage() : window.localStorage) => {
+export const createStorage = (
+  key,
+  storage = typeof window === "undefined" ? createServerStorage() : window.localStorage,
+) => {
   // 데이터 조회
   const get = () => {
     try {
@@ -36,18 +40,3 @@ export const createStorage = (key, storage = typeof window === "undefined" ? mem
 
   return { get, set, reset };
 };
-
-/**
- * 서버 환경용 메모리 스토리지 - localStorage API와 동일한 인터페이스 제공
- * @returns {Object} localStorage와 호환되는 메서드를 가진 객체
- */
-const memoryStorage = () => {
-  const storage = new Map(); // 메모리 내 데이터 저장소
-
-  return {
-    getItem: (key) => storage.get(key),
-    setItem: (key, value) => storage.set(key, value),
-    removeItem: (key) => storage.delete(key),
-    clear: () => storage.clear(),
-  };
-};

packages/vanilla/src/main-server.js

@@ -17,20 +17,8 @@ router.addRoute(".*", NotFoundPage);
  */
 export const render = async (url = "", query) => {
   try {
-    // URL 정규화: 베이스 URL이 포함된 경우 제거
-    const baseUrl = "/front_6th_chapter4-1/vanilla/";
-    let normalizedUrl = url;
-
-    if (url.includes(baseUrl)) {
-      normalizedUrl = url.replace(baseUrl, "/");
-      if (normalizedUrl === "/") normalizedUrl = "/";
-    } else if (url === baseUrl.slice(0, -1)) {
-      // 마지막 슬래시 없는 경우
-      normalizedUrl = "/";
-    }
-
     // 서버사이드 라우터 시작
-    router.start(normalizedUrl, query);
+    router.start(url, query);
 
     const route = router.route;
     if (!route) {

packages/vanilla/src/main.js

@@ -17,18 +17,62 @@ const enableMocking = () =>
     }),
   );
 
-function main() {
-  // 서버 데이터 복원
-  if (window.__INITIAL_DATA__) {
-    const data = window.__INITIAL_DATA__;
-    if (data.products) productStore.dispatch(PRODUCT_ACTIONS.SETUP, data);
-    if (data.currentProduct) productStore.dispatch(PRODUCT_ACTIONS.SET_CURRENT_PRODUCT, data);
-    delete window.__INITIAL_DATA__;
+// SSR 데이터를 클라이언트 스토어에 hydrate
+function hydrateFromSSRData() {
+  if (typeof window === "undefined" || !window.__INITIAL_DATA__) {
+    return;
+  }
+
+  try {
+    const initialData = window.__INITIAL_DATA__;
+
+    const currentPath = window.location.pathname;
+
+    // 홈페이지 hydration
+    if (currentPath === "/" && initialData.products) {
+      productStore.dispatch({
+        type: PRODUCT_ACTIONS.SETUP,
+        payload: {
+          products: initialData.products || [],
+          totalCount: initialData.totalCount || 0,
+          categories: initialData.categories || {},
+          currentProduct: null,
+          relatedProducts: [],
+          loading: false,
+          error: null,
+          status: "done",
+        },
+      });
+    }
+    // 상품 상세 페이지 hydration
+    else if (currentPath.includes("/product/") && initialData.product) {
+      productStore.dispatch({
+        type: PRODUCT_ACTIONS.SETUP,
+        payload: {
+          products: [],
+          totalCount: 0,
+          categories: {},
+          currentProduct: initialData.product,
+          relatedProducts: initialData.relatedProducts || [],
+          loading: false,
+          error: null,
+          status: "done",
+        },
+      });
+    }
+
+    // hydration 완료 플래그
+    window.__HYDRATED__ = true;
+  } catch (error) {
+    console.error("❌ SSR hydration 실패", error);
   }
+}
 
+function main() {
   registerAllEvents();
   registerGlobalEvents();
   loadCartFromStorage();
+  hydrateFromSSRData();
   initRender();
   router.start();
 }

packages/vanilla/src/mocks/handlers.js

@@ -63,8 +63,8 @@ function filterProducts(products, query) {
 }
 
 export const handlers = [
-  // 상품 목록 API (상대 경로)
-  http.get("/api/products", async ({ request }) => {
+  // 상품 목록 API
+  http.get("*/api/products", async ({ request }) => {
     const url = new URL(request.url);
     const page = parseInt(url.searchParams.get("page") ?? url.searchParams.get("current")) || 1;
     const limit = parseInt(url.searchParams.get("limit")) || 20;
@@ -111,7 +111,7 @@ export const handlers = [
   }),
 
   // 상품 상세 API
-  http.get("/api/products/:id", ({ params }) => {
+  http.get("*/api/products/:id", ({ params }) => {
     const { id } = params;
     const product = items.find((item) => item.productId === id);
 
@@ -133,76 +133,7 @@ export const handlers = [
   }),
 
   // 카테고리 목록 API
-  http.get("/api/categories", async () => {
-    const categories = getUniqueCategories();
-    await delay();
-    return HttpResponse.json(categories);
-  }),
-
-  // 절대 URL 패턴도 처리 (SSG용)
-  http.get("http://localhost:5174/api/products", async ({ request }) => {
-    const url = new URL(request.url);
-    const page = parseInt(url.searchParams.get("page") ?? url.searchParams.get("current")) || 1;
-    const limit = parseInt(url.searchParams.get("limit")) || 20;
-    const search = url.searchParams.get("search") || "";
-    const category1 = url.searchParams.get("category1") || "";
-    const category2 = url.searchParams.get("category2") || "";
-    const sort = url.searchParams.get("sort") || "price_asc";
-
-    const filteredProducts = filterProducts(items, {
-      search,
-      category1,
-      category2,
-      sort,
-    });
-
-    const startIndex = (page - 1) * limit;
-    const endIndex = startIndex + limit;
-    const paginatedProducts = filteredProducts.slice(startIndex, endIndex);
-
-    const response = {
-      products: paginatedProducts,
-      pagination: {
-        page,
-        limit,
-        total: filteredProducts.length,
-        totalPages: Math.ceil(filteredProducts.length / limit),
-        hasNext: endIndex < filteredProducts.length,
-        hasPrev: page > 1,
-      },
-      filters: {
-        search,
-        category1,
-        category2,
-        sort,
-      },
-    };
-
-    await delay();
-    return HttpResponse.json(response);
-  }),
-
-  http.get("http://localhost:5174/api/products/:id", ({ params }) => {
-    const { id } = params;
-    const product = items.find((item) => item.productId === id);
-
-    if (!product) {
-      return HttpResponse.json({ error: "Product not found" }, { status: 404 });
-    }
-
-    const detailProduct = {
-      ...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")],
-    };
-
-    return HttpResponse.json(detailProduct);
-  }),
-
-  http.get("http://localhost:5174/api/categories", async () => {
+  http.get("*/api/categories", async () => {
     const categories = getUniqueCategories();
     await delay();
     return HttpResponse.json(categories);

…kages/vanilla/src/mocks/serverBrowser.js packages/vanilla/src/mocks/mswServer.jspackages/vanilla/src/mocks/serverBrowser.js renamed to packages/vanilla/src/mocks/mswServer.js packages/vanilla/src/mocks/serverBrowser.js renamed to packages/vanilla/src/mocks/mswServer.js

@@ -239,12 +239,14 @@ export const ProductDetailPage = withLifecycle(
     onMount: () => {
       // SSG 서버 실행
       if (typeof window !== "undefined") {
-        const { currentProduct, status } = productStore.getState();
-        const productId = router.params.id;
-        // Hydration된 데이터가 있으면 API 호출 스킵
-        if (window.__HYDRATED__ && currentProduct && currentProduct.productId === productId && status === "done") {
-          console.log("✅ SSR 데이터 이미 있어서 API 요청 스킵");
-          return;
+        if (window.__HYDRATED__) {
+          const { currentProduct, status } = productStore.getState();
+          const productId = router.params.id;
+          // Hydration된 데이터가 있으면 API 호출 스킵
+          if (currentProduct && currentProduct.productId === productId && status === "done") {
+            console.log("✅ SSR 데이터 이미 있어서 API 요청 스킵");
+            return;
+          }
         }
 
         loadProductDetailForPage(router.params.id);

packages/vanilla/src/pages/ProductDetailPage.js

@@ -2,4 +2,4 @@
 import { Router, ServerRouter } from "../lib";
 import { BASE_URL } from "../constants.js";
 
-export const router = typeof window === "undefined" ? new ServerRouter("") : new Router(BASE_URL);
+export const router = typeof window !== "undefined" ? new Router(BASE_URL) : new ServerRouter(BASE_URL);

packages/vanilla/src/router/router.js

@@ -1,12 +1,14 @@
 // SSG(Static Site Generation) 스크립트
 // 홈페이지와 상품 상세 페이지를 미리 생성하여 정적 파일로 저장
 import fs from "fs/promises";
-import { mswServer } from "./src/mocks/serverBrowser.js";
+import { mswServer } from "./src/mocks/mswServer.js";
 import items from "./src/mocks/items.json" with { type: "json" };
 
 // 서버 사이드 렌더링 함수 가져오기
 const { render } = await import("./dist/vanilla-ssr/main-server.js");
 
+const BASE = "/front_6th_chapter4-1/vanilla/";
+
 /**
  * 주어진 URL을 렌더링하여 HTML 파일로 생성
  * @param {string} url - 렌더링할 URL
@@ -39,13 +41,13 @@ async function generateStaticSite() {
 
   try {
     // 홈페이지 생성 (루트 경로로 전달)
-    await writeRoute("/", template, templatePath);
+    await writeRoute(BASE, template, templatePath);
 
     const productIds = items.slice(1, 10).map((p) => p.productId);
 
     // 각 상품별로 상세 페이지 생성
     for (const id of productIds) {
-      const url = `/product/${id}/`; // 베이스 URL 제거, 상대 경로만 사용
+      const url = `${BASE}/product/${id}/`;
       const outDir = `../../dist/vanilla/product/${id}`;
       await fs.mkdir(outDir, { recursive: true });
       await writeRoute(url, template, `${outDir}/index.html`);