2025-07-16 (수)
📝 시작하는 말: “재귀? 진격의 거인?”
주의! 스포가 포함 되어 있으니 지금 뒤로 가셈 보기 싫으면 ㄹㅇ임.
스포방지스포방지스포방지스포방지스포방지스포방지스포방지스포방지스포방지스포방지스포방지스포방지스포방지스포방지스포방지스포방지스포방지스포방지
과제를 하는 도중에 문득 내가 좋아하는 애니메이션 진격의 거인에서도 재귀적인 구조나 표현이 많이 들어갔다는 생각이 들길래 바로 GPT와 잠답을 나눴다. 키워드들이 나온거 같아서 간략하게 정리해봤다. 근데 정리라는 표현이 맞을지는 모르겠다. 낙서가 더 맞아보인다.
물론 나 혼자 생각 안했다. AI툴(GPT, Gemini) 이용했다....ㅎ. 혼자 생각하기엔 현재 에너지가 없다.. 그치만 소스 제공은 어쨌든 나잖슴~~!
에렌이 과거와 미래를 동시에 조작하고, 그 자체가 순환을 만들어내는 시점
➡️ ➡️ ➡️
자기 자신을 참조하여 전체 구조를 완성하는 지점
이게 우리 과제에도 존재한다. 바로 createElement 함수와 normalizeVNode 함수의 상호작용 이다.
✅ 코드 설명 및 대입
createElement의 재귀: 과거(부모)가 미래(자식)를 만든다.
1 // createElement.js
2 // ...
3 for (const child of children) {
4 el.appendChild(createElement(child)); // (A)
5 }createElement함수는 부모 노드를 만들다가 자식 노드를 만들기 위해 자신을 다시 호출함. (과거로 간 에렌의 행동으로 미래의 길을 열어주는 것)
normalizeVNode의 재귀: 미래(컴포넌트)가 과거(기본 태그)를 결정
1 // normalizeVNode.js
2 // ...
3 if (typeof vNode?.type === "function") {
4 // (B) 함수 컴포넌트를 실행시켜 새로운 vNode를 얻는다.
5 const newVNode = vNode.type({ ...vNode.props, children: vNode.children });
6 // (C) 얻어진 vNode를 다시 정규화하기 위해 자기 자신을 호출한다.
7 return normalizeVNode(newVNode);
8 }- 컴포넌트(미래의 모습)이 먼저 주어짐
normalizeVNode는 컴포넌트 해석을 위한 함수 실행. 그 결과 기본 단위(과거)로 구성된vNode가 드러남- 이 과정이 재귀적으로 일어나서 모든 컴포넌트가 기본 태그로 완전히 분해될 때 까지 반복
createElement와normalizeVNode의 연결
💡 결론 (AI 요약본)
- createElement가 실행되면 가장 먼저 normalizeVNode를 호출합니다.
createElement(<HomePage />)
- normalizeVNode는 를 만나 재귀적으로 자신을 호출하며, 최종적으로 기본 HTML 태그로 구성된 거대한 vNode 트리로 변환합니다.
normalizeVNode(<HomePage />)
-> normalizeVNode(<div><SearchBar />...</div>)
-> ... -> { type: 'div', props: ..., children: [...] }-
이렇게 완전히 "과거"의 기본 단위로 분해된 vNode가 createElement로 돌아옵니다.
-
createElement는 이 vNode를 받아 재귀적으로 appendChild를 호출하며 실제 DOM 트리를 만들어나갑니다.
normalizeVNode는 미래(컴포넌트)를 보고 그것이 어떤 과거(기본 태그)로 구성되어야 하는지를 결정합니다.createElement는 그렇게 결정된 과거(기본 태그 vNode)를 기반으로 실제 미래(DOM 트리)를 만들어냅니다.
🤔 헷갈렸던 점
createElement안의 다양한 분기와 조건에 맞춰가며 작성하는 것에 어려움을 느낌...
🔧 시도했던 해결책
console.log()로 일일이 추적하며 함수가 어떻게 작동하는지 하나씩 따라가봤음..- Gemini 에게 물어보기..🤖
🎯 내일의 목표
- 다음 과제로 넘어가기... 이벤트 매니저 완성..
- 과제 통과 할 수 있을까?
✍️ 한 줄 회고
“재귀 명강의: 진격의 거인”
재밋어요