[10팀 이용] [Chapter 1-2] 프레임워크 없이 SPA 만들기

src/components/posts/Post.jsx

@@ -1,14 +1,18 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
+import { globalStore } from "../../stores/index.js";
 import { toTimeFormat } from "../../utils/index.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 +25,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,21 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
+import { globalStore } from "../../stores";
+
+const handleSubmit = (e) => {
+  e.preventDefault();
+  const content = document.getElementById("post-content").value;
+  if (!content) {
+    return;
+  }
+
+  const { submitPost } = globalStore.actions;
+  submitPost(content);
+};
 
 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 +24,10 @@ export const PostForm = () => {
       <button
         id="post-submit"
         className="mt-2 bg-blue-600 text-white px-4 py-2 rounded"
+        onClick={handleSubmit}
       >
         게시
       </button>
-    </div>
+    </form>
   );
 };

src/errors/TypeError.js

@@ -0,0 +1,7 @@
+export class TypeError extends Error {
+  static MESSAGE = "TypeError";
+
+  constructor() {
+    super(TypeError.MESSAGE);
+  }
+}

src/lib/createElement.js

@@ -1,5 +1,82 @@
 import { addEvent } from "./eventManager";
 
-export function createElement(vNode) {}
+import { isString } from "../utils/isString";
+import { isValid } from "../utils/isValid";
 
-function updateAttributes($el, props) {}
+/**
+ * 가상 노드(vNode)를 실제 DOM 노드로 생성하는 함수
+ * @description
+ * 1. 가상 노드에 대한 유효성 검사 후 유효하지 않을 경우 빈 텍스트 노드 생성
+ * 2. 가상 노드가 문자열 또는 숫자인 경우 텍스트 노드로 생성
+ * 3. 가상 노드가 배열인 경우 fragment로 감싸서 생성
+ * 4. 그 외의 경우 createElement 함수를 통해 DOM 노드 생성
+ * 4-1. 속성 업데이트
+ * 4-2. 자식 노드 생성
+ * @param {*} vNode 가상 노드
+ * @returns {HTMLElement|Text|DocumentFragment} DOM 노드
+ */
+export function createElement(vNode) {
+  if (!isValid(vNode)) {
+    return document.createTextNode("");
+  }
+  if (isString(vNode)) {
+    return document.createTextNode(vNode);
+  }
+
+  if (Array.isArray(vNode) && vNode.length > 1) {
+    return createFragmentWithArray(vNode);
+  }
+
+  const $el = document.createElement(vNode.type);
+
+  if (vNode.props && Object.keys(vNode.props).length > 0) {
+    updateAttributes($el, vNode.props);
+  }
+
+  if (vNode.children) {
+    vNode.children.forEach((child) => {
+      const $child = createElement(child);
+      $el.appendChild($child);
+    });
+  }
+
+  return $el;
+}
+
+/**
+ * DOM 엘리먼트의 속성을 업데이트하는 함수
+ * @description 업데이트할 속성을 반복문을 통해 순회하며 업데이트
+ * 1. className 속성은 class로 변경
+ * 2. on으로 시작하는 속성은 이벤트 핸들러로 등록
+ * 3. 그 외의 속성은 setAttribute로 업데이트
+ * @param {*} $el DOM 엘리먼트
+ * @param {*} props 업데이트할 속성
+ */
+function updateAttributes($el, props) {
+  Object.entries(props).forEach(([key, value]) => {
+    if (key === "className") {
+      $el.setAttribute("class", value);
+      return;
+    }
+    if (key.startsWith("on")) {
+      const event = key.slice(2).toLowerCase();
+      addEvent($el, event, value);
+      return;
+    }
+    $el.setAttribute(key, value);
+  });
+}
+
+/**
+ * 배열 형태의 vNode를 받을 경우 fragment로 감싸서 반환
+ * @param {*} vNode
+ * @returns {DocumentFragment} fragment
+ */
+function createFragmentWithArray(vNode) {
+  const fragment = document.createDocumentFragment();
+  vNode.forEach((node) => {
+    const $el = createElement(node);
+    fragment.appendChild($el);
+  });
+  return fragment;
+}

src/lib/createVNode.js

@@ -1,3 +1,20 @@
+/**
+ * 가상 노드를 생성하는 함수
+ * @description type, props, children을 인자로 받아 가상 노드를 생성
+ * - children 요소 중 0, null, undefined는 제외
+ * - children을 flat하게 만들고, 각 요소를 flatMap
+ * @param {*} type
+ * @param {*} props
+ * @param  {...any} children
+ * @returns {Object} vNode
+ */
 export function createVNode(type, props, ...children) {
-  return {};
+  return {
+    type,
+    props,
+    children: children
+      .flat(Infinity)
+      .filter((child) => (child === 0 || child ? true : false))
+      .flatMap((child) => child),
+  };
 }

src/lib/eventManager.js

@@ -1,5 +1,68 @@
-export function setupEventListeners(root) {}
+const eventListeners = new Map();
 
-export function addEvent(element, eventType, handler) {}
+/**
+ * root 요소에 이벤트 리스너를 등록하는 함수
+ * @description
+ * - 이벤트 위임을 통해 이벤트 핸들러를 등록
+ * - 메모리 누수 방지를 위해 이벤트 리스너를 해제하고 다시 등록
+ * @param {HTMLElement} root
+ */
+export function setupEventListeners(root) {
+  eventListeners.forEach((_, eventType) => {
+    root.removeEventListener(eventType, handleEvent);
+    root.addEventListener(eventType, handleEvent);
+  });
+}
 
-export function removeEvent(element, eventType, handler) {}
+/**
+ * 이벤트 리스너를 등록하는 함수
+ * @param {*} element
+ * @param {*} eventType
+ * @param {*} handler
+ */
+export function addEvent(element, eventType, handler) {
+  if (typeof handler !== "function") {
+    throw new TypeError("Handler must be a function");
+  }
+
+  if (!eventListeners.has(eventType)) {
+    eventListeners.set(eventType, new WeakMap());
+  }
+
+  const listeners = eventListeners.get(eventType);
+  listeners.set(element, handler);
+}
+
+/**
+ * 이벤트 리스너를 해제하는 함수
+ * - WeakMap을 사용했기 때문에 eventListeners에 대한 삭제는 별도로 처리하지 않아도 된다.
+ * @description
+ * @param {*} element
+ * @param {*} eventType
+ * @param {*} handler
+ */
+export function removeEvent(element, eventType) {
+  if (!eventListeners.has(eventType)) {
+    return;
+  }
+
+  const elementEventListeners = eventListeners.get(eventType);
+  elementEventListeners.delete(element);
+}
+
+/**
+ * 이벤트 핸들러 처리 함수
+ */
+const handleEvent = (e) => {
+  const { target, type } = e;
+  const listeners = eventListeners.get(type);
+
+  if (!listeners) {
+    return;
+  }
+
+  const handler = listeners.get(target);
+  if (typeof handler === "function") {
+    handler(e);
+  }
+};

src/lib/normalizeVNode.js

@@ -1,3 +1,33 @@
+import { isString } from "../utils/isString";
+import { isValid } from "../utils/isValid";
+
+/**
+ * 가상 노드(vNode)를 표준 형식으로 정규화하는 함수
+ * @description 조건에 따라 vNode를 정규화하고, 정규화된 vNode를 반환한다.
+ * 1. vNode가 null, undefined, boolean인 경우 빈 문자열을 반환한다.
+ * 2. vNode가 문자열 또는 숫자인 경우 해당 값을 문자열로 반환한다.
+ * 3. vNode가 함수 타입인 경우 해당 함수를 호출하며 반환된 값을 정규화한다.
+ * 4. 모든 자식 노드를 정규화한다.
+ * @param {Object} vNode - 정규화할 가상 노드
+ * @returns {Object|string} 정규화된 가상 노드 또는 vNode가 유효하지 않은 경우 빈 문자열을 반환
+ */
 export function normalizeVNode(vNode) {
+  if (!isValid(vNode)) {
+    return "";
+  }
+  if (isString(vNode)) {
+    return vNode.toString();
+  }
+
+  if (typeof vNode.type === "function") {
+    return normalizeVNode(
+      vNode.type({ ...vNode.props, children: vNode.children }),
+    );
+  }
+
+  if (vNode.children && vNode.children.length) {
+    vNode.children = vNode.children.filter(isValid).map(normalizeVNode);
+  }
+
   return vNode;
 }

src/lib/renderElement.js

@@ -1,10 +1,31 @@
-import { setupEventListeners } from "./eventManager";
 import { createElement } from "./createElement";
+import { setupEventListeners } from "./eventManager";
 import { normalizeVNode } from "./normalizeVNode";
 import { updateElement } from "./updateElement";
 
+const vDom = new WeakMap();
+
+/**
+ * vNode를 받아서 해당 vNode를 container에 렌더링
+ * @description
+ * - 이전 가상 DOM과 비교하기 위해 WeakMap을 사용하여 container에 대한 가상 DOM 저장
+ * - container에 가상 DOM이 존재하지 않는 경우, createElement를 통해 DOM 생성
+ * - 가상 DOM이 존재할 경우 새로운 가상 DOM과 비교하여 변경분만 업데이트
+ * @param {*} vNode
+ * @param {*} container
+ * @returns {void}
+ */
 export function renderElement(vNode, container) {
-  // 최초 렌더링시에는 createElement로 DOM을 생성하고
-  // 이후에는 updateElement로 기존 DOM을 업데이트한다.
-  // 렌더링이 완료되면 container에 이벤트를 등록한다.
+  const newVNode = normalizeVNode(vNode);
+
+  if (!vDom.has(container)) {
+    const el = createElement(newVNode);
+    container.appendChild(el);
+  } else {
+    const oldVNode = vDom.get(container);
+    updateElement(container, newVNode, oldVNode);
+  }
+
+  setupEventListeners(container);
+  vDom.set(container, newVNode);
 }