๋ถ์คํธ์กํธ๋ ์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ง์ ์ฌ์ฉํ์ฌ ๋ง๋ ์น ํ๋ ์์ํฌ์ ๋๋ค.
React ๊ณต์ ๋ฌธ์๋ฅผ ํฌํจํ ๋ง์ ๊ณณ์ React๋ฅผ ๋ค๋ฃจ๋ ๋ฒ์ด ์ค๋ช ๋์ด ์์ง๋ง, React์ ๋ด๋ถ ๊ตฌ์กฐ๋ฅผ ์ค๋ช ํ ๊ณณ์ ๋ง์ง ์์์ต๋๋ค. ๊ทธ๋์ ์ ํฌ ํ์ React์ ๋ด๋ถ ๊ตฌ์กฐ์ ์น ํ๋ ์์ํฌ์ ๋ํ ๋ ๊น์ ๊ธฐ์ ์ ์ธ ์ดํด๋ฅผ ์ํด ๋ฆฌ์กํธ ์ฌ์ค๊ณ๋ฅผ ๋์ ํ์ต๋๋ค.
Boostact๋ React์ ๋นํด ์ฌ์ด์ฆ๊ฐ ์๊ณ , ์ฑ๋ฅ ๋ฉด์์๋ ๋ ๋ฐ์ด๋์ง ์์ต๋๋ค. ํ์ง๋ง, ๋ถ๋ช React์ ๋งค์ฐ ์ ์ฌํ๊ฒ ๋์ํฉ๋๋ค. ์ ํฌ๋ Boostact๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์๋ ๊ฐ๋ฐ์๋ค์ด React๋ฅผ ์ดํดํ๋ ๋ฐ์ ํฐ ๋์์ด ๋ ๊ฒ์ด๋ผ ์๊ฐํฉ๋๋๋ค. ๋ ๋์๊ฐ, ์น ํ๋ ์์ํฌ ์ ๋ฐ์ ์ดํดํ๋ ๋ฐ์๋ ๋์์ด ๋ ๊ฒ์ ๋๋ค.
์๋์์๋ ์ด๋ป๊ฒ Boostact๋ฅผ ์ฌ์ฉํด๋ณผ ์ ์๋์ง ๊ฐ๋จํ๊ฒ ์ค๋ช ํ๋ ค๊ณ ํฉ๋๋ค.
์์ธํ ์ฌํญ์ ๋ถ์คํธ์กํธ ๊ณต์๋ฌธ์์์ ํ์ธํด์ฃผ์๊ธฐ ๋ฐ๋๋๋ค.
Boostact ๋ชจ๋์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ webpack๊ณผ babel์ด ํ์์ ์ผ๋ก ํ์ํฉ๋๋ค. ๋ฐ๋ผ์ ์๋์ devDependencies๋ฅผ ๋ชจ๋ ์ถ๊ฐํด์ฃผ์๊ธฐ ๋ฐ๋๋๋ค.
mkdir projectFolder
npm init -y
npm install boostact
npm install @babel/cli @babel/core @babel/polyfill @babel/preset-env @babel/preset-react --save-dev
npm install webpack webpack-cli webpack-dev-server --save-dev
npm install html-webpack-plugin mini-css-extract-plugin --save-dev
์ด์ package.json์์ webpack ์คํ ๋ช ๋ น์ด๋ฅผ ๋ง๋ค์ด์ฃผ์๋ฉด ๋ฉ๋๋ค. ์๋๋ .babelrc file๊ณผ webpack.config.js file ์ ๋๋ค.
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
mode: "development",
entry: {
index: ["@babel/polyfill", "./index.js"],
},
output: {
path: path.join(__dirname, "dist"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\\.(js|jsx)$/,
use: "babel-loader",
exclude: /node_modules/,
},
],
},
devServer: {
host: "127.0.0.1",
contentBase: path.join(__dirname, "/dist"),
compress: true,
hot: true,
inline: true,
port: 9000,
open: true,
},
resolve: {
extensions: [".js", ".jsx"],
},
plugins: [
new HtmlWebpackPlugin({
title: "index",
hash: true,
chunks: ["index"],
filename: "index.html",
template: "./index.html",
}),
],
};<!DOCTYPE html>
<body>
<div id="root"></div>
</body>
<script type="module" src="index.jsx"></script>import { Boostact } from "boostact";
import App from "./App";
/** @jsx Boostact.createElement */
const root = document.getElementById("root");
Boostact.render(<App />, root);import { Boostact } from "boostact";
/** @jsx Boostact.createElement */
const App = () => {
return (
<div>
<h1>Hello!</h1>
<h2>This is Boostact!</h2>
</div>
);
};
export default App;์ฌ๊ธฐ๊น์ง ์ฝ์ผ์ จ๋ค๋ฉด, ์ฌ๋ฌ๋ถ๋ ๋ถ์คํธ์กํธ๋ฅผ ์ฌ์ฉํ์ค ์ ์์ต๋๋ค. ์ฃผ์ํ ์ ์ babel์ด jsx๋ฅผ React.createElement๊ฐ ์๋ Boostact.createElement๋ก ํ์ฑ์ ํ๊ฒ๋, ์๋์ jsDoc์ ์ถ๊ฐํด์ผ ํ๋ค๋ ์ ์ ๋๋ค.
/** @jsx Boostact.createElement/Boostact is a web framework created using vanilla JavaScript. There are many descriptions of how to deal with React, including official documents. However, it is difficult to understand the principle of react deeply with simple examples and explanations. To overcome this, we've tried to redesign React. And surprisingly, we created Boostact that works just like React! (Unexpectedly, it includes our own idea. If we cannot follow the action of the actual React, we tried to solve it in a creative way.) Our code is a very small size compared to React, and we cannot say it is excellent in performance at the same time. But rather, that makes it understandable to any developer who knows JavaScript. We will discuss in detail how to use Boostact and how to implement each Hook, a virtual DOM. Please read below.
To use the Boostact module, webpack and babel are essential. Therefore, please add all of the devDependencies below.
Create project
mkdir projectFolder
npm init -y
npm install boostact
install babel
npm install @babel/cli @babel/core @babel/polyfill @babel/preset-env @babel/preset-react --save-dev
install webpack
npm install webpack webpack-cli webpack-dev-server --save-dev
npm install html-webpack-plugin mini-css-extract-plugin --save-dev
Now you can create a webpack run command in package.json! Below are .babelrc files and webpack.config.js files. You can modify it according to what you want..babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
mode: "development",
entry: {
index: ["@babel/polyfill", "./index.js"],
},
output: {
path: path.join(__dirname, "dist"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\\.(js|jsx)$/,
use: "babel-loader",
exclude: /node_modules/,
},
],
},
devServer: {
host: "127.0.0.1",
contentBase: path.join(__dirname, "/dist"),
compress: true,
hot: true,
inline: true,
port: 9000,
open: true,
},
resolve: {
extensions: [".js", ".jsx"],
},
plugins: [
new HtmlWebpackPlugin({
title: "index",
hash: true,
chunks: ["index"],
filename: "index.html",
template: "./index.html",
}),
],
};<!DOCTYPE html>
<body>
<div id="root"></div>
</body>
<script type="module" src="index.jsx"></script>import { Boostact } from "boostact";
import App from "./App";
/** @jsx Boostact.createElement */
const root = document.getElementById("root");
Boostact.render(<App />, root);import { Boostact } from "boostact";
/** @jsx Boostact.createElement */
const App = () => {
return (
<div>
<h1>Hello!</h1>
<h2>This is Boostact!</h2>
</div>
);
};
export default App;If you followed up to here, you can use Boostact. Note that jsDoc should be added so that the babel can parse jsx as Boostact.createElement instead of React.createElement.
jsdoc (essential)
/** @jsx Boostact.createElement/