항해플러스 2주차 회고록

---
•
회고록

항해플러스 2주차 회고록입니다

2주차 과제를 진행하며

2주차 과제는 React의 핵심 개념인 가상돔 만들기였다. 사실 1주차 과제때 innterHTML로 모든 DOM을 새로 그리는 방식으로 과제가 나왔는데 "이게 진짜 SPA가 맞나?" 싶은 의문이 들었다.

성급한 고민이였다🤣. 2주차 과제로 가상돔 만들기가 나오는걸 보고 코치님들이 어떤 의도로 과제를 설계하고 수강생들에게 학습 포인트를 던져주었는지 공감할 수 있었다.

React 팀이 왜 Virtual DOM 아키텍쳐를 도입했는지 조금이나마 공감할 수 있었고 이 Virtual DOM이 어떻게 돌아가는지 코드레벨에서 이해할 수 있었던 점이 매우 큰 경험이였다.

Keep

과제를 진행하면서 몰랐던 개념들을 계속해서 Deep Dive하려고 했다. 평소 호기심이 많고 궁금한걸 못참는 성격인데 이번 과제에서 이런 성향이 도움이 된것 같다.

또 PR쓸 내용들을 미리미리 주제만 간략하게 메모해두고, 이해가 안 된 부분은 따로 짧게라도 기록하며 정리한 덕분에 PR 작성할 때 생각보다 큰 도움이 되었다.

이번주는 팀원들과 많이 소통하려고 노력했다. 노력은 했지만 잘 했는지는 모르겠다.

목요일 저녁.. 술을 잔뜩 먹고 PR을 썼다. 취한 상태에서 뭔가를 하면 이상하게 집중력이 올라가는 것 같다. 아무래도 술을 깨려고 정신을 부여잡은게 아닐까 싶다. 이상태로 PR을 쓴게 지금 돌아보면 대단하다..

잘하는 사람들이 많은데 이렇게 두번이나 BP를 받으니 뿌듯하지만서도 부담감이 느껴진다. 앞으로 이 부담을 좋은 자극으로 삼아서 더 성장해보자.

Problem

많은 궁금증은 결국 피곤해진다... 적당히 생각하고 꼬리에 꼬리를 무는 질문은 좀더 신중해질 필요가 있다.

또한 멘토링 사전 노트 작성 시간을 따로 정해야겠다. 항해의 꽃은 멘토링이라고 해도 과언이 아닌데 좋은 멘토링을 받기 위해선 좋은 질문들이 있어야 한다. 많은 고민 끝에 좋은 질문들이 나온다고 생각하는데 급급히 멘토링 사전 노트를 작성하라고 전달해드려서 팀원분들께 죄송하다. 앞으로 코어타임에 멘토링 노트를 정리해보는 시간을 가지던지 아니면 미리미리 체크해서 꼭 하루 전날에는 멘토링 노트를 같이 정리하자고 전달드려야겠다.

목요일날 술 금지🚫

Try

앞으로 정해진 시간이나 코어타임때 멘토링 사전 노트를 같이 작성해보는 시간을 가지면 좋을 것 같다. 그리고 과제를 진행하면서 계속 모르는 부분에 대해서 간략하게 메모해놓고 공부해보는 습관을 꾸준히 가져보자.

그리고 하루정도는 여유시간을 가질 수 있으면 가져보자.

2주차 과제 배운것 정리

1. 평탄화가 해결하려는 문제

children 배열 안의 중첩 배열, null, false 같은 불필요한 값들을 정리해 렌더링 로직이 단순하고 재귀적으로 처리되게 하기 위함이다.

이런 구조가 있으면

createVNode("div", null,
  "Hello",
  [
    "World",
    ["!", createVNode("span", null, "항해")],
    false,
    null
  ],
  createVNode("section", null,
    createVNode("h1", null, "플러스"),
    ["6기", createVNode("p", null, "화이팅")]
  )
)

평탄화 하기 전

[
  "Hello",
  [
    "World",
    [
      "!",
      { type: "span", props: null, children: ["항해"] }
    ],
    false,
    null
  ],
  {
    type: "section",
    props: null,
    children: [
      { type: "h1", props: null, children: ["플러스"] },
      [
        "6기",
        { type: "p", props: null, children: ["화이팅"] }
      ]
    ]
  }
]

평탄화 후

[
  "Hello",
  "World",
  "!",
  { type: "span", props: null, children: ["항해"] },
  {
    type: "section",
    props: null,
    children: [
      { type: "h1", props: null, children: ["플러스"] },
      "6기",
      { type: "p", props: null, children: ["화이팅"] }
    ]
  }
]

이렇게 children의 depth를 한레벨로 만들어주어 재귀적으로 element를 생성할 수 있게 도와주는 과정이다.

2. WeakMap의 필요성

WeakMap을 처음 들어봤다. 개발할 때 어디서 어떻게 활용해야할 지도 잘 모르겠으나 개념은 알아두면 좋을것 같아 정리했다.

WeakMap은 DOM엘리먼트가 제거될 때 GC에 의해 자동으로 참조가 해제되어 메모리 누수를 막기용이하다. WeakMap은 별도의 cleanup 함수 없이 자동으로 참조가 사라지는데 키에 대한 강력한 참조를 생성하지 않기 때문이라고 한다.

그리고 WeakMap은 이터러블하지 않게 설계되었다.

  1. WeakMap은 GC대상인 키가 언제 회수될 지 예측 불가하다. -> 만약 WeakMap을 순회도중 GC가 키를 회수해버리면 예상치 못한 오류나 동작이 발생할 수 있다.
  2. GC도중 내부 구조가 변해버리면 순회하고 있는 이터레이터의 내부상태가 꼬일 수 있다.
  3. GC도중 순회를 멈추면 되는거아니야? 이터레이터가 GC의 상태를 참조할 순 없나? 라는 단순한 질문도 했지만 자바스크립트 엔진에 있어서 상당한 성능 비용을 발생한다고 한다.

WeakMap은 Virture DOM 이전 상태 저장 할때 , 이벤트 핸들러를 관리할 때 사용하였다.

3. JSX 트랜스파일링과 커스텀 JSX Factory

JSX는 브라우저가 이해할 수 있는 문법이 아니다. React나 다른 프레임워크에서 JSX를 쓰려면 빌드 과정에서 Babel, esbuild와 같은 트랜스파일러가 JSX -> 함수 호출 코드로 변환해주는 과정이 필요하다.

<MyComponent prop="value">Hello</MyComponent>

이런 코드는

React.createElement(MyComponent, { prop: "value" }, "Hello")

이렇게 트랜스파일링 된다.

이때 커스텀 JSX Factory가 나온다. React 대신 다른 라이브러리(이번 과제에선 createVNode)를 쓰고 싶을 땐 Babel이나 esbuild에게 “JSX를 만나면 React.createElement 말고 이 함수를 호출하라”고 알려줘야 한다. 이때 사용하는 방식이

프라그마 주석을 통해 JSX를 만나면 createVnode를 호출하라고 명시한다.

/** @jsx createVNode */

그리고 esbuild 설정을 통해 jsxFactory를 지정해서 JSX 문법을 createVNode로 변환하도록 설정한다.

esbuild: {
  jsx: "transform",
  jsxFactory: "createVNode",
},

덕분에 아래 코드는

<Toast isVisible={true} message="안녕하세요" />

이렇게 변환될 수 있다.

createVNode(Toast, { isVisible: true, message: "안녕하세요" })

그리고 React 17+ 부터는 import React from 'react' 문이 없어졌는데 이제는 React.createElement() 대신 react/jsx-runtime 패키지의 jsx(), jsxs() 헬퍼 함수를 import해서 사용하기 때문이다.

{
  "jsx": "react-jsx",
  "jsxImportSource": "preact"
}

이런식으로 작성하는데 이때는 jsxFactory가 아니라 어떤 라이브러리에서 jsx 헬퍼를 가져올지만 지정해서 사용한다.

import { jsx } from "preact/jsx-runtime";
jsx("h1", { children: "Hello" });

그러면 이런식으로 빌드타임에 트랜스파일링 된다.

4. normalized

함수형 컴포넌트 실행 → VNode로 변환 하는 단계이다. children에서 불필요한 값(false, null, undefined) 제거해 깨끗한 렌더링을 준비한다.

돛 올리기

10주간의 항해중 이제 돛을 올리고 본격적으로 앞으로 나아가는 시점이라고 생각한다. 이번주는 기술적 고민뿐만 아니라 준일 코치님 덕분에 스스로에 대한 고민을 할 수 있었던 시간이다.

그리고 이 항해를 함께할 수 있는 좋은 동료들을 만날 수 있을 것 같다. 같이 배우고, 같이 고민하고 같이 헤매면서 모두가 함께 조금씩 앞으로 나아가길 바란다.

출항은 이미 시작되었고 내가 띄운 이 배가 어디로 향할지는 아직 모르겠다.

다만, 중간에 가라앉지 않기를. 그리고 목적지까지 무사히 닿기를 조용히 기도해본다.

목차