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

[BongjoonKim]

과제 체크포인트

기본과제

가상돔을 기반으로 렌더링하기

• createVNode 함수를 이용하여 vNode를 만든다.
• normalizeVNode 함수를 이용하여 vNode를 정규화한다.
• createElement 함수를 이용하여 vNode를 실제 DOM으로 만든다.
• 결과적으로, JSX를 실제 DOM으로 변환할 수 있도록 만들었다.

이벤트 위임

• 노드를 생성할 때 이벤트를 직접 등록하는게 아니라 이벤트 위임 방식으로 등록해야 한다
• 동적으로 추가된 요소에도 이벤트가 정상적으로 작동해야 한다
• 이벤트 핸들러가 제거되면 더 이상 호출되지 않아야 한다

심화 과제

1) Diff 알고리즘 구현

• 초기 렌더링이 올바르게 수행되어야 한다
• diff 알고리즘을 통해 변경된 부분만 업데이트해야 한다
• 새로운 요소를 추가하고 불필요한 요소를 제거해야 한다
• 요소의 속성만 변경되었을 때 요소를 재사용해야 한다
• 요소의 타입이 변경되었을 때 새로운 요소를 생성해야 한다

2) 포스트 추가/좋아요 기능 구현

• 비사용자는 포스트 작성 폼이 보이지 않는다
• 비사용자는 포스트에 좋아요를 클릭할 경우, 경고 메세지가 발생한다.
• 사용자는 포스트 작성 폼이 보인다.
• 사용자는 포스트를 추가할 수 있다.
• 사용자는 포스트에 좋아요를 클릭할 경우, 좋아요가 토글된다.

과제 셀프회고

가상돔 만들기와 이벤트 매니저를 구현한 코드를 봤을 때는 많이 복잡하지 않지만, 이 개념을 정확하게 이해하고 그것을 코드로 구현하는 것이 생소하고 어려웠던 것 같습니다. 지금 과제야 기본적인 화면 컴포넌트와 만들어야할 코드도 제공해주었기 때문에, 조금은 더 이번 개념을 구현하는데 있어 수월했지만, 만약에 처음부터 상태관리부터 컴포넌트, 라우터를 구현하라고 하면 할 수 있을거라고 생각하지 않습니다. 언젠가 시니어 개발자로 성장해서 자바스크립트의 개념과 구조를 구체화하여 코드로 구현할 수 있을 정도의 개발자가 되고 싶습니다

기술적 성장

가상돔의 개념과 특히 이벤트 매니저에 대해서는 React가 어떻게 동작하는지 몸으로 느끼고 이해할 수 있었습니다.

코드 품질

eventManager.js 쪽에서 어느정도 짠 코드를 claude ai를 통해 다듬었는데, 다른 분들은 어떻게 eventManager 코드를 짰을지 궁금합니다.

학습 효과 분석

가장 큰 배움은 자바스크립트의 이벤트 개념(버블링, 위임 등)을 이해함으로써, 추후 개발에서 이벤트 관련된 불필요한 코드 작성을 막을 수 있을 것 같습니다.

과제 피드백

  if (typeof vNode.type === "function") {
    return normalizeVNode(
      vNode.type({ ...vNode.props, children: vNode.children }),
    );
  }

어떻게 normalizeVNode.js에서 vNode의 type이라는 키에 Function 정보가 들어가는지 궁금합니다.
예를 들어 vNode.type이 Object타입인 경우 type은 div, props에는 class 나 id나 style, children에는 하위 컴포넌트 정보가 있을텐데, 함수인 경우에는 어디서 어떻게 vNode의 딱 type이라는 키에 함수 정보를 넣어주는지 궁금합니다.

export function render() {
  const Page = router.get().getTarget() ?? NotFoundPage;
  const $root = document.querySelector("div");
  if ($root) {
    try {
      // <Page /> 자체가 vNode 입니다
      // $root가 진짜 컴포넌트
      // console.log("Page", typeof <Page />)
      console.log("렌더함수 실행 원리");
      renderElement(<Page />, $root);
    } catch (error) {
      if (error instanceof ForbiddenError) {
        router.get().push("/");
        return;
      }
      if (error instanceof UnauthorizedError) {
        router.get().push("/login");
        return;
      }
      console.error(error);
    }
  }
}

혹시 render.jsx에 있는 renderElement(, $root);코드에서 <Page />라는 vNode는 type은 HomePage나 ProfilePage 등 어떤 함수이고, props는 null, children은 []이라고 표현하기로한 jsx의 룰이라서 type에 자동으로 함수가 박히게 되는 걸까요?

리뷰 받고 싶은 내용

pages/HomePage.jsx에서

/// 좋아요 클릭 함수  
const handleClick = (id) => {
    console.log("clicked Data", id);
    if (!isLogin) {
      alert("로그인 후 이용해주세요");
    } else {
      const thisPost = globalStore.getState().posts.find((el) => el.id === id);
      const otherPosts = globalStore
        .getState()
        .posts.filter((el) => el.id !== id);
      if (thisPost) {
        if (thisPost.likeUsers.includes(globalStore.getState().currentUser)) {
          thisPost.likeUsers = thisPost.likeUsers.filter(
            (user) => user != globalStore.getState().currentUser,
          );
        } else {
          thisPost.likeUsers.push(globalStore.getState().currentUser);
        }
        globalStore.setState({ posts: [...otherPosts, thisPost] });
      }
    }
  };

가 있는데,
thisPost는 졸아요를 누른 포스트, otherPosts는 그 외의 포스트를 의미합니다. 좋아요를 A라는 유저가 누르면 좋아요가 1이 되는데, 한 번더 누르면 0이 되고, 다른 로그인한 유저 B가 누르면 좋아요가 2가 되도록 하는 로직입니다.
코드가 include, filter, 조건문으로 조금 복잡하게 짜여 있는데, 좀 더 간결하게 표현할 수 있는 방식이 있을지 궁금합니다.

[developer-1px]

피드백에는 자리가 모자라서 요청했던 코드 수정한 내용 남겨요.

/// 좋아요 클릭 함수 개선
const handleClickPostToggleLike = (postId) => {

  if (!isLogin) {
    alert("로그인 후 이용해주세요");
    return // early return을 이용한 depth 줄이기
  }

  // state는 한번만 호출하는 걸로
  const {posts, currentUser} = globalStore.getState()

  // 결국 바꾸고 싶은 값이 posts이므로 posts를 map
  const updatedPost = posts.map(post => {
    if (post.id !== postId) return post

    // 이미 좋아요한 currentUser가 있으면 
    const likeUsers = post.likeUsers.includes(currentUser)
      ? post.likeUsers.filter((user) => user != currentUser) // 제거하고 
      : [...post.likeUsers, currentUser] // 없으면 추가하고

    return {...post, likeUsers} // return
  })

  // update State
  globalStore.setState({ posts: updatedPost });
};

[Anne-Hyeyeon]

function createContent(event) {
  event.preventDefault();
  const { posts, currentUser } = globalStore.getState();
  const formData = new FormData(event.target);
  
  const newPost = {
    id: posts.length + 1,
    author: currentUser.username,
    time: Date.now(),
    content: formData.get("content"),
    likeUsers: []
  };
  
  globalStore.setState({ posts: [...posts, newPost] });
}

이 부분은 구조 분해 할당으로 getState()의 중복 호출을 줄이고 가독성도 좋게 할 수 있을 듯합니다!
과제 하시느라 고생 많으셨습니다 :D

[CRITICBANGGU]

결국 props값이 있을때만 updateAttribute가 실행되어야 하는 상황 같습니다. early return 해주는건 어떨까요?!

    if(!props) return;

   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);
      }
    });

이번주 과제도 고생많으셨습니다 :)