[7팀 김원표] [Chapter 1-2] 프레임워크 없이 SPA 만들기

package.json

@@ -34,8 +34,8 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.5.2",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/ui": "^2.1.8",
     "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/ui": "^2.1.8",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
@@ -44,7 +44,7 @@
     "jsdom": "^25.0.1",
     "lint-staged": "^15.2.11",
     "prettier": "^3.4.2",
-    "vite": "^6.0.3",
+    "vite": "^6.0.5",
     "vitest": "^2.1.8"
   }
 }

src/components/posts/Post.jsx

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

src/components/posts/PostForm.jsx

@@ -1,9 +1,24 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
+import { globalStore } from "../../stores";
+
+const addPost = (e) => {
+  e.preventDefault();
+  const contentInput = document.getElementById("post-content");
+  const content = contentInput.value.trim(); // const 선언 유지
+  if (!content) {
+    return;
+  }
+
+  const { addPost } = globalStore.actions;
+  addPost(content);
+
+  contentInput.value = ""; //초기화
+};
 
 export const PostForm = () => {
   return (
-    <div className="mb-4 bg-white rounded-lg shadow p-4">
+    <form className="mb-4 bg-white rounded-lg shadow p-4">
       <textarea
         id="post-content"
         placeholder="무슨 생각을 하고 계신가요?"
@@ -12,9 +27,10 @@ export const PostForm = () => {
       <button
         id="post-submit"
         className="mt-2 bg-blue-600 text-white px-4 py-2 rounded"
+        onClick={addPost}
       >
         게시
       </button>
-    </div>
+    </form>
   );
 };

src/lib/createElement.js

@@ -1,5 +1,70 @@
 import { addEvent } from "./eventManager";
 
-export function createElement(vNode) {}
+export function createElement(vNode) {
+  //1. falsy값 처리
+  if (vNode === undefined || vNode === null || typeof vNode === "boolean") {
+    return document.createTextNode("");
+  }
 
-function updateAttributes($el, props) {}
+  // 2. 텍스트 노드 처리
+  if (typeof vNode === "string" || typeof vNode === "number") {
+    return document.createTextNode(String(vNode));
+  }
+
+  // 3. 배열이면 DocumentFragment로 생성하고 재귀 호출하여 추가
+  if (Array.isArray(vNode)) {
+    const fragment = document.createDocumentFragment();
+    vNode.forEach((child) => {
+      const childNode = createElement(child); // 재귀적으로 처리
+      fragment.appendChild(childNode); // 유효한 노드만 추가
+    });
+    return fragment;
+  }
+
+  // 4. 함수형 컴포넌트 처리
+  if (typeof vNode.type === "function") {
+    throw new Error("Unsupported component type");
+  }
+
+  // 5. DOM 요소 처리
+  const { type, props = {}, children = [] } = vNode;
+  const $el = document.createElement(type);
+
+  // 5.1 속성 노드 처리
+  updateAttributes($el, props);
+
+  // 5.2 자식 노드 처리
+  const childNodes = Array.isArray(children) ? children : [children];
+  childNodes.forEach((child) => {
+    const childNode = createElement(child);
+    if (childNode) $el.appendChild(childNode);
+  });
+
+  return $el;
+}
+
+// 5-1. 속성 노드 처리 함수
+function updateAttributes($el, props) {
+  // props가 없으면 아무것도 없다는 것을 고려하지 않아서 계속 오류가 났었음...
+  if (!props) return $el;
+
+  Object.entries(props).forEach(([key, value]) => {
+    // 이벤트
+    if (key.startsWith("on") && typeof value === "function") {
+      const eventType = key.slice(2).toLowerCase(); // "onClick" -> "click"
+      addEvent($el, eventType, value);
+    } else if (key === "className") {
+      $el.className = value; // className -> class
+    } else if (key.startsWith("data-")) {
+      $el.setAttribute(key, value); // data-* 속성 처리
+    } else if (typeof value === "boolean") {
+      // 불리언 속성 처리
+      $el[key] = value; // DOM 속성으로 반영
+    } else if (value === null || value === undefined) {
+      // null 또는 undefined 속성은 제거
+      $el.removeAttribute(key);
+    } else {
+      $el.setAttribute(key, value); // 일반 속성 처리
+    }
+  });
+}

src/lib/createVNode.js

@@ -1,3 +1,17 @@
 export function createVNode(type, props, ...children) {
-  return {};
+  return {
+    type, // 노드의 타입
+    props, // 해당 노드의 적용할 속성
+    children: children // 이 노드의 자식 요소들
+      .flat(Infinity) // 모든 중첩 배열을 평탄화함.
+      .filter(
+        // 자식 요소에서 0을 제외한 falsy값을 제거
+        (child) =>
+          child !== false &&
+          child !== null &&
+          child !== undefined &&
+          child !== "" &&
+          !Number.isNaN(child),
+      ),
+  };
 }

src/lib/eventManager.js

@@ -1,5 +1,68 @@
-export function setupEventListeners(root) {}
+// 요소와 이벤트 타입을 기반으로 저장 DOM 요소가 삭제되면 해당 키와 값이 자동으로 제거되므로 메모리 누수 방지
+// 특정 요소(key, element)에 대해 여러 핸들러(뭘 할건지)를 관리하기 위해
+const eventHandlers = new Map();
+// 이벤트 타입(key, eventType)별로 루트 요소에 리스너 등록, 발생한 이벤트 해당 핸들러로 전달
+const rootEvent = new Map();
 
-export function addEvent(element, eventType, handler) {}
+// 루트에서 이벤트를 위임 처리
+function handleEvent(event, root) {
+  let target = event.target;
 
-export function removeEvent(element, eventType, handler) {}
+  // 이벤트 전파를 따라가며 핸들러 호출
+  while (target && target !== root) {
+    const handlersMap = eventHandlers.get(target);
+
+    if (handlersMap && handlersMap.has(event.type)) {
+      handlersMap.get(event.type).forEach((handler) => handler(event)); // 핸들러 호출
+    }
+
+    target = target.parentNode; // 부모로 이동
+  }
+}
+
+export function setupEventListeners(root) {
+  //이벤트 함수를 가져와서 한 번에 root에 이벤트를 등록한다.
+  // rootEvent의 각 이벤트 타입에 대해 리스너를 등록
+  rootEvent.forEach((listener, eventType) => {
+    if (listener) return; // 이미 등록된 경우 무시
+
+    const rootListener = (event) => handleEvent(event, root); // 위임된 이벤트 처리
+    rootEvent.set(eventType, rootListener); // 리스너 저장
+    root.addEventListener(eventType, rootListener); // 리스너 등록
+  });
+}
+
+export function addEvent(element, eventType, handler) {
+  if (eventHandlers.has(element)) return;
+
+  eventHandlers.set(element, new Map());
+
+  const handlersMap = eventHandlers.get(element);
+  if (!handlersMap.has(eventType)) {
+    handlersMap.set(eventType, new Set());
+  }
+  handlersMap.get(eventType).add(handler);
+
+  //초기화 => 이거 해주니까 통과..
+  //이벤트 타입이 rootEvent에 등록되지 않은 경우 rootEvent에 등록
+  if (!rootEvent.has(eventType)) {
+    rootEvent.set(eventType, null); // 이벤트 전파를 위임할 리스트
+    setupEventListeners(document.body); // rootElement에 이벤트를 등록
+  }
+}
+
+export function removeEvent(element, eventType, handler) {
+  const handlersMap = eventHandlers.get(element);
+  if (!handlersMap) return;
+
+  const handlers = handlersMap.get(eventType);
+  if (!handlers) return;
+
+  handlers.delete(handler);
+  if (handlers.size === 0) {
+    handlersMap.delete(eventType);
+    if (handlersMap.size === 0) {
+      eventHandlers.delete(element);
+    }
+  }
+}

src/lib/normalizeVNode.js

@@ -1,3 +1,42 @@
 export function normalizeVNode(vNode) {
+  // 1. null, undefined, boolean 값은 빈 문자열로 변환
+  if (
+    vNode === null ||
+    vNode === undefined ||
+    vNode === true ||
+    vNode === false
+  ) {
+    return "";
+  }
+
+  // 2. 문자열과 숫자는 문자열로 변환
+  if (typeof vNode === "string" || typeof vNode === "number") {
+    return String(vNode);
+  }
+
+  // 3. 컴포넌트를 정규화
+  // 배열처리 중첩 배열을 평탄화하고, 모든 요소를 재귀적으로 정규화
+  if (Array.isArray(vNode)) {
+    return vNode.flat(Infinity).map(normalizeVNode);
+  }
+
+  // 사용자 정의 컴포넌트 처리 (컴포넌트 정규화)
+  if (typeof vNode.type === "function") {
+    const componentVNode = vNode.type({
+      ...(vNode.props || {}),
+      children: vNode.children,
+    });
+    return normalizeVNode(componentVNode); // 반환된 VNode를 재귀적으로 처리
+  }
+
+  // 4. 기본 노드 처리
+  if (typeof vNode.type === "string") {
+    return {
+      type: vNode.type,
+      props: vNode.props,
+      children: vNode.children.map(normalizeVNode).filter(normalizeVNode),
+    };
+  }
+
   return vNode;
 }

src/lib/renderElement.js

@@ -3,8 +3,21 @@ import { createElement } from "./createElement";
 import { normalizeVNode } from "./normalizeVNode";
 import { updateElement } from "./updateElement";
 
+let currentVNode = new WeakMap();
+
 export function renderElement(vNode, container) {
-  // 최초 렌더링시에는 createElement로 DOM을 생성하고
-  // 이후에는 updateElement로 기존 DOM을 업데이트한다.
-  // 렌더링이 완료되면 container에 이벤트를 등록한다.
+  const normalizedVNode = normalizeVNode(vNode);
+
+  // 기존 DOM 제거
+  if (!currentVNode.has(container)) {
+    const $el = createElement(normalizedVNode);
+    container.appendChild($el);
+  } else {
+    const oldNode = currentVNode.get(container);
+    updateElement(container, normalizedVNode, oldNode);
+  }
+
+  // 이벤트 리스너 설정
+  setupEventListeners(container);
+  currentVNode.set(container, normalizedVNode);
 }