taeyeong0814 님의 상세페이지 ＞ [6팀 이태영] Chapter 1-2. 프레임워크 없이 SPA 만들기

[6팀 이태영] Chapter 1-2. 프레임워크 없이 SPA 만들기

by taeyeong08142025. 7. 13.

과제 체크포인트

배포 링크

https://taeyeong0814.github.io/front_6th_chapter1-2/

기본과제

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

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

이벤트 위임

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

심화 과제

Diff 알고리즘 구현

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

과제 셀프회고

  • 1주차 과제와 마찬가지로 2주차 과제도 과제의 핵심이 되는 용어(Virtual DOM, diff 알고리즘, 이벤트 위임 등)만 파악하고 진행을 하였습니다.

  • 용어만 검색하고 실제 구현을 하려고 하니 시작부터 막막했습니다. 사실 지금도 막막합니다. 그래서 선택한 방법이 AI를 이용하여 구현을 하면서 CreateVNode 파일에서 코드 한 줄 한 줄이 의미하는 바가 무엇인지, 그 후 normalizeVNode 파일에서는 어떤 코드를 작성해야 하며 이 코드는 여기서 왜 작성이 되었는지 를 생각하고 물어가며 주석을 달며 2차로 공부를 했습니다.

  • 이 방법이 옳은 방법인가? 에 대한 의문은 있습니다. 하지만 이번 주차 과제를 진행하면서 막막한 상황을 어떻게 시작을 할 지에 대해 감이 왔고 나름의 방법을 찾았다고 생각합니다.

기술적 성장

  • Virtual DOM의 구조와 DOM의 동작 원리에 대해 알게 되었습니다.

  • JSX > Virtual DOM > 실제 DOM 으로 다시 변환되는 과정에 대해 알게 되었습니다.

  • AI를 1차적으로 이용하고 그 후 직접 코드 분석을 해보니 코드에 대한 사용 의도들을 알게 되었습니다.

코드 품질

학습 효과 분석

  • Virtual DOM은 실제 현업에서 주어진 요구사항을 빠르게 처리하는 일정에서는 깊이 고민할 기회가 많지 않은 영역이라고 생각합니다. 하지만 이번 과제를 통해, 이런 내부 동작 원리를 이해하지 못하면 내가 짠 코드의 품질이나 로직이 비효율적이거나 불필요하게 복잡해질 수 있다는 점을 깨달았습니다.

  • 알고리즘적 사고와 함께, 근본 원리를 이해하는 것이 장기적으로 실무 역량을 높이는 데 중요하다는 것을 느꼈습니다. -> 아직 이 부분을 어떻게 적용 할 수 있는가? 에 대한 질문에 대한 답은 못 찾았습니다.

과제 피드백

  • 과제에서 Virtual DOM과 diff 알고리즘의 내부 동작을 직접 구현해야 해서 처음에는 막막했지만 단계별로 주석을 달고 AI의 도움을 받으면서 점차 이해할 수 있었습니다. 그리고 준일 코치님의 과제 설명이 상세해서 그 부분을 AI에게 질문을 해서 함수의 역할과 구현 방향을 잡는데 도움이 되었습니다.

  • 직접 Virtual DOM을 구현해보니, 평소에 사용하던 프레임워크의 동작 원리를 조금은 이해할 수 있어서 좋았습니다.

리뷰 받고 싶은 내용

모호하고 답변이 어려울 수 있는 질문이긴 한데 2주차 과제를 진행하면서 이러한 내용들을 왜? 하는 지에 대한 궁금증이 생겼습니다. 어떠한 부분을 얻어가면 실무적으로 혹은 앞으로의 개발자 인생에서 도움이 되는지? 에 대한 생각이 궁금합니다.

2주차 과제 내용이 실제 사용하고 있는 React 등과 같은 프레임워크 내부에서 사용되는 로직인데 이 부분을 직접 구현하는 방법은 과제를 통해 알았고 그렇다면 React 에서 어떻게 사용되고 있는지 참고 할 수 있는 자료나 간단한 설명을 해주시면 이어서 공부하는데 많은 참고자료로 시작 할 수 있을 것 같습니다.

그리고 현재 Action 에서 CI 가 돌아 갈 때 e2e가 13분 가량 걸리고 통과가 되더라구요. 다른 분들은 2~3분 내외인데. 어떤 부분에서 오래 걸리는지 해결방법을 찾지 못 했습니다. install 하는 것들이 많아 보이긴 했는데 이 부분에서 문제일까요?

과제 피드백

안녕하세요 태님, 수고하셨습니다. 이번 과제는 React의 핵심 원리인 가상 DOM과 diff 알고리즘을 직접 구현해보면서, 프레임워크가 어떻게 효율적인 렌더링을 수행하는지 이해하는 것이 목표였습니다. 특히 이번 과제를 통해 '필요가 공부를 만든다'는 경험을 하셨기를 바랍니다. 단순히 "가상 DOM이란 무엇인가"를 읽고 아는 것과, "가상 DOM을 구현하기 위해 무엇이 필요한가"를 고민하며 공부하는 것은 완전히 다른 깊이의 학습이니까요.

회고에서 언급하신 대로 용어만 검색하고 구현하려니 막막했다고 하셨는데, AI를 활용해서 코드 한 줄 한 줄의 의미를 파악하며 주석을 달고 학습하신 방법도 참신하고 효과적인 접근이었다 생각합니다. docs/ 폴더에 각 모듈별 가이드를 별도로 정리하고, learning-notes/에 학습 과정을 기록한 점이 인상적이네요.

"...2주차 과제를 진행하면서 이러한 내용들을 왜? 하는 지에 대한 궁금증이 생겼습니다. 어떠한 부분을 얻어가면 실무적으로 혹은 앞으로의 개발자 인생에서 도움이 되는지? 에 대한 생각이 궁금합니다." 에 대한 대답을 드리자면,

인간은 조금 막연하거나 모호해도 대충 그렇다하고 넘어갈 수 있는 능력이 있습니다. 돌 한 무더기라고 했을 때 사실 몇 개부터 무더기인지는 정해져있지도 않는 실제하지 않는 개념이지만 뭔가 떠오르는 그 개념은 있죠. 이러한 능력은 추상화나 우리가 소통을 하기에 요긴하게 쓰이는 능력입니다.

반면 컴퓨터는 다릅니다. 정확히 떨어지는 값과 로직 그리고 숫자를 입력하지 않으면 기대했던 정확한 동작을 하지 않습니다. 개발이 어려운 이유는 인간이 잘 사용하지 않는 사고 방식을 통해서 컴퓨터에게 정확한 동작을 수행하도록 요구하는 것이죠. 그래서 퉁치지 말고 막연하게 말고 "정확하게" 지시할 수 있는 능력이 필요합니다.

우리가 추상화가 되어 있는 것을 이해할 때에는 특히 프레임워크같은 것들은 "정확한" 내부의 동작이 아니라 이렇게 되어 있겠지 정도만 알아도 쓰는데 아무런 문제가 없습니다. 그래서 알고 있다고 착각하죠. 그러면 딱 그정도의 시각으로 나중에 최적화를 하거나 복잡한 버그가 났을 경우에도 대처를 하게 됩니다.

그래서 내가 어디까지 정확하게 구현을 해낼 수 있는지 그리고 그렇게 정확한 동작을 찾으러 가는 과정에서 기존의 막연한 생각들이 굉장히 선명해지게 됩니다. 내가 알고 있다 느끼는 범위는 전과 같을지라도 머리속에 새겨져 있는 해상도에서 차이가 나는 것이죠.

무엇보다 React를 만드는 능력이 아니라 이러한 구조들을 만들어내는 여러가지 패턴들이 다른 문제를 해결하는 응용력을 길러주게 됩니다. 마치 수학에서 공식을 외우고 있어서 문제를 푸는 것과 공식을 증명할 줄 알고 도출해내는 원리를 알고 있는 것과의 차이 같은거죠.

그래서 직접 해보는 것을 권합니다. 정답이 있는 코드의 경우 AI가 금세 정답을 주면 그걸 보고 공부하는건 역시 그냥 막연하게 이해하고 넘어가게 됩니다. 뇌는 필요하다 느끼지 않으면 그 이상의 에너지를 투자하지 않아요. 꼼꼼하게 주석을 달고 공부를 했다고 생각했지만 만약 머리속에 남아있는게 선명하지 않다라고 하면 조금 더 필요를 만들어 보는 식의 학습을 해보기를 바랍니다.

너무 너무 수고많았습니다. 10주간의 과제안에서 태영 나름의 해답을 찾기를 바래요. 수고하셨습니다 :)