From e5a9f71fed0028ace13b4ebab7b97e45d634f9a7 Mon Sep 17 00:00:00 2001
From: keyonnaise <su.smisc14@gmail.com>
Date: Wed, 25 Dec 2024 21:52:42 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=85=20=EB=AA=A8=EB=93=A0=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=ED=86=B5=EA=B3=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 eslint.config.js                        |   1 +
 src/__tests__/chapter1-2/basic.test.jsx |   2 +-
 src/components/posts/Post.jsx           |  36 +++++++--
 src/components/posts/PostForm.jsx       |  23 ++++++
 src/lib/createElement.js                |  57 ++++++++++++-
 src/lib/createObserver.js               |   2 +-
 src/lib/createStore.js                  |   7 +-
 src/lib/createVNode.js                  |  11 ++-
 src/lib/eventManager.js                 | 103 +++++++++++++++++++++++-
 src/lib/helpers.js                      |   9 +++
 src/lib/normalizeVNode.js               |  24 ++++++
 src/lib/renderElement.js                |  19 ++++-
 src/lib/updateElement.js                |  85 ++++++++++++++++++-
 src/pages/HomePage.jsx                  |  12 ++-
 src/pages/LoginPage.jsx                 |   2 +
 src/render.jsx                          |   2 +
 16 files changed, 368 insertions(+), 27 deletions(-)
 create mode 100644 src/lib/helpers.js

diff --git a/eslint.config.js b/eslint.config.js
index 9e887bc..da7af3e 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -6,6 +6,7 @@ import eslintPluginPrettier from "eslint-plugin-prettier/recommended";
 /** @type {import('eslint').Linter.Config[]} */
 export default [
   { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
+  { rules: { "prettier/prettier": ["error", { endOfLine: "auto" }] } },
   pluginJs.configs.recommended,
   eslintPluginPrettier,
   eslintConfigPrettier,
diff --git a/src/__tests__/chapter1-2/basic.test.jsx b/src/__tests__/chapter1-2/basic.test.jsx
index 60f7572..edf456e 100644
--- a/src/__tests__/chapter1-2/basic.test.jsx
+++ b/src/__tests__/chapter1-2/basic.test.jsx
@@ -598,7 +598,7 @@ describe("Chapter1-2 > 기본과제 > 가상돔 만들기 > ", () => {
       const clickHandler = vi.fn();
       const initialVNode = (
         <div>
-          <button onClick={clickHandler}>Button</button>
+          <button onClick={clickHandler}>Buttonnnn</button>
         </div>
       );
       renderElement(initialVNode, $container);
diff --git a/src/components/posts/Post.jsx b/src/components/posts/Post.jsx
index 67af756..cb19c89 100644
--- a/src/components/posts/Post.jsx
+++ b/src/components/posts/Post.jsx
@@ -1,14 +1,35 @@
 /** @jsx createVNode */
 import { 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 = ({ author, time, content, likeUsers }) => {
+  const { currentUser } = globalStore.getState();
+  const activationLike = likeUsers.includes(currentUser?.username);
+
+  const toggleLike = () => {
+    if (!currentUser) {
+      alert("로그인 후 이용해주세요");
+      return;
+    }
+
+    globalStore.setState(({ posts, ...rest }) => {
+      const foundIndex = posts.findIndex((post) => post.author === author);
+
+      const updatedPost = {
+        ...posts[foundIndex],
+        likeUsers: activationLike
+          ? likeUsers.filter((likeUser) => likeUser !== currentUser.username)
+          : [...likeUsers, currentUser.username],
+      };
+
+      const clonedPosts = [...posts];
+      clonedPosts[foundIndex] = updatedPost;
+
+      return { ...rest, posts: clonedPosts };
+    });
+  };
+
   return (
     <div className="bg-white rounded-lg shadow p-4 mb-4">
       <div className="flex items-center mb-2">
@@ -21,6 +42,7 @@ 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}
         >
           좋아요 {likeUsers.length}
         </span>
diff --git a/src/components/posts/PostForm.jsx b/src/components/posts/PostForm.jsx
index 36a2513..b879aed 100644
--- a/src/components/posts/PostForm.jsx
+++ b/src/components/posts/PostForm.jsx
@@ -1,7 +1,29 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
+import { globalStore } from "../../stores";
 
 export const PostForm = () => {
+  const handleSubmit = () => {
+    const $textarea = document.querySelector("#post-content");
+    const value = $textarea.value;
+
+    globalStore.setState((prev) => {
+      const { username } = prev.currentUser;
+      const postIds = prev.posts.map((post) => post.id);
+      const id = Math.max(...postIds) + 1;
+
+      const newPost = {
+        id,
+        author: username,
+        time: Date.now(),
+        content: value,
+        likeUsers: [],
+      };
+
+      return { ...prev, posts: [...prev.posts, newPost] };
+    });
+  };
+
   return (
     <div className="mb-4 bg-white rounded-lg shadow p-4">
       <textarea
@@ -12,6 +34,7 @@ export const PostForm = () => {
       <button
         id="post-submit"
         className="mt-2 bg-blue-600 text-white px-4 py-2 rounded"
+        onClick={handleSubmit}
       >
         게시
       </button>
diff --git a/src/lib/createElement.js b/src/lib/createElement.js
index 5d39ae7..1e199db 100644
--- a/src/lib/createElement.js
+++ b/src/lib/createElement.js
@@ -1,5 +1,58 @@
 import { addEvent } from "./eventManager";
+import { isInvalidValue } from "./helpers";
 
-export function createElement(vNode) {}
+export function createElement(vNode) {
+  if (isInvalidValue(vNode)) {
+    return document.createTextNode("");
+  }
 
-function updateAttributes($el, props) {}
+  if (typeof vNode === "number" || typeof vNode === "string") {
+    return document.createTextNode(vNode);
+  }
+
+  if (Array.isArray(vNode)) {
+    const $fragment = document.createDocumentFragment();
+    vNode.forEach((value) => $fragment.append(createElement(value)));
+    return $fragment;
+  }
+
+  if (typeof vNode === "object" && typeof vNode.type === "function") {
+    throw new Error("컴포넌트는 `createElement()`로 처리할 수 없습니다.");
+  }
+
+  const { type, props, children } = vNode;
+  const $el = document.createElement(type);
+
+  updateAttributes($el, props);
+
+  const elements = children.map(createElement);
+  elements.forEach((child) => $el.appendChild(child));
+
+  return $el;
+}
+
+// Utils
+function updateAttributes($el, props) {
+  Object.entries(props || {}).forEach(([key, value]) => {
+    // 스타일 속성 처리
+    if (key === "style") {
+      $el.style = value;
+      return;
+    }
+
+    // 클래스 속성 처리
+    if (key === "className") {
+      $el.setAttribute("class", value);
+      return;
+    }
+
+    // 이벤트 핸들러 처리
+    if (key.startsWith("on") && typeof value === "function") {
+      addEvent($el, key.slice(2).toLowerCase(), value);
+      return;
+    }
+
+    // 나머지 속성 처리
+    $el.setAttribute(key, value);
+  });
+}
diff --git a/src/lib/createObserver.js b/src/lib/createObserver.js
index 4d01314..0606ab6 100644
--- a/src/lib/createObserver.js
+++ b/src/lib/createObserver.js
@@ -1,7 +1,7 @@
 export const createObserver = () => {
   const listeners = new Set();
   const subscribe = (fn) => listeners.add(fn);
-  const notify = () => listeners.forEach((listener) => listener());
+  const notify = (...args) => listeners.forEach((listener) => listener(args));
 
   return { subscribe, notify };
 };
diff --git a/src/lib/createStore.js b/src/lib/createStore.js
index 51a5916..4d62916 100644
--- a/src/lib/createStore.js
+++ b/src/lib/createStore.js
@@ -6,8 +6,11 @@ export const createStore = (initialState, initialActions) => {
   let state = { ...initialState };
 
   const setState = (newState) => {
-    state = { ...state, ...newState };
-    notify();
+    const setter = newState;
+    const result = typeof newState === "function" ? setter(state) : newState;
+
+    state = { ...state, ...result };
+    notify(state);
   };
 
   const getState = () => ({ ...state });
diff --git a/src/lib/createVNode.js b/src/lib/createVNode.js
index 9991337..77bff48 100644
--- a/src/lib/createVNode.js
+++ b/src/lib/createVNode.js
@@ -1,3 +1,12 @@
+import { isValidValue } from "./helpers";
+
 export function createVNode(type, props, ...children) {
-  return {};
+  // NOTE: 왜 여기서 바로 normalizeVNode를 돌리면 안 될까?
+  // return normalizeVNode({ type, props, children });
+
+  return {
+    type,
+    props,
+    children: children.flat(Infinity).filter(isValidValue),
+  };
 }
diff --git a/src/lib/eventManager.js b/src/lib/eventManager.js
index 24e4240..d81fcdd 100644
--- a/src/lib/eventManager.js
+++ b/src/lib/eventManager.js
@@ -1,5 +1,102 @@
-export function setupEventListeners(root) {}
+// NOTE: 학습메이트(최기환)님 꿀팁 듣고 다시 짠 로직
+// * WeakMap 사용하고 있는데 이는 메모리 관리에 이점을 가지기 위함일까?
+const listeners = new WeakMap();
 
-export function addEvent(element, eventType, handler) {}
+// NOTE: Event Type에 대한 생각
+// 1. `addEvent()` 당시 event type만 따로 저장하다가
+//    `setupEventListeners()`가 실행될 때 사용되는 이벤트 타입들만 event listener에 등록 하는게 옳은지(현재)
+//
+// 2. 미리 사용될 것 같은 event type들을 미리 선언하고
+//    `setupEventListeners()`가 실행될 때 모두 등록 하는게 옳은지
+let eventTypes = [];
 
-export function removeEvent(element, eventType, handler) {}
+export function setupEventListeners($root) {
+  eventTypes.forEach((eventType) => {
+    $root.addEventListener(eventType, handleDelegatedEvent);
+  });
+}
+
+export function addEvent(element, eventType, handler) {
+  if (!eventTypes.includes(eventType)) {
+    eventTypes.push(eventType);
+  }
+
+  const elementListeners = listeners.get(element) || [];
+  elementListeners.push({ eventType, handler });
+
+  listeners.set(element, elementListeners);
+}
+
+export function removeEvent(element, eventType, handler) {
+  if (!listeners.has(element)) return;
+
+  const elementListeners = listeners.get(element);
+  const updatedElementListeners = elementListeners.filter((elementListener) => {
+    const sameEventType = elementListener.eventType === eventType;
+    const sameHandler = elementListener.handler === handler;
+    return !(sameEventType && sameHandler);
+  });
+
+  if (updatedElementListeners.length === 0) {
+    listeners.delete(element);
+    return;
+  }
+
+  listeners.set(element, updatedElementListeners);
+}
+
+function handleDelegatedEvent(e) {
+  if (!listeners.has(e.target)) return;
+
+  const elementListeners = listeners.get(e.target);
+  const filtered = elementListeners.filter(
+    ({ eventType }) => eventType === e.type,
+  );
+
+  filtered.forEach(({ handler }) => handler(e));
+}
+
+// // NOTE: 이전 작업물
+// // * 이벤트가 제거되지 않는 문제로 고민하다가 학습메이트(최기환)님에게 상담
+// // * 개선된 로직을 제안 받음. 하지만 아직도 왜 이벤트가 제거 되지 않는 지 모르겠음
+// // * `$root`도 같고 등록된 `eventType`과 `handler`도 동일 함
+// const events = [];
+// let $root = null;
+
+// export function setupEventListeners(_$root) {
+//   $root = _$root;
+
+//   events.forEach(({ eventType, handler }) => {
+//     $root.addEventListener(eventType, handler);
+//   });
+// }
+
+// export function addEvent(element, eventType, handler) {
+//   const isIncluded = events.some((event) => {
+//     return isSameEvent(event, { element, eventType, handler });
+//   });
+
+//   if (isIncluded) return;
+
+//   events.push({ element, eventType, handler });
+// }
+
+// export function removeEvent(element, eventType, handler) {
+//   const found = events.find((event) => {
+//     return isSameEvent(event, { element, eventType, handler });
+//   });
+
+//   if (!found) return;
+
+//   events.filter((event) => {
+//     return !isSameEvent(event, { element, eventType, handler });
+//   });
+//   $root.removeEventListener(found.eventType, found.handler);
+// }
+
+// function isSameEvent(a, b) {
+//   const isSameElement = a.element === b.element;
+//   const isSameEventType = a.eventType === b.eventType;
+//   const isSameHandler = a.handler === b.handler;
+//   return isSameElement && isSameEventType && isSameHandler;
+// }
diff --git a/src/lib/helpers.js b/src/lib/helpers.js
new file mode 100644
index 0000000..bc92eee
--- /dev/null
+++ b/src/lib/helpers.js
@@ -0,0 +1,9 @@
+const blacklist = [null, undefined, true, false, ""];
+
+export function isValidValue(value) {
+  return !blacklist.includes(value);
+}
+
+export function isInvalidValue(value) {
+  return blacklist.includes(value);
+}
diff --git a/src/lib/normalizeVNode.js b/src/lib/normalizeVNode.js
index 7dc6f17..42cb2bf 100644
--- a/src/lib/normalizeVNode.js
+++ b/src/lib/normalizeVNode.js
@@ -1,3 +1,27 @@
+import { isInvalidValue, isValidValue } from "./helpers";
+
 export function normalizeVNode(vNode) {
+  if (isInvalidValue(vNode)) {
+    return "";
+  }
+
+  if (typeof vNode === "number") {
+    return vNode.toString();
+  }
+
+  if (Array.isArray(vNode)) {
+    return vNode.flat(Infinity).filter(isValidValue).map(normalizeVNode);
+  }
+
+  if (typeof vNode === "object") {
+    const { type, props, children } = vNode;
+
+    if (typeof type === "function") {
+      return normalizeVNode(type({ ...props, children }));
+    }
+
+    return { type, props, children: normalizeVNode(children) };
+  }
+
   return vNode;
 }
diff --git a/src/lib/renderElement.js b/src/lib/renderElement.js
index 0429572..70fe133 100644
--- a/src/lib/renderElement.js
+++ b/src/lib/renderElement.js
@@ -1,10 +1,27 @@
-import { setupEventListeners } from "./eventManager";
 import { createElement } from "./createElement";
+import { setupEventListeners } from "./eventManager";
 import { normalizeVNode } from "./normalizeVNode";
 import { updateElement } from "./updateElement";
 
+let oldNode = null;
+
 export function renderElement(vNode, container) {
   // 최초 렌더링시에는 createElement로 DOM을 생성하고
   // 이후에는 updateElement로 기존 DOM을 업데이트한다.
   // 렌더링이 완료되면 container에 이벤트를 등록한다.
+  if (container.innerHTML === "") {
+    const normalized = normalizeVNode(vNode);
+    const node = createElement(normalized);
+    oldNode = normalized;
+
+    container.append(node);
+    setupEventListeners(container);
+  } else {
+    const newNode = normalizeVNode(vNode);
+
+    updateElement(container, newNode, oldNode);
+    setupEventListeners(container);
+
+    oldNode = newNode;
+  }
 }
diff --git a/src/lib/updateElement.js b/src/lib/updateElement.js
index ac32186..4ab8281 100644
--- a/src/lib/updateElement.js
+++ b/src/lib/updateElement.js
@@ -1,6 +1,87 @@
 import { addEvent, removeEvent } from "./eventManager";
 import { createElement } from "./createElement.js";
 
-function updateAttributes(target, originNewProps, originOldProps) {}
+export function updateElement(parentElement, newNode, oldNode, index = 0) {
+  if (!newNode && oldNode) {
+    // 1. `oldNode`만 있는 경우 -> 삭제
+    parentElement.removeChild(parentElement.childNodes[index]);
+    return;
+  }
 
-export function updateElement(parentElement, newNode, oldNode, index = 0) {}
+  if (newNode && !oldNode) {
+    // 2. `newNode`만 있는 경우 -> 추가;
+    parentElement.appendChild(createElement(newNode));
+    return;
+  }
+
+  if (typeof newNode === "string" && typeof oldNode === "string") {
+    if (newNode === oldNode) return;
+    // 3. `newNode`와 `oldNode` 모두 문자열일 경우
+    parentElement.replaceChild(
+      createElement(newNode),
+      parentElement.childNodes[index],
+    );
+    return;
+  }
+
+  if (newNode.type !== oldNode.type) {
+    // 4. `newNode`의 type과 `oldNode`의 타입이 서로 사맛디 아니할 경우
+
+    parentElement.replaceChild(
+      createElement(newNode),
+      parentElement.childNodes[index],
+    );
+    return;
+  }
+
+  // PROFIT!! `newNode`의 type과 `oldNode`의 타입이 서로 사맛을 경우
+  updateAttributes(
+    parentElement.childNodes[index],
+    newNode.props || {},
+    oldNode.props || {},
+  );
+
+  const maxLength = Math.max(newNode.children.length, oldNode.children.length);
+
+  for (let i = 0; i < maxLength; i++) {
+    updateElement(
+      parentElement.childNodes[index],
+      newNode.children[i],
+      oldNode.children[i],
+      i,
+    );
+  }
+}
+
+// Utils
+function updateAttributes(target, newProps, oldProps) {
+  // 등록된 이벤트 초기화
+  Object.entries(oldProps).forEach(([key, value]) => {
+    if (key.startsWith("on") && typeof value === "function") {
+      removeEvent(target, key.slice(2).toLowerCase(), value);
+    }
+  });
+
+  Object.entries(newProps).forEach(([key, value]) => {
+    // 스타일 속성 처리
+    if (key === "style") {
+      target.style = value;
+      return;
+    }
+
+    // 클래스 속성 처리
+    if (key === "className") {
+      target.setAttribute("class", value);
+      return;
+    }
+
+    // 이벤트 핸들러 처리
+    if (key.startsWith("on") && typeof value === "function") {
+      addEvent(target, key.slice(2).toLowerCase(), value);
+      return;
+    }
+
+    // 나머지 속성 처리
+    target.setAttribute(key, value);
+  });
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 376fe12..c583342 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,6 +1,5 @@
 /** @jsx createVNode */
 import { createVNode } from "../lib";
-
 import { Footer, Header, Navigation, Post, PostForm } from "../components";
 import { globalStore } from "../stores";
 
@@ -11,7 +10,7 @@ import { globalStore } from "../stores";
  * - 로그인하지 않은 사용자가 게시물에 좋아요를 누를 경우, "로그인 후 이용해주세요"를 alert로 띄운다.
  */
 export const HomePage = () => {
-  const { posts } = globalStore.getState();
+  const { loggedIn, posts } = globalStore.getState();
 
   return (
     <div className="bg-gray-100 min-h-screen flex justify-center">
@@ -20,16 +19,15 @@ 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} />;
-              })}
+              .map((props) => (
+                <Post {...props} />
+              ))}
           </div>
         </main>
-
         <Footer />
       </div>
     </div>
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index 5b25352..34c13e9 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -2,6 +2,7 @@
 import { createVNode } from "../lib";
 import { globalStore } from "../stores";
 import { userStorage } from "../storages";
+import { router } from "../router";
 
 function login(username) {
   const user = { username, email: "", bio: "" };
@@ -10,6 +11,7 @@ function login(username) {
     loggedIn: true,
   });
   userStorage.set(user);
+  router.get().push("/");
 }
 
 export const LoginPage = () => {
diff --git a/src/render.jsx b/src/render.jsx
index 5b67aea..0cf485e 100644
--- a/src/render.jsx
+++ b/src/render.jsx
@@ -12,6 +12,8 @@ export function render() {
   try {
     renderElement(<Page />, $root);
   } catch (error) {
+    console.log(error);
+
     if (error instanceof ForbiddenError) {
       router.get().push("/");
       return;

From 111f911a3397b696572e254e797f13fdfe2da280 Mon Sep 17 00:00:00 2001
From: keyonnaise <su.smisc14@gmail.com>
Date: Sat, 28 Dec 2024 14:02:30 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=9A=A7=20=EA=B3=B5=EC=82=AC=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/renderElement.js | 22 +++++++---------------
 src/lib/updateElement.js |  1 -
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/lib/renderElement.js b/src/lib/renderElement.js
index 70fe133..cab348b 100644
--- a/src/lib/renderElement.js
+++ b/src/lib/renderElement.js
@@ -6,22 +6,14 @@ import { updateElement } from "./updateElement";
 let oldNode = null;
 
 export function renderElement(vNode, container) {
-  // 최초 렌더링시에는 createElement로 DOM을 생성하고
-  // 이후에는 updateElement로 기존 DOM을 업데이트한다.
-  // 렌더링이 완료되면 container에 이벤트를 등록한다.
-  if (container.innerHTML === "") {
-    const normalized = normalizeVNode(vNode);
-    const node = createElement(normalized);
-    oldNode = normalized;
+  const nomalizedVNode = normalizeVNode(vNode);
 
-    container.append(node);
-    setupEventListeners(container);
+  if (container.innerHTML === "") {
+    container.append(createElement(nomalizedVNode));
   } else {
-    const newNode = normalizeVNode(vNode);
-
-    updateElement(container, newNode, oldNode);
-    setupEventListeners(container);
-
-    oldNode = newNode;
+    updateElement(container, nomalizedVNode, oldNode);
   }
+
+  oldNode = nomalizedVNode;
+  setupEventListeners(container);
 }
diff --git a/src/lib/updateElement.js b/src/lib/updateElement.js
index 4ab8281..2afcb5b 100644
--- a/src/lib/updateElement.js
+++ b/src/lib/updateElement.js
@@ -26,7 +26,6 @@ export function updateElement(parentElement, newNode, oldNode, index = 0) {
 
   if (newNode.type !== oldNode.type) {
     // 4. `newNode`의 type과 `oldNode`의 타입이 서로 사맛디 아니할 경우
-
     parentElement.replaceChild(
       createElement(newNode),
       parentElement.childNodes[index],