[8팀 조우영] [Chapter 1-2] 프레임워크 없이 SPA 만들기

src/components/posts/Post.jsx

@@ -7,7 +7,9 @@ export const Post = ({
   time,
   content,
   likeUsers,
+  id,
   activationLike = false,
+  onToggleLike,
 }) => {
   return (
     <div className="bg-white rounded-lg shadow p-4 mb-4">
@@ -20,6 +22,7 @@ export const Post = ({
       <p>{content}</p>
       <div className="mt-2 flex justify-between text-gray-500">
         <span
+          onClick={onToggleLike.bind(null, id)}
           className={`like-button cursor-pointer${activationLike ? " text-blue-500" : ""}`}
         >
           좋아요 {likeUsers.length}

src/components/posts/PostForm.jsx

@@ -1,7 +1,7 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
 
-export const PostForm = () => {
+export const PostForm = ({ onSubmit }) => {
   return (
     <div className="mb-4 bg-white rounded-lg shadow p-4">
       <textarea
@@ -10,6 +10,7 @@ export const PostForm = () => {
         className="w-full p-2 border rounded"
       />
       <button
+        onClick={onSubmit}
         id="post-submit"
         className="mt-2 bg-blue-600 text-white px-4 py-2 rounded"
       >

src/errors/InvalidVNodeTypeError.js

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

src/lib/createElement.js

@@ -1,5 +1,50 @@
+import { InvalidVNodeTypeError } from "../errors/InvalidVNodeTypeError";
+import { isRenderableVNode, isTextNode } from "../utils/domUtils";
+import { getEventTypeFromProps } from "../utils/eventUtils";
 import { addEvent } from "./eventManager";
 
-export function createElement(vNode) {}
+export function createElement(vNode) {
+  if (typeof vNode === "function") {
+    throw new InvalidVNodeTypeError();
+  }
 
-function updateAttributes($el, props) {}
+  if (!isRenderableVNode(vNode)) {
+    return document.createTextNode("");
+  }
+
+  if (isTextNode(vNode)) {
+    return document.createTextNode(vNode);
+  }
+
+  if (Array.isArray(vNode)) {
+    const docFragment = document.createDocumentFragment();
+    const childNodes = vNode.map(createElement);
+    childNodes.forEach((childNode) => docFragment.appendChild(childNode));
+    return docFragment;
+  }
+
+  const $element = document.createElement(vNode.type);
+  for (let [key, value] of Object.entries(vNode.props || {})) {
+    addAttirbutes($element, key, value);
+  }
+  const childNodes = (vNode.children || []).map(createElement);
+  childNodes.forEach((childNode) => $element.appendChild(childNode));
+  return $element;
+}
+
+export const addAttirbutes = (element, key, value) => {
+  if (key.startsWith("on")) {
+    addEvent(element, getEventTypeFromProps(key), value);
+    return;
+  }
+  if (key === "className") {
+    element.setAttribute("class", value);
+    return;
+  }
+  if (key === "children") {
+    return;
+  }
+  element.setAttribute(key, value);
+
+  return element;
+};

src/lib/createVNode.js

@@ -1,3 +1,13 @@
-export function createVNode(type, props, ...children) {
-  return {};
+import { isRenderableVNode } from "../utils/domUtils";
+
+export function createVNode(type, props, ...childrens) {
+  const flatChildren = childrens
+    .flat(Infinity)
+    .filter((children) => isRenderableVNode(children));
+
+  return {
+    type,
+    props,
+    children: flatChildren,
+  };
 }

src/lib/eventManager.js

@@ -1,5 +1,31 @@
-export function setupEventListeners(root) {}
+const eventManager = () => {
+  const events = {};
 
-export function addEvent(element, eventType, handler) {}
+  const scopedEventHandler = (e) => {
+    const targetgetEvent = events[e.type].get(e.target);
+    if (targetgetEvent) targetgetEvent(e);
+  };
 
-export function removeEvent(element, eventType, handler) {}
+  const setupEventListeners = (root) => {
+    for (const eventType in events) {
+      root.removeEventListener(eventType, scopedEventHandler);
+      root.addEventListener(eventType, scopedEventHandler);
+    }
+  };
+
+  const addEvent = (element, eventType, handler) => {
+    if (!events[eventType]) {
+      events[eventType] = new WeakMap();
+    }
+    events[eventType].set(element, handler);
+  };
+
+  const removeEvent = (element, eventType, handler) => {
+    if (events[eventType].get(element) === handler) {
+      events[eventType].delete(element);
+    }
+  };
+
+  return { setupEventListeners, addEvent, removeEvent };
+};
+export const { setupEventListeners, addEvent, removeEvent } = eventManager();

src/lib/normalizeVNode.js

@@ -1,3 +1,29 @@
+import { isRenderableVNode, isTextNode } from "../utils/domUtils";
+
 export function normalizeVNode(vNode) {
-  return vNode;
+  if (!isRenderableVNode(vNode)) {
+    return "";
+  }
+
+  if (isTextNode(vNode)) {
+    return String(vNode);
+  }
+
+  if (typeof vNode.type === "function") {
+    const newVNode = normalizeVNode(
+      vNode.type({ ...vNode.props, children: vNode.children }),
+    );
+    return newVNode;
+  }
+
+  if (Array.isArray(vNode)) {
+    const vNodoes = vNode.map(normalizeVNode);
+    return vNodoes;
+  }
+
+  const childNodes = vNode.children.map(normalizeVNode);
+  return {
+    ...vNode,
+    children: childNodes,
+  };
 }

src/lib/renderElement.js

@@ -4,7 +4,14 @@ import { normalizeVNode } from "./normalizeVNode";
 import { updateElement } from "./updateElement";
 
 export function renderElement(vNode, container) {
-  // 최초 렌더링시에는 createElement로 DOM을 생성하고
-  // 이후에는 updateElement로 기존 DOM을 업데이트한다.
-  // 렌더링이 완료되면 container에 이벤트를 등록한다.
+  const normalizedNode = normalizeVNode(vNode);
+
+  if (container.oldVNode) {
+    updateElement(container, normalizedNode, container.oldVNode);
+  } else {
+    const newNode = createElement(normalizedNode);
+    container.appendChild(newNode);
+  }
+  setupEventListeners(container);
+  container.oldVNode = normalizedNode;
 }

src/lib/updateElement.js

@@ -1,6 +1,59 @@
-import { addEvent, removeEvent } from "./eventManager";
-import { createElement } from "./createElement.js";
+import { isTextNode } from "../utils/domUtils.js";
+import { getEventTypeFromProps } from "../utils/eventUtils.js";
+import { addAttirbutes, createElement } from "./createElement.js";
+import { removeEvent } from "./eventManager.js";
 
-function updateAttributes(target, originNewProps, originOldProps) {}
+function updateAttributes(element, newProps, oldProps) {
+  for (let [key, value] of Object.entries(oldProps)) {
+    if (key in newProps) continue;
 
-export function updateElement(parentElement, newNode, oldNode, index = 0) {}
+    element.removeAttribute(key);
+
+    if (key.startsWith("on")) {
+      removeEvent(element, getEventTypeFromProps(key), value);
+    }
+  }
+  for (let [key, value] of Object.entries(newProps)) {
+    addAttirbutes(element, key, value);
+  }
+}
+
+export function updateElement(parentElement, newNode, oldNode, index = 0) {
+  const oldElement = parentElement.childNodes[index];
+
+  //oldNode만 있는 경우
+  if (oldNode && !newNode) {
+    parentElement.removeChild(oldElement);
+    return;
+  }
+
+  //newNode만 있는 경우
+  if (newNode && !oldNode) {
+    const newElement = createElement(newNode);
+    parentElement.appendChild(newElement);
+    return;
+  }
+  //oldNode와 newNode 모두 text 타입일 경우
+  if (isTextNode(newNode) && isTextNode(oldNode) && oldNode !== newNode) {
+    const newTextElement = document.createTextNode(newNode);
+    parentElement.replaceChild(newTextElement, oldElement);
+    return;
+  }
+  //oldNode와 newNode의 태그 이름(type)이 다를 경우
+  if (newNode.type !== oldNode.type) {
+    parentElement.replaceChild(createElement(newNode), oldElement);
+    return;
+  }
+
+  if (newNode.type === oldNode.type) {
+    updateAttributes(oldElement, newNode.props || {}, oldNode.props || {});
+  }
+
+  const oldChildren = oldNode.children || [];
+  const newChildren = newNode.children || [];
+  const maxChildrenLength = Math.max(oldChildren.length, newChildren.length);
+
+  for (let i = 0; i < maxChildrenLength; i++) {
+    updateElement(oldElement, newChildren[i], oldChildren[i], i);
+  }
+}

src/pages/HomePage.jsx

@@ -11,7 +11,15 @@ import { globalStore } from "../stores";
  * - 로그인하지 않은 사용자가 게시물에 좋아요를 누를 경우, "로그인 후 이용해주세요"를 alert로 띄운다.
  */
 export const HomePage = () => {
-  const { posts } = globalStore.getState();
+  const { posts, loggedIn, currentUser } = globalStore.getState();
+  const { toggleLike, addPost } = globalStore.actions;
+
+  const handleSubmitPostForm = (e) => {
+    e.preventDefault();
+
+    const content = document.querySelector("#post-content").value;
+    addPost(content);
+  };
 
   return (
     <div className="bg-gray-100 min-h-screen flex justify-center">
@@ -20,12 +28,19 @@ export const HomePage = () => {
         <Navigation />
 
         <main className="p-4">
-          <PostForm />
+          {loggedIn && <PostForm onSubmit={handleSubmitPostForm} />}
           <div id="posts-container" className="space-y-4">
             {[...posts]
               .sort((a, b) => b.time - a.time)
               .map((props) => {
-                return <Post {...props} activationLike={false} />;
+                const isLiked = props.likeUsers.includes(currentUser?.username);
+                return (
+                  <Post
+                    {...props}
+                    activationLike={isLiked}
+                    onToggleLike={toggleLike}
+                  />
+                );
               })}
           </div>
         </main>

src/stores/globalStore.js

@@ -53,5 +53,37 @@ export const globalStore = createStore(
       userStorage.reset();
       return { ...state, currentUser: null, loggedIn: false };
     },
+    toggleLike(state, id) {
+      const { posts, loggedIn, currentUser } = state;
+
+      if (!loggedIn) {
+        alert("로그인 후 이용해주세요");
+        return;
+      }
+
+      const { username } = currentUser;
+
+      const newPosts = posts.map((post) => {
+        if (post.id !== id) return post;
+
+        const likeUsers = post.likeUsers.includes(username)
+          ? post.likeUsers.filter((user) => user !== username)
+          : [...post.likeUsers, username];
+
+        return { ...post, likeUsers };
+      });
+      return { ...state, posts: newPosts };
+    },
+    addPost(state, content) {
+      const { currentUser, posts } = state;
+      const newPost = {
+        id: posts.length > 0 ? posts[posts.length - 1].id + 1 : 1,
+        author: currentUser.username,
+        time: Date.now(),
+        content,
+        likeUsers: [],
+      };
+      return { ...state, posts: [...posts, newPost] };
+    },
   },
 );

src/utils/domUtils.js

@@ -0,0 +1,3 @@
+export const isTextNode = (node) => ["string", "number"].includes(typeof node);
+export const isRenderableVNode = (vNode) =>
+  vNode != undefined && vNode != null && typeof vNode !== "boolean";

src/utils/eventUtils.js

@@ -33,3 +33,7 @@ export const addEvent = (eventType, selector, handler) => {
   }
   eventHandlers[eventType][selector] = handler;
 };
+
+export const getEventTypeFromProps = (eventProps) => {
+  return eventProps.toLowerCase().slice(2, eventProps.length);
+};

vite.config.js

@@ -20,5 +20,13 @@ export default mergeConfig(
       setupFiles: "./src/setupTests.js",
       exclude: ["**/e2e/**", "**/*.e2e.spec.js", "**/node_modules/**"],
     },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: "/src",
+        },
+      ],
+    },
   }),
 );