[6팀 김봉준] [Chapter 1-2] 프레임워크 없이 SPA 만들기

src/components/posts/Post.jsx

@@ -3,11 +3,13 @@ import { createVNode } from "../../lib";
 import { toTimeFormat } from "../../utils/index.js";
 
 export const Post = ({
+  id,
   author,
   time,
   content,
   likeUsers,
   activationLike = false,
+  onClick,
 }) => {
   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={() => onClick(id)}
           className={`like-button cursor-pointer${activationLike ? " text-blue-500" : ""}`}
         >
           좋아요 {likeUsers.length}

src/components/posts/PostForm.jsx

@@ -1,20 +1,39 @@
 /** @jsx createVNode */
 import { createVNode } from "../../lib";
+import { globalStore } from "../../stores/index.js";
+
+function createContent(event) {
+  event.preventDefault();
+  const formData = new FormData(event.target);
+  console.log("formData", formData.get("content"));
+  const data = {};
+
+  data.id = globalStore.getState().posts.length + 1;
+  data.author = globalStore.getState().currentUser.username;
+  data.time = Date.now();
+  data.content = formData.get("content");
+  data.likeUsers = [];
+  globalStore.setState({ posts: [...globalStore.getState().posts, data] });
+}
 
 export const PostForm = () => {
   return (
     <div className="mb-4 bg-white rounded-lg shadow p-4">
-      <textarea
-        id="post-content"
-        placeholder="무슨 생각을 하고 계신가요?"
-        className="w-full p-2 border rounded"
-      />
-      <button
-        id="post-submit"
-        className="mt-2 bg-blue-600 text-white px-4 py-2 rounded"
-      >
-        게시
-      </button>
+      <form id={"content-form"} onSubmit={createContent}>
+        <textarea
+          id="post-content"
+          placeholder="무슨 생각을 하고 계신가요?"
+          className="w-full p-2 border rounded"
+          name="content"
+        />
+        <button
+          id="post-submit"
+          className="mt-2 bg-blue-600 text-white px-4 py-2 rounded"
+          type={"submit"}
+        >
+          게시
+        </button>
+      </form>
     </div>
   );
 };

src/lib/createElement.js

@@ -1,5 +1,47 @@
 import { addEvent } from "./eventManager";
 
-export function createElement(vNode) {}
+export function createElement(vNode) {
+  if (vNode === undefined || vNode === null || typeof vNode === "boolean") {
+    return document.createTextNode("");
+  } else if (typeof vNode === "number" || typeof vNode === "string") {
+    return document.createTextNode(vNode.toString());
+  } else if (Array.isArray(vNode)) {
+    const parentComponent = document.createDocumentFragment();
+    vNode.forEach((vN) => parentComponent.appendChild(createElement(vN)));
+    return parentComponent;
+  }
 
-function updateAttributes($el, props) {}
+  /* vNode를 컴포넌트로 바꾸는 과정입니다 */
+  // 일반 Object 형태의 컴포넌트인 경우
+  // console.log("vNode", vNode);
+  // vNode.type에 맞게 해당 타입으로 컴포넌트 하나 생성
+  const component = document.createElement(vNode.type);
+
+  // vNode에 있는 props로 component
+  updateAttributes(component, vNode.props);
+  // component의 자식들을 creatElement재귀를 돌려서 appendChild시키기
+  vNode.children.forEach((child) => {
+    component.appendChild(createElement(child));
+  });
+  // 최종 컴포넌트 리턴
+  return component;
+}
+/* create할 떄 attribute값을 업데이트 해주는 함수 */
+function updateAttributes($el, props) {
+  // props 값이 존재해야만 할 수 있음
+  if (props) {
+    Object.entries(props).forEach(([key, value]) => {
+      // 이벤트 함수인 경우
+      if (key.startsWith("on") && typeof value === "function") {
+        const eventType = key.toLowerCase().slice(2); // on 글자 제외
+        addEvent($el, eventType, value); // 이벤트를 등록하기. 등록하고자 하는 컴포넌트, 이벤트 타입, 이벤트시 실행될 함수
+      } else if (key === "className") {
+        // 스타일 적용하기
+        $el.setAttribute("class", value);
+      } else {
+        // 나머지 id 값 등
+        $el.setAttribute(key, value);
+      }
+    });
+  }
+}

src/lib/createObserver.js

@@ -1,7 +1,11 @@
+//
 export const createObserver = () => {
   const listeners = new Set();
+
   const subscribe = (fn) => listeners.add(fn);
-  const notify = () => listeners.forEach((listener) => listener());
+  const notify = () => {
+    listeners.forEach((listener) => listener());
+  };
 
   return { subscribe, notify };
 };

src/lib/createRouter.js

@@ -8,6 +8,7 @@ export const createRouter = (routes) => {
   const getTarget = () => routes[getPath()];
 
   const push = (path) => {
+    console.log("push", path);
     window.history.pushState(null, null, path);
     notify();
   };

src/lib/createStore.js

@@ -5,6 +5,7 @@ export const createStore = (initialState, initialActions) => {
 
   let state = { ...initialState };
 
+  // 상태 추가함수
   const setState = (newState) => {
     state = { ...state, ...newState };
     notify();
@@ -18,6 +19,5 @@ export const createStore = (initialState, initialActions) => {
       (...args) => setState(value(getState(), ...args)),
     ]),
   );
-
   return { getState, setState, subscribe, actions };
 };

src/lib/createVNode.js

@@ -1,3 +1,14 @@
 export function createVNode(type, props, ...children) {
-  return {};
+  // depth 없이 펼치기
+  const flattenChildren = (children) => {
+    return children.flat(Infinity).filter((child) => {
+      return child || child === 0 || child === "";
+    });
+  };
+
+  return {
+    type: type,
+    props: props,
+    children: flattenChildren(children),
+  };
 }

src/lib/eventManager.js

@@ -1,5 +1,73 @@
-export function setupEventListeners(root) {}
+// 사용 중인 이벤트를 담을 객체
+// 이벤트 저장소
+const eventMap = new Map();
+// {element : {eventType : handler}} 형식으로 저장
+let rootElement = null;
 
-export function addEvent(element, eventType, handler) {}
+export function addEvent(element, eventType, handler) {
+  if (!eventMap.has(element)) {
+    eventMap.set(element, new Map());
+  }
+  eventMap.get(element).set(eventType, handler);
+}
 
-export function removeEvent(element, eventType, handler) {}
+export function setupEventListeners(root) {
+  // 기존 리스너 제거
+  if (rootElement) {
+    const handlers = rootElement._eventHandlers || new Map();
+    for (const [type, handler] of handlers) {
+      rootElement.removeEventListener(type, handler);
+    }
+  }
+
+  rootElement = root;
+  rootElement._eventHandlers = new Map();
+
+  for (const eventData of eventMap) {
+    const eventTypeMap = eventData[1];
+    for (const eventTypeData of eventTypeMap) {
+      const eventType = eventTypeData[0];
+      if (!rootElement._eventHandlers.has(eventType)) {
+        const eventHandler = (event) => handleEvent(event);
+        rootElement._eventHandlers.set(eventType, eventHandler);
+        rootElement.addEventListener(eventType, eventHandler);
+      }
+    }
+  }
+}
+
+export function handleEvent(event) {
+  let target = event.target;
+  const eventType = event.type;
+
+  while (target && target !== rootElement) {
+    if (eventMap.has(target)) {
+      const handler = eventMap.get(target).get(eventType);
+      if (handler) {
+        // console.log("여기 에러나나", handler, event)
+        handler?.(event);
+      }
+    }
+    target = target.parentElement;
+  }
+}
+
+export function removeEvent(element, eventType) {
+  if (!eventMap.has(element)) return;
+
+  const elementEvents = eventMap.get(element);
+  elementEvents.delete(eventType);
+
+  if (elementEvents.size === 0) {
+    eventMap.delete(element);
+  }
+
+  // 해당 이벤트 타입에 대한 리스너가 더 이상 필요없는 경우
+  if (![...eventMap.values()].some((map) => map.has(eventType))) {
+    const handler = rootElement._eventHandlers?.get(eventType);
+    if (handler) {
+      rootElement.removeEventListener(eventType, handler, true);
+      rootElement._eventHandlers.delete(eventType);
+    }
+  }
+}

src/lib/normalizeVNode.js

@@ -1,3 +1,28 @@
 export function normalizeVNode(vNode) {
-  return vNode;
+  // 값이 없는 경우는 빈 스트링으로
+  if (vNode === null || vNode === undefined || typeof vNode === "boolean") {
+    return "";
+  }
+
+  // 스프링이거나 숫자인 경우는 string으로
+  if (typeof vNode === "string" || typeof vNode === "number") {
+    return vNode.toString();
+  }
+
+  // 함수형으로 들어온다면. HomePage.jsx 같은 값은 함수이다. 함수인 경우는 type에 함수가 있음
+  // 함수를 실행하는데, 내부 값에는 props와 children을 전달한다.
+  if (typeof vNode.type === "function") {
+    // console.log("함수로 들어온다는게 뭐야?", vNode)
+    return normalizeVNode(
+      vNode.type({ ...vNode.props, children: vNode.children }),
+    );
+  }
+
+  // 일반 Object 타입인 경우
+  return {
+    ...vNode,
+    children: vNode.children
+      ?.map((child) => normalizeVNode(child))
+      .filter(Boolean),
+  };
 }

src/lib/renderElement.js

@@ -3,8 +3,33 @@ import { createElement } from "./createElement";
 import { normalizeVNode } from "./normalizeVNode";
 import { updateElement } from "./updateElement";
 
-export function renderElement(vNode, container) {
+// basicNode가 초기화 되지 않기 위해 renderElement 밖에 선언하기
+const basicNode = new Map();
+
+export function renderElement(vNode, realNode) {
   // 최초 렌더링시에는 createElement로 DOM을 생성하고
   // 이후에는 updateElement로 기존 DOM을 업데이트한다.
   // 렌더링이 완료되면 container에 이벤트를 등록한다.
+
+  // 가상돔 객체
+  console.log("vNode", vNode);
+  // 실제 컴포넌트
+  console.log("realNode", realNode);
+
+  const realVNode = basicNode.get(realNode);
+  const newVNode = normalizeVNode(vNode);
+
+  // 이전에 한 번도 그려진 적이 없으면
+  if (!realVNode) {
+    const newRealNode = createElement(newVNode);
+    realNode.appendChild(newRealNode);
+    // 한 번이라도 그려진 적 있으면(#root 컴포넌트)
+  } else {
+    updateElement(realNode, newVNode, realVNode);
+  }
+  // 보여질 노드를 basicNode에 저장해놓기
+  basicNode.set(realNode, newVNode);
+
+  // 이벤트 등록
+  setupEventListeners(realNode);
 }