[15팀 정채은] [Chapter 1-2] 프레임워크 없이 SPA 만들기

src/lib/createElement.js

@@ -1,5 +1,41 @@
-import { addEvent } from "./eventManager";
+export function createElement(vNode) {
+    if (vNode === null || vNode === undefined || typeof vNode === "boolean") {
+        return document.createTextNode(""); 
+    }
+
+    if (typeof vNode === "string" || typeof vNode === "number") {
+        return document.createTextNode(vNode);
+    }
 
-export function createElement(vNode) {}
+    if(Array.isArray(vNode)){
+        const fragment = document.createDocumentFragment();
+        vNode.forEach((node) =>{
+            const doms = createNodeWithChildren(node);
+            fragment.appendChild(doms);
+        })
+        return fragment;
+    }else{ // typeof "Object"
+        return createNodeWithChildren(vNode);
+    }
+}
 
-function updateAttributes($el, props) {}
+function updateAttributes($el, props) {
+
+}
+
+function createNodeWithChildren(node){
+    const domX = document.createElement(node.type);
+    //props 삽입
+    for(let propK in node.props){
+        if (propK === 'className') {
+            domX.setAttribute('class', node.props[propK]);
+        } else {
+            domX.setAttribute(propK, node.props[propK]);
+        }
+    }
+    //child 삽입
+    node.children.forEach((child) =>{
+        domX.appendChild(createElement(child));
+    })
+    return domX;
+}

src/lib/createVNode.js

@@ -1,3 +1,14 @@
 export function createVNode(type, props, ...children) {
-  return {};
+  return {
+    type,
+    props,
+    // 기존
+    // children: (children.flat(Infinity)).filter((childX) => !!childX)
+    // 개선
+    //개선1 : children: (children.flat(Infinity)).filter(Boolean) -> 이 경우 0을 falsy로 인식하여 리턴 제외함
+    //개선2 : 최종
+    children: children
+      .flat(Infinity)
+      .filter((childX) => (childX === 0 ? true : Boolean(childX))), // 완전 평탄화
+  };
 }

src/lib/normalizeVNode.js

@@ -1,3 +1,38 @@
 export function normalizeVNode(vNode) {
-  return vNode;
+  // null, undefined, boolean 값은 빈 문자열로 변환되어야 한다
+  if (vNode === null) {
+    return "";
+  }
+  switch (typeof vNode) {
+    case "boolean":
+    case "undefined":
+      return "";
+
+    case "number":
+    case "string":
+      return `${vNode}`;
+
+    case "function": // vNode가 함수일 경우 해당 함수를 호출해서 반환값을 얻되, 이 반환값이 또 다른 vNode일 가능성이 있으므로 재귀적으로 표준화.
+      const result = vNode(); 
+      return normalizeVNode(result); // 함수가 반환한 결과 normalize
+
+    default:
+
+      if(typeof vNode.type === "function"){ 
+
+        const { type, props, children } = vNode;
+        // const param = { props: vNode.props , children: vNode.children }
+
+        const resultOfFunction = vNode.type({ ...props, children }); // 함수 호출
+        // const resultOfFunction = vNode.type(param); // 이건 왜 안될까...
+        vNode = normalizeVNode(resultOfFunction); // 결과 표준화
+
+      }
+      if (vNode.children && Array.isArray(vNode.children)) {
+        vNode.children = vNode.children
+          .map((child) => normalizeVNode(child))
+          .filter((childN)=> !!childN)
+      }
+      return vNode;
+  }
 }