[6팀 소수지] [Chapter 1-2] 프레임워크 없이 SPA 만들기

src/components/posts/Post.jsx

@@ -1,14 +1,42 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
+import { globalStore } from "../../stores/globalStore.js";
 import { toTimeFormat } from "../../utils/index.js";
 
 export const Post = ({
+  id,
   author,
   time,
   content,
   likeUsers,
-  activationLike = false,
+  // activationLike = false,
 }) => {
+  const { getState, setState } = globalStore;
+  const { currentUser, loggedIn, posts } = getState();
+
+  const handleLike = () => {
+    if (!loggedIn) {
+      window.alert("로그인 후 이용해주세요");
+      return;
+    }
+
+    const targetPost = posts.find((post) => post.id === id);
+    const username = currentUser.username;
+
+    const updatedLikeUsers = targetPost.likeUsers.includes(username)
+      ? targetPost.likeUsers.filter((user) => user !== username)
+      : [...targetPost.likeUsers, username];
+
+    const updatedPost = { ...targetPost, likeUsers: updatedLikeUsers };
+    const updatedPosts = posts.map((post) =>
+      post.id === id ? updatedPost : post,
+    );
+
+    setState({ posts: updatedPosts });
+  };
+
+  const isLiked = currentUser && likeUsers.includes(currentUser?.username);
+
   return (
     <div className="bg-white rounded-lg shadow p-4 mb-4">
       <div className="flex items-center mb-2">
@@ -20,7 +48,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" : ""}`}
+          onClick={handleLike}
+          className={`like-button cursor-pointer${isLiked ? " text-blue-500" : ""}`}
         >
           좋아요 {likeUsers.length}
         </span>

src/components/posts/PostForm.jsx

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

src/lib/createElement.js

@@ -1,5 +1,43 @@
 import { addEvent } from "./eventManager";
 
-export function createElement(vNode) {}
+export function createElement(vNode) {
+  if (
+    typeof vNode === "undefined" ||
+    vNode === null ||
+    typeof vNode === "boolean"
+  ) {
+    return document.createTextNode("");
+  }
 
-function updateAttributes($el, props) {}
+  if (typeof vNode === "string" || typeof vNode === "number") {
+    return document.createTextNode(vNode);
+  }
+
+  if (Array.isArray(vNode)) {
+    const fragment = document.createDocumentFragment();
+    vNode.forEach((child) => fragment.appendChild(createElement(child)));
+
+    return fragment;
+  }
+
+  const $el = document.createElement(vNode.type);
+
+  updateAttributes($el, vNode.props ?? {});
+
+  $el.append(...vNode.children.map(createElement));
+
+  return $el;
+}
+
+function updateAttributes($el, props) {
+  Object.entries(props).forEach(([attr, value]) => {
+    if (attr.startsWith("on") && typeof value === "function") {
+      const eventType = attr.toLowerCase().slice(2);
+      addEvent($el, eventType, value);
+    } else if (attr === "className") {
+      $el.setAttribute("class", value);
+    } else {
+      $el.setAttribute(attr, value);
+    }
+  });
+}

src/lib/createVNode.js

@@ -1,3 +1,9 @@
 export function createVNode(type, props, ...children) {
-  return {};
+  return {
+    type,
+    props,
+    children: children
+      .flat(Infinity)
+      .filter((value) => value === 0 || Boolean(value)),
+  };
 }

src/lib/eventManager.js

@@ -1,5 +1,59 @@
-export function setupEventListeners(root) {}
+const eventListeners = new Map();
+let $root = null;
 
-export function addEvent(element, eventType, handler) {}
+function handleEvent(e) {
+  let target = e.target;
 
-export function removeEvent(element, eventType, handler) {}
+  while (target && target !== $root) {
+    const handlers = eventListeners.get(e.type)?.get(target);
+    if (handlers) {
+      handlers.forEach((handler) => handler(e));
+    }
+    target = target.parentElement;
+  }
+}
+
+export function setupEventListeners(root) {
+  if (!root) return;
+  $root = root;
+
+  eventListeners.forEach((handlers, eventType) => {
+    $root.removeEventListener(eventType, handleEvent);
+    $root.addEventListener(eventType, handleEvent);
+  });
+}
+
+export function addEvent(element, eventType, handler) {
+  if (!eventListeners.has(eventType)) {
+    eventListeners.set(eventType, new WeakMap());
+  }
+
+  const handlers = eventListeners.get(eventType);
+  if (!handlers.has(element)) {
+    handlers.set(element, new Set());
+  }
+
+  handlers.get(element).add(handler);
+}
+
+export function removeEvent(element, eventType, handler) {
+  const handlersMap = eventListeners.get(eventType);
+  if (!handlersMap) return;
+
+  const handlers = handlersMap.get(element);
+  if (!handlers) return;
+
+  if (handler) {
+    handlers.delete(handler);
+
+    if (handlers.size === 0) {
+      handlersMap.delete(element);
+    }
+  } else {
+    handlersMap.delete(element);
+  }
+
+  if (handlersMap.size === 0) {
+    eventListeners.delete(eventType);
+  }
+}

src/lib/normalizeVNode.js

@@ -1,3 +1,34 @@
 export function normalizeVNode(vNode) {
-  return vNode;
+  if (
+    typeof vNode === "undefined" ||
+    vNode === null ||
+    typeof vNode === "boolean"
+  ) {
+    return "";
+  }
+
+  if (typeof vNode === "string" || typeof vNode === "number") {
+    return String(vNode);
+  }
+
+  if (typeof vNode.type === "function") {
+    return normalizeVNode(
+      vNode.type({ ...vNode.props, children: vNode.children }),
+    );
+  }
+
+  // if (Array.isArray(vNode)) {
+  //   return vNode.map(normalizeVNode).join("");
+  // }
+
+  const children = Array.isArray(vNode.children)
+    ? vNode.children
+    : vNode.children
+      ? [vNode.children]
+      : [];
+
+  return {
+    ...vNode,
+    children: children.map(normalizeVNode).filter(Boolean),
+  };
 }

src/lib/renderElement.js

@@ -3,8 +3,24 @@ import { createElement } from "./createElement";
 import { normalizeVNode } from "./normalizeVNode";
 import { updateElement } from "./updateElement";
 
+const OldNodeMap = new WeakMap();
+
 export function renderElement(vNode, container) {
   // 최초 렌더링시에는 createElement로 DOM을 생성하고
   // 이후에는 updateElement로 기존 DOM을 업데이트한다.
   // 렌더링이 완료되면 container에 이벤트를 등록한다.
+  // console.log(`renderElement ${JSON.stringify(vNode)}, ${container}`);
+
+  const oldNode = OldNodeMap.get(container);
+  const newNode = normalizeVNode(vNode);
+
+  if (!oldNode) {
+    const element = createElement(newNode);
+    container.appendChild(element);
+  } else {
+    updateElement(container, newNode, oldNode);
+  }
+
+  OldNodeMap.set(container, newNode);
+  setupEventListeners(container);
 }

src/lib/updateElement.js

@@ -1,6 +1,77 @@
 import { addEvent, removeEvent } from "./eventManager";
 import { createElement } from "./createElement.js";
 
-function updateAttributes(target, originNewProps, originOldProps) {}
+function updateAttributes(target, originNewProps, originOldProps) {
+  const oldProps = originOldProps || {};
+  const newProps = originNewProps || {};
 
-export function updateElement(parentElement, newNode, oldNode, index = 0) {}
+  Object.entries(oldProps).forEach(([attr, value]) => {
+    if (!newProps[attr]) {
+      if (attr.startsWith("on")) {
+        const eventType = attr.slice(2).toLowerCase();
+        removeEvent(target, eventType, value);
+      } else {
+        target.removeAttribute(attr);
+      }
+    }
+  });
+
+  Object.entries(newProps).forEach(([attr, value]) => {
+    if (oldProps[attr] !== value) {
+      if (attr.startsWith("on")) {
+        const eventType = attr.slice(2).toLowerCase();
+        if (typeof oldProps[attr] === "function") {
+          removeEvent(target, eventType, oldProps[attr]);
+        }
+        addEvent(target, eventType, value);
+      } else if (attr === "className") {
+        target.setAttribute("class", value);
+      } else {
+        target.setAttribute(attr, value);
+      }
+    }
+  });
+}
+
+export function updateElement(parentElement, newNode, oldNode, index = 0) {
+  const existingNode = parentElement?.childNodes[index];
+
+  // oldNode만 있는 경우: oldNode를 parentElement에서 제거한다.
+  if (!newNode && oldNode) {
+    parentElement.removeChild(existingNode);
+    return;
+  }
+
+  // newNode만 있는 경우: newNode를 parentElement에 추가한다.
+  if (!oldNode && newNode) {
+    parentElement.appendChild(createElement(newNode));
+    return;
+  }
+
+  // oldNode와 newNode 모두 string인 경우: oldNode와 newNode 내용이 다르다면, newNode 내용으로 교체한다.
+  if (typeof oldNode === "string" || typeof newNode === "string") {
+    if (newNode !== oldNode) {
+      parentElement.replaceChild(createElement(newNode), existingNode);
+    }
+    return;
+  }
+
+  // oldeNode와 newNode의 태그 이름(type)이 다를 경우: oldNode를 제거하고 해당 위치에 newNode를 추가한다.
+  if (oldNode.type !== newNode.type) {
+    parentElement.replaceChild(createElement(newNode), existingNode);
+    return;
+  }
+
+  // oldNode와 newNode의 태그 이름(type)이 같을 경우: newNode와 oldNode의 속성을 비교하여 변경된 부분만 반영한다.
+  updateAttributes(existingNode, newNode.props || {}, oldNode.props || {});
+
+  // oldNode와 newNode를 순회하며, 앞에 조건식을 반복한다.
+  const newChildren = newNode.children || [];
+  const oldChildren = oldNode.children || [];
+
+  const maxLength = Math.max(newChildren.length, oldChildren.length);
+
+  for (let i = 0; i < maxLength; i++) {
+    updateElement(existingNode, newChildren[i], oldChildren[i], i);
+  }
+}

src/pages/HomePage.jsx

@@ -11,7 +11,7 @@ import { globalStore } from "../stores";
  * - 로그인하지 않은 사용자가 게시물에 좋아요를 누를 경우, "로그인 후 이용해주세요"를 alert로 띄운다.
  */
 export const HomePage = () => {
-  const { posts } = globalStore.getState();
+  const { posts, loggedIn } = globalStore.getState();
 
   return (
     <div className="bg-gray-100 min-h-screen flex justify-center">
@@ -20,13 +20,14 @@ export const HomePage = () => {
         <Navigation />
 
         <main className="p-4">
-          <PostForm />
+          {loggedIn && <PostForm />}
           <div id="posts-container" className="space-y-4">
-            {[...posts]
-              .sort((a, b) => b.time - a.time)
-              .map((props) => {
-                return <Post {...props} activationLike={false} />;
-              })}
+            {posts &&
+              [...posts]
+                .sort((a, b) => b.time - a.time)
+                .map((props) => {
+                  return <Post key={props.id} {...props} />;
+                })}
           </div>
         </main>