choijming21 님의 블로그

1. 프로젝트 구조📦src ┣ 📂types ┃ ┗ 📜createElementTypes.ts // 타입 정의 ┣ 📜App.tsx // 메인 컴포넌트, 진입점 ┣ 📜jsx.ts // createElement 구현 ┣ 📜render.ts // Virtual DOM → 실제 DOM 변환 ┗ 📜style.css // 스타일    2. Virtual DOM 렌더링 함수(render.ts)렌더링 함수는 Virtual DOM을 실제 DOM으로 변환하는 핵심 기능을 담당합니다.import { VirtualElement } from "./types/createElementTypes";export ..

오늘은 컴포넌트 작성과 Virtual DOM 구조를 분석해보겠습니다!  1. 컴포넌트 구현App.tsxfunction App() { return ( Hello, React! );}  Header.tsxfunction Header({ title, buttonText }) { return ( {title} {buttonText} );}  Content.jsxfunction Content({ text }) { return ( {text} );}    2. Virtual DOM 동작 원리컴포넌트가 Virtual DOM을 반환하도록 하기 위해 createElement 함수를 구현했습니다.function ..

오늘은 Virtual DOM의 개념을 이해하고 이를 구현하기 위한 createElement 함수를 만들어보았습니다!    Virtual DOM 이란?Virtual DOM은 실제 DOM(Document Object Model)의 가벼운 복사본이라고 할 수 있습니다. JavaScript 객체 형태로 표현되며, 실제 DOM과 달리 메모리에만 존재하기 때문에 변경 작업이 훨씬 빠릅니다. 실제 DOM 구조가 있다고 가정해보겠습니다. Hello World This is a paragraph 이것을 Virtual DOM으로 표현하면 다음과 같은 JavaScript 객체가 됩니다.{ "type": "div", "props": { "className": "container" }, "children": [..

1. 초기 개발 환경 구축 vite 프로젝트 생성먼저 Vanilla Javascript 기반의 Vite 프로젝트를 생성합니다.Vite를 사용한 이유: Vite는 매우 빠른 개발 서버와 빌드 도구를 제공합니다.# Vite 프로젝트 생성npm create vite@latest whatever-project --template vanilla# 프로젝트 폴더로 이동cd whatever-project# 의존성 패키지 설치npm install  Babel 설치 및 설정JSX를 JavaScript로 변환하기 위한 Babel 패키지를 설치합니다.# Babel 관련 패키지 설치npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-tra..