서당개: 아 나 SPA 읊는다고 ㅋㅋ (항해 플러스 프론트 6기 회고 2️⃣주차)

허정석·2025년 7월 19일

WIL 항해플러스

WIL

목록 보기

2/9

이렇게 해서 생긴 게 학습 보고서입니다 📑...

내가 쏘아올린 공....
2 주차 과제 리뷰 샤라웃 받았잖아 한 잔 해~

교수님, 팀 5 우수 학생들, 그리고 나...📚🎓

안녕하세요. 팀 5 허정석입니다.
이번 회고는 우리 팀 5 에게 받칩니다. 정말 저를 포기 하지 않아주셔서 감사합니다.
먼저 저에게 다가와서 막히면 얘기하라고 도와준다고, 어디 딴 길로 새고 있으면 붙잡아서 과제하게 시키고, 별 것도 아닌거에 칭찬해주는 그대들...
팀을 정말 잘 만났다고 생각해요.
그리고 멘탈이나가 더 나아갈까 말까의 기로에 서있을 때, 저를 도와주신 분들입니다.
⭐️⭐️⭐️
1팀 휘린, 희원 (과제에 대한 목표 의식)
2팀 도은 (지금 이 글을 쓸 수 있게 만드는 원동력)
3팀 진석 (항해를 대하는 본인의 신념)
4팀 하늘 (폭풍 코딩 차력쇼)
6팀 지현 (아낌 없는 응원)
⭐️⭐️⭐️
황금 6기가 있어 행복합니다.!!

+++
4팀 지혜님 타로 봐주셔서 감사합니다. 제가 하기 나름이겠지만 열심히 해볼게요 ㅋㅋㅋㅋㅋ
지혜와 쩹에서의 모습

테스트 성공의 맛.🍯

✅ Keep: 이번주 내가 잘한 것들

과제 마무리 성공
: 처음에 과제를 기본만 완성을 시키고 제출을 하려 했으나, 6기분들의 응원 및 생각을 들으면서 버텼고 제출 성공.
매일 학습 보고서 작성. (별 내용이 없어도 매일 했다는 것에 뿌듯)

❗ Problem: 탈탈 털린 순간

updateElement 함수 구현
: 내 실력으론 구현을 할 수 없어서 Gemini의 손을 빌렸다. 이 때, 멘탈이 많이 무너졌었다. 새벽이기도 했고 과제는 끝내고 싶은데 내 힘으로는 도저히 완성을 못 시킨다는 좌절감이 컸다.
쨰미나이가 만든 코드입니다. 신랄하게 까주세요.
코드 리뷰 대.환.영!

💡 updateElement

import { addEvent, removeEvent } from "./eventManager";
import { createElement } from "./createElement.js";

function updateAttributes(target, originNewProps, originOldProps) {
  const newProps = originNewProps || {};
  const oldProps = originOldProps || {};

  for (const attr in newProps) {
    const newValue = newProps[attr];
    const oldValue = oldProps[attr];

    if (newValue !== oldValue) {
      if (attr.startsWith("on") && typeof newValue === "function") {
        const eventType = attr.toLowerCase().slice(2);
        if (oldValue) {
          removeEvent(target, eventType, oldValue);
        }
        addEvent(target, eventType, newValue);
      } else if (["checked", "disabled", "selected", "readOnly"].includes(attr)) {
        target[attr] = Boolean(newValue);
      } else if (attr === "className") {
        newValue ? target.setAttribute("class", newValue) : target.removeAttribute("class");
      } else if (attr === "style" && typeof newValue === "object") {
        for (const styleName in newValue) {
          target.style[styleName] = newValue[styleName];
        }
        for (const styleName in oldValue) {
          if (!(styleName in newValue)) {
            target.style[styleName] = "";
          }
        }
      } else {
        target.setAttribute(attr, newValue);
      }
    }
  }

  for (const attr in oldProps) {
    if (!(attr in newProps)) {
      if (attr.startsWith("on") && typeof oldProps[attr] === "function") {
        const eventType = attr.toLowerCase().slice(2);
        removeEvent(target, eventType, oldProps[attr]);
      } else if (["checked", "disabled", "selected", "readOnly"].includes(attr)) {
        target[attr] = false;
      } else if (attr === "className") {
        target.removeAttribute("class");
      } else if (attr === "style") {
        for (const styleName in oldProps[attr]) {
          target.style[styleName] = "";
        }
      } else {
        target.removeAttribute(attr);
      }
    }
  }
}

export function updateElement(parentElement, newNode, oldNode, index = 0) {
  if (!oldNode) {
    parentElement.appendChild(createElement(newNode));
    return;
  }

  const target = parentElement.childNodes[index];

  if (!newNode) {
    parentElement.removeChild(target);
    return;
  }

  if (newNode.type !== oldNode.type) {
    parentElement.replaceChild(createElement(newNode), target);
    return;
  }

  if (typeof newNode === "string" && newNode !== oldNode) {
    target.nodeValue = newNode;
    return;
  }

  if (newNode.type) {
    updateAttributes(target, newNode.props, oldNode.props);

    const newChildren = newNode.children || [];
    const oldChildren = oldNode.children || [];

    for (let i = 0; i < newChildren.length; i++) {
      updateElement(target, newChildren[i], oldChildren[i], i);
    }

    for (let i = oldChildren.length - 1; i >= newChildren.length; i--) {
      target.removeChild(target.childNodes[i]);
    }
  }
}