[6팀 현채은] Chapter2-2. 나만의 React 만들기

eslint.config.js

@@ -4,9 +4,9 @@ import eslintConfigPrettier from "eslint-config-prettier";
 import eslintPluginPrettier from "eslint-plugin-prettier/recommended";
 
 /** @type {import('eslint').Linter.Config[]} */
-export default [
+export default tseslint.config([
   { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
   pluginJs.configs.recommended,
   eslintPluginPrettier,
   eslintConfigPrettier,
-];
+]);

packages/app/src/constants.js

@@ -0,0 +1 @@
+export const BASE_URL = import.meta.env.PROD ? "/front_7th_chapter2-2/" : "/";

packages/app/vite.config.ts

@@ -0,0 +1,23 @@
+import { createViteConfig } from "../../createViteConfig";
+import { resolve } from "path";
+
+const base: string = process.env.NODE_ENV === "production" ? "/front_7th_chapter2-2/" : "";
+
+export default createViteConfig({
+  base,
+  esbuild: {
+    jsx: "transform",
+    jsxInject: `import React from 'react';`,
+    jsxFactory: "React.createElement",
+    jsxFragment: "React.Fragment",
+    jsxDev: false,
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, "index.html"),
+        404: resolve(__dirname, "404.html"),
+      },
+    },
+  },
+});

public/mockServiceWorker.js

@@ -100,7 +100,10 @@ addEventListener("fetch", function (event) {
 
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
-  if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") {
+  if (
+    event.request.cache === "only-if-cached" &&
+    event.request.mode !== "same-origin"
+  ) {
     return;
   }
 
@@ -216,7 +219,9 @@ async function getResponse(event, client, requestId) {
     const acceptHeader = headers.get("accept");
     if (acceptHeader) {
       const values = acceptHeader.split(",").map((value) => value.trim());
-      const filteredValues = values.filter((value) => value !== "msw/passthrough");
+      const filteredValues = values.filter(
+        (value) => value !== "msw/passthrough",
+      );
 
       if (filteredValues.length > 0) {
         headers.set("accept", filteredValues.join(", "));
@@ -286,7 +291,10 @@ function sendToClient(client, message, transferrables = []) {
       resolve(event.data);
     };
 
-    client.postMessage(message, [channel.port2, ...transferrables.filter(Boolean)]);
+    client.postMessage(message, [
+      channel.port2,
+      ...transferrables.filter(Boolean),
+    ]);
   });
 }
 

src/api/productApi.js

@@ -1,6 +1,12 @@
 // 상품 목록 조회
 export async function getProducts(params = {}) {
-  const { limit = 20, search = "", category1 = "", category2 = "", sort = "price_asc" } = params;
+  const {
+    limit = 20,
+    search = "",
+    category1 = "",
+    category2 = "",
+    sort = "price_asc",
+  } = params;
   const page = params.current ?? params.page ?? 1;
 
   const searchParams = new URLSearchParams({

src/lib/Router.js

@@ -22,7 +22,9 @@ export class Router {
     document.addEventListener("click", (e) => {
       if (e.target.closest("[data-link]")) {
         e.preventDefault();
-        const url = e.target.getAttribute("href") || e.target.closest("[data-link]").getAttribute("href");
+        const url =
+          e.target.getAttribute("href") ||
+          e.target.closest("[data-link]").getAttribute("href");
         if (url) {
           this.push(url);
         }
@@ -111,7 +113,9 @@ export class Router {
   push(url) {
     try {
       // baseUrl이 없으면 자동으로 붙여줌
-      let fullUrl = url.startsWith(this.#baseUrl) ? url : this.#baseUrl + (url.startsWith("/") ? url : "/" + url);
+      let fullUrl = url.startsWith(this.#baseUrl)
+        ? url
+        : this.#baseUrl + (url.startsWith("/") ? url : "/" + url);
 
       const prevFullUrl = `${window.location.pathname}${window.location.search}`;
 
@@ -170,7 +174,11 @@ export class Router {
 
     // 빈 값들 제거
     Object.keys(updatedQuery).forEach((key) => {
-      if (updatedQuery[key] === null || updatedQuery[key] === undefined || updatedQuery[key] === "") {
+      if (
+        updatedQuery[key] === null ||
+        updatedQuery[key] === undefined ||
+        updatedQuery[key] === ""
+      ) {
         delete updatedQuery[key];
       }
     });

src/lib/createVNode.js

@@ -1,3 +1,9 @@
+// {
+//   type: 'div',
+//   props: { id: 'app' },
+//   children: ['안녕']
+// }
+
 export function createVNode(type, props, ...children) {
-  return {};
+  return { type, props: props || {}, children };
 }

src/lib/eventManager.js

@@ -1,5 +1,49 @@
-export function setupEventListeners(root) {}
+/* eventStore = {
+  click: [
+    { element: <button>, handler: fn },
+    { element: <div>, handler: fn },
+  ],
+  input: [
+    { element: <input>, handler: fn }
+  ]
+}
+  */
+const eventStore = new Map();
+const registeredEventTypes = new Set();
 
-export function addEvent(element, eventType, handler) {}
+export function setupEventListeners(root) {
+  for (const [eventType, handlers] of eventStore.entries()) {
+    if (registeredEventTypes.has(eventType)) continue;
+    registeredEventTypes.add(eventType);
 
-export function removeEvent(element, eventType, handler) {}
+    root.addEventListener(eventType, (event) => {
+      const target = event.target;
+
+      handlers.forEach(({ element, handler }) => {
+        if (target === element || element.contains(target)) {
+          handler.call(element, event);
+        }
+      });
+    });
+  }
+}
+
+export function addEvent(element, eventType, handler) {
+  // 이벤트 스토어에 없는 이벤트 타입인 경우
+  if (!eventStore.has(eventType)) {
+    // 빈 배열로 이벤트 타입 등록
+    eventStore.set(eventType, []);
+  }
+  // 해당 이벤트 타입에 인자로 받아온 element, handler 등록
+  eventStore.get(eventType).push({ element, handler });
+}
+
+export function removeEvent(element, eventType, handler) {
+  const list = eventStore.get(eventType);
+  if (!list) return;
+  // 기존 스토어에 등록되어 있는 해당 이벤트 타입에 대한 아이템 제거
+  eventStore.set(
+    eventType,
+    list.filter((item) => item.element !== element || item.handler !== handler),
+  );
+}

src/lib/normalizeVNode.js

@@ -1,3 +1,55 @@
 export function normalizeVNode(vNode) {
-  return vNode;
+  // 1. undefined, null, boolean 변환
+  if (vNode == null || typeof vNode === "boolean") {
+    return "";
+  }
+  // 2. string & number인 경우 string 변환
+  if (typeof vNode === "string" || typeof vNode === "number") {
+    return String(vNode);
+  }
+  // 3. 함수인 경우 호출한 반환값을 재귀 호출 (함수형 컴포넌트)
+  if (typeof vNode === "function") {
+    const result = vNode();
+    return normalizeVNode(result);
+  }
+  // 4. 배열인 경우
+  if (Array.isArray(vNode)) {
+    // map 돌면서
+    const normalizedChildren = vNode
+      .map((child) => normalizeVNode(child))
+      .flat()
+      .filter(
+        (child) =>
+          !(child == null || child === "" || typeof child === "boolean"),
+      );
+    return normalizedChildren;
+  }
+  // 5. 객체인 경우
+  if (typeof vNode === "object") {
+    const { type, props = {}, children = [] } = vNode;
+    // type이 func
+    if (typeof type === "function") {
+      // props와 children을 함께 전달
+      const componentProps = { ...(props || {}), children };
+      const rendered = type(componentProps);
+      // 다시 재귀
+      return normalizeVNode(rendered);
+    }
+
+    const normalizedChildren = (children || [])
+      .map((child) => normalizeVNode(child))
+      .flat()
+      .filter(
+        (child) =>
+          !(child == null || child === "" || typeof child === "boolean"),
+      );
+
+    return {
+      type,
+      props,
+      children: normalizedChildren,
+    };
+  }
+
+  return "";
 }

src/mocks/handlers.js

@@ -1,7 +1,8 @@
 import { http, HttpResponse } from "msw";
 import items from "./items.json";
 
-const delay = async () => await new Promise((resolve) => setTimeout(resolve, 200));
+const delay = async () =>
+  await new Promise((resolve) => setTimeout(resolve, 200));
 
 // 카테고리 추출 함수
 function getUniqueCategories() {
@@ -26,7 +27,9 @@ function filterProducts(products, query) {
   if (query.search) {
     const searchTerm = query.search.toLowerCase();
     filtered = filtered.filter(
-      (item) => item.title.toLowerCase().includes(searchTerm) || item.brand.toLowerCase().includes(searchTerm),
+      (item) =>
+        item.title.toLowerCase().includes(searchTerm) ||
+        item.brand.toLowerCase().includes(searchTerm),
     );
   }
 
@@ -66,7 +69,10 @@ export const handlers = [
   // 상품 목록 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 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") || "";
@@ -126,7 +132,11 @@ export const handlers = [
       rating: Math.floor(Math.random() * 2) + 4, // 4~5점 랜덤
       reviewCount: Math.floor(Math.random() * 1000) + 50, // 50~1050개 랜덤
       stock: Math.floor(Math.random() * 100) + 10, // 10~110개 랜덤
-      images: [product.image, product.image.replace(".jpg", "_2.jpg"), product.image.replace(".jpg", "_3.jpg")],
+      images: [
+        product.image,
+        product.image.replace(".jpg", "_2.jpg"),
+        product.image.replace(".jpg", "_3.jpg"),
+      ],
     };
 
     return HttpResponse.json(detailProduct);