[8팀 최준만] [Chapter 1-2] 프레임워크 없이 SPA 만들기

src/__tests__/chapter1-2/custom.dom.test.jsx

@@ -0,0 +1,77 @@
+/** @jsx createVNode */
+/** @jsxFrag Fragment */
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
+import userEvent from "@testing-library/user-event";
+import { globalStore } from "../../stores/globalStore.js";
+
+let user;
+
+beforeAll(async () => {
+  // DOM 초기화
+  window.alert = vi.fn();
+  document.body.innerHTML = '<div id="root"></div>';
+  await import("../../main.jsx");
+});
+
+afterAll(() => {
+  // 각 테스트 전에 root 엘리먼트 초기화
+  document.getElementById("root").innerHTML = "";
+  localStorage.removeItem("user");
+});
+
+beforeEach(() => {
+  user = userEvent.setup();
+});
+
+const goTo = (path) => {
+  window.history.pushState({}, "", path);
+  window.dispatchEvent(new Event("popstate"));
+};
+
+describe("Chapter1-2 > 심화과제 > 포스트 관리", () => {
+  describe("사용자 > ", () => {
+    beforeEach(async () => {
+      goTo("/login");
+      const loginForm = document.getElementById("login-form");
+
+      await user.type(document.getElementById("username"), "testuser");
+
+      loginForm.dispatchEvent(
+        new SubmitEvent("submit", { bubbles: true, cancelable: true }),
+      );
+
+      goTo("/");
+    });
+
+    afterEach(async () => {
+      await user.click(document.getElementById("logout"));
+    });
+
+    it("포스트가 하나도 없을 때도,포스트를 추가할 수 있다.", async () => {
+      globalStore.setState({
+        posts: [],
+      });
+
+      await user.type(
+        document.getElementById("post-content"),
+        "새로운 포스트입니다.",
+      );
+      await user.click(document.getElementById("post-submit"));
+
+      expect(globalStore.getState().posts.length).toBe(1);
+      expect(globalStore.getState().posts[0].id).toBe(1);
+      expect(globalStore.getState().posts[0].content).toBe(
+        "새로운 포스트입니다.",
+      );
+    });
+  });
+});

src/__tests__/chapter1-2/custom.test.jsx

@@ -0,0 +1,61 @@
+/**
+ * 개인적으로 만든 순수함수들에 대한 테스트 입니다.
+ */
+
+import { describe } from "vitest";
+import { recursiveFlatten } from "../../utils/arrayUtils";
+import { renderElement } from "../../lib";
+
+describe("유틸 함수 체크", () => {
+  describe("recursiveFlatten", () => {
+    it("올바른 구조의 평탄화된 배열을 생성해야 한다", () => {
+      const vNode = recursiveFlatten([
+        "Hello",
+        ["world", ["i", "am", ["junman"]], "!"],
+      ]);
+      expect(vNode).toEqual(["Hello", "world", "i", "am", "junman", "!"]);
+    });
+
+    it("falsy한 값은 포함되지 않아야 한다.", () => {
+      const vNode = recursiveFlatten(
+        ["Hello", [null, [undefined], "world", "!"]],
+        (value) => Boolean(value),
+      );
+
+      expect(vNode).toEqual(["Hello", "world", "!"]);
+    });
+  });
+});
+
+/** @jsx createVNode */
+/** @jsxFrag Fragment */
+import { createVNode, Fragment } from "../../lib";
+
+describe("이벤트 매니저 버블링 테스트", () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+  it("이벤트가 버블링 되는 것 처럼 동작해야한다.", () => {
+    const clickHandler1 = vi.fn();
+    const clickHandler2 = vi.fn();
+
+    const Component = () => (
+      <div id="parent" onClick={clickHandler1}>
+        <div id="child" onClick={clickHandler2}></div>
+      </div>
+    );
+    renderElement(<Component />, container);
+
+    const child = container.querySelector("#child");
+    child.click();
+    expect(clickHandler1).toHaveBeenCalledTimes(1);
+    expect(clickHandler2).toHaveBeenCalledTimes(1);
+  });
+});

src/components/posts/Post.jsx

@@ -1,14 +1,16 @@
 /** @jsx createVNode */
-import { createVNode } from "../../lib";
+import { addEvent, createVNode } from "../../lib";
+import { globalStore } from "../../stores/globalStore.js";
 import { toTimeFormat } from "../../utils/index.js";
 
-export const Post = ({
-  author,
-  time,
-  content,
-  likeUsers,
-  activationLike = false,
-}) => {
+export const Post = ({ id, author, time, content, likeUsers }) => {
+  const { currentUser } = globalStore.getState();
+  const { like } = globalStore.actions;
+
+  const onClickLike = () => {
+    like(id);
+  };
+
   return (
     <div className="bg-white rounded-lg shadow p-4 mb-4">
       <div className="flex items-center mb-2">
@@ -20,7 +22,8 @@ export const Post = ({
       <p>{content}</p>
       <div className="mt-2 flex justify-between text-gray-500">
         <span
-          className={`like-button cursor-pointer${activationLike ? " text-blue-500" : ""}`}
+          className={`like-button cursor-pointer${likeUsers.includes(currentUser?.username) ? " text-blue-500" : ""}`}
+          onClick={onClickLike}
         >
           좋아요 {likeUsers.length}
         </span>

src/components/posts/PostForm.jsx

@@ -1,7 +1,28 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
+import { globalStore } from "../../stores";
 
 export const PostForm = () => {
+  const { currentUser, loggedIn, posts } = globalStore.getState();
+
+  if (!loggedIn) {
+    return null;
+  }
+
+  const onClickAddPost = () => {
+    globalStore.setState({
+      posts: [
+        {
+          id: posts ? posts.length + 1 : 1,
+          author: currentUser.username,
+          time: Date.now(),
+          content: document.getElementById("post-content").value,
+          likeUsers: [],
+        },
+        ...posts,
+      ],
+    });
+  };
   return (
     <div className="mb-4 bg-white rounded-lg shadow p-4">
       <textarea
@@ -12,6 +33,7 @@ export const PostForm = () => {
       <button
         id="post-submit"
         className="mt-2 bg-blue-600 text-white px-4 py-2 rounded"
+        onClick={onClickAddPost}
       >
         게시
       </button>

src/lib/createElement.js

@@ -1,5 +1,60 @@
+import {
+  checkNullishExceptZero,
+  replaceIfPropIsClass,
+} from "../utils/commonUtils";
 import { addEvent } from "./eventManager";
 
-export function createElement(vNode) {}
+export function createElement(vNode) {
+  if (typeof vNode === "function" || typeof vNode?.type === "function") {
+    throw new Error("NEED NORMALIZE");
+  }
+  if (typeof vNode === "boolean" || !checkNullishExceptZero(vNode)) {
+    return document.createTextNode("");
+  }
 
-function updateAttributes($el, props) {}
+  // 문자열 또는 숫자인 경우 텍스트 노드로 처리
+  if (typeof vNode === "string" || typeof vNode === "number") {
+    return document.createTextNode(String(vNode));
+  }
+
+  // 배열로 들어온 경우 fragment로 처리
+  if (Array.isArray(vNode)) {
+    const frag = document.createDocumentFragment();
+    vNode.forEach((node) => {
+      frag.append(makeElement(node));
+    });
+    return frag;
+  }
+
+  // 그 외의 경우 element로 처리
+  const el = makeElement(vNode);
+
+  if (Array.isArray(vNode.children)) {
+    vNode.children.forEach((child) => {
+      el.appendChild(createElement(child));
+    });
+  }
+
+  return el;
+}
+
+function makeElement(vNode) {
+  const el = document.createElement(vNode.type);
+  updateAttributes(el, vNode.props);
+  return el;
+}
+
+/**
+ *
+ * @param {HTMLElement} $el
+ * @param {object} props
+ */
+function updateAttributes($el, props) {
+  for (const prop in props) {
+    if (prop?.startsWith("on")) {
+      addEvent($el, prop.slice(2).toLowerCase(), props[prop]);
+      continue;
+    }
+    $el.setAttribute(replaceIfPropIsClass(prop), props[prop]);
+  }
+}

src/lib/createVNode.js

@@ -1,3 +1,10 @@
+import { recursiveFlatten } from "../utils/arrayUtils";
+import { checkNullishExceptZero } from "../utils/commonUtils";
+
 export function createVNode(type, props, ...children) {
-  return {};
+  const flattenedChildren = recursiveFlatten(children, (val) => {
+    return checkNullishExceptZero(val);
+  });
+
+  return { type, props, children: flattenedChildren };
 }

src/lib/eventManager.js

@@ -1,5 +1,49 @@
-export function setupEventListeners(root) {}
+/**
+ * globalEvents
+ * {
+ *  click: {
+ *    element: handler
+ *  }
+ * }
+ */
 
-export function addEvent(element, eventType, handler) {}
+let globalEvents = {};
 
-export function removeEvent(element, eventType, handler) {}
+// 콜백으로 넣으면 add할때의 remove할때의 콜백이 다를 수 있음
+/**
+ *
+ * @param {HTMLElement} root
+ */
+export function setupEventListeners(root) {
+  for (const eventType in globalEvents) {
+    root.addEventListener(eventType, handleGlobalEvents);
+  }
+}
+
+export function handleGlobalEvents(e) {
+  let target = e.target;
+  // 버블링 처리
+  while (target) {
+    if (globalEvents[e.type].has(target)) {
+      globalEvents[e.type].get(target)(e);
+    }
+    target = target.parentElement;
+  }
+}
+
+export function addEvent(element, eventType, handler) {
+  if (!element || typeof handler !== "function") return;
+
+  globalEvents[eventType] = globalEvents[eventType] || new WeakMap();
+  globalEvents[eventType].set(element, handler);
+}
+
+export function removeEvent(element, eventType, handler) {
+  if (globalEvents[eventType].get(element) === handler) {
+    globalEvents[eventType].delete(element);
+  }
+}
+
+export function clearEvents() {
+  globalEvents = {};
+}

src/lib/normalizeVNode.js

@@ -1,3 +1,28 @@
+import { checkNullishExceptZero } from "../utils/commonUtils";
+
+// falsy 값은 빈 문자열로 변환
+// 숫자, 문자 = > 문자열로 변환
+// 함수 => 함수 실행 결과로 변환
+
+// vNode : {type , props, children}
 export function normalizeVNode(vNode) {
-  return vNode;
+  if (typeof vNode === "boolean" || !checkNullishExceptZero(vNode)) {
+    return "";
+  }
+
+  if (typeof vNode === "number" || typeof vNode === "string") {
+    return String(vNode);
+  }
+
+  if (typeof vNode === "object" && typeof vNode.type === "function") {
+    return normalizeVNode(
+      vNode.type({ ...vNode.props, children: vNode.children }),
+    );
+  }
+
+  return {
+    type: vNode.type,
+    props: vNode.props,
+    children: vNode.children.map(normalizeVNode).filter(checkNullishExceptZero),
+  };
 }