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-transform-react-jsx
2. 설정 파일 작성
Babel 설정 (babel.config.json)
- 프로젝트 루트에 babel.config.json 파일을 생성:
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/plugin-transform-react-jsx", {
"pragma": "createElement",
"pragmaFrag": "Fragment"
}]
]
}
이 설정은:
- @babel/preset-env: 최신 JavaScript를 브라우저가 이해할 수 있는 코드로 변환
- @babel/plugin-transform-react-jsx: JSX를 JavaScript로 변환
- pragma: "createElement": JSX를 변환할 때 사용할 함수 이름을 지정
Vite 설정 (vite.config.js)
- 프로젝트 루트에 vite.config.js 파일을 생성:
import { defineConfig } from "vite";
export default defineConfig({
esbuild: {
jsxFactory: "createElement",
jsxFragment: "Fragment",
},
});
- 이 설정은 Vite에게 JSX를 JavaScript로 변환할 때 createElement 함수를 사용하라고 지시합니다.
HTML 파일 수정(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My React from Scratch</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.jsx"></script> // src 수정
</body>
</html>
3. JSX 테스트 코드 작성
src/main.jsx 파일 생성
/** @jsx createElement */
function createElement(type, props, ...children) {
return {
type, // HTML 태그 이름 ('div', 'h1' 등)
props, // 속성들 객체 (className, id 등)
children, // 자식 요소들의 배열
};
}
const element = (
<div className="container">
<h1 id="title">Hello World</h1>
<p id="content">This is a paragraph</p>
</div>
);
console.log(element);
4. 프로젝트 구조
my-react/
├── index.html # 메인 HTML 파일
├── package.json # 프로젝트 설정 파일
├── babel.config.json # Babel 설정
├── vite.config.js # Vite 설정
└── src/
└── main.jsx # 메인 JSX 파일
5. 실행 방법
# 개발 서버 실행
npm run dev
6. JSX 변환 과정 이해
- jsx 코드 작성:
<div className="container">
<h1>Hello World</h1>
</div>
- Babel이 변환한 JavaScript 코드:
createElement(
"div",
{ className: "container" },
createElement("h1", null, "Hello World")
);
- createElement 함수가 생성하는 객체 구조(console에서 확인):
{
type: "div",
props: { className: "container" },
children: [
{
type: "h1",
props: null,
children: ["Hello World"]
}
]
}
이렇게 생성된 객체 구조는 Virtual DOM의 기초가 되며, 이후에 실제 DOM 요소로 변환 되어 브라우저에 렌더링됩니다.
이 모든 과정은:
- JSX 작성 →
- Babel이 JSX를 createElement 호출로 변환 →
- createElement가 Virtual DOM 객체 생성 →
- (나중에 구현할) render 함수가 실제 DOM으로 변환
의 순서로 진행됩니다.
'왓에버' 카테고리의 다른 글
| Virtual DOM을 실제 DOM으로 렌더링 하기 (0) | 2025.02.05 |
|---|---|
| 컴포넌트 작성과 Virtual DOM 구조 분석 (1) | 2025.01.28 |
| Virtual DOM과 createElement 함수 구현 (0) | 2025.01.28 |