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

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

@@ -0,0 +1,26 @@
+/**
+ * 개인적으로 만든 순수함수들에 대한 테스트 입니다.
+ */
+
+import { recursiveFlatten } from "../../utils/arrayUtils";
+
+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", "!"]);
+    });
+  });
+});

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[0].id + 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,61 @@
+import {
+  checkNullishExceptZero,
+  replaceIfPropIsClass,
+} from "../utils/commonUtils";
 import { addEvent } from "./eventManager";
+// 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/elementObserver.js

@@ -0,0 +1,18 @@
+export function createElementChildRemoveObserver(elements, helper) {
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === "childList") {
+        mutation.removedNodes.forEach((node) => {
+          console.log(node, "removed");
+          helper(node);
+        });
+      }
+    });
+  });
+
+  for (const element of elements) {
+    observer.observe(element, { childList: true, subtree: false });
+  }
+
+  return observer;
+}

src/lib/eventManager.js

@@ -1,5 +1,44 @@
-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) {
+  if (globalEvents[e.type].has(e.target)) {
+    globalEvents[e.type].get(e.target)(e);
+  }
+}
+
+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),
+  };
 }

src/lib/renderElement.js

@@ -1,10 +1,38 @@
-import { setupEventListeners } from "./eventManager";
 import { createElement } from "./createElement";
+import { setupEventListeners } from "./eventManager";
 import { normalizeVNode } from "./normalizeVNode";
 import { updateElement } from "./updateElement";
 
+let oldVNode = null;
+
+/**
+ * @description VNode를 실제 DOM 엘리먼트로 렌더링하는 함수
+ * @param {*} vNode createVNode 함수를 통해 생성된 VNode
+ * @param {HTMLElement} container 실제 DOM 엘리먼트(해당 VNode를 렌더링할 대상)
+ */
 export function renderElement(vNode, container) {
-  // 최초 렌더링시에는 createElement로 DOM을 생성하고
-  // 이후에는 updateElement로 기존 DOM을 업데이트한다.
-  // 렌더링이 완료되면 container에 이벤트를 등록한다.
+  if (!vNode) {
+    return;
+  }
+  // step1. vNode 정규화
+  const newVNode = normalizeVNode(vNode);
+
+  // step2. 정규화된 vNode를 기반으로 DOM 생성 또는 업데이트
+  if (!oldVNode) {
+    // step3. DOM 추가
+    const element = createElement(newVNode);
+    container.append(element); // 첫 렌더링 때만 container에 DOM 추가
+  } else {
+    // step3-diff. DOM 업데이트
+    if (container.firstChild) {
+      updateElement(container, newVNode, oldVNode);
+    } else {
+      const element = createElement(newVNode);
+      container.append(element);
+    }
+  }
+  // step4. 이벤트 핸들러 등록
+  setupEventListeners(container);
+  // step5. oldVNode 업데이트
+  oldVNode = newVNode;
 }