diff --git a/dist/index.html b/dist/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..7fbf57365d4345e919777cc372b298c0fb6ef35d
--- /dev/null
+++ b/dist/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+ <head>
+ <title> muiBasic </title>
+ <meta charset="UTF-8"/>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script src="./bundle.js" type="text/javascript"></script>
+ </body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..7063b60cab03b80ba23b5d0bf5e9d31fc9fc93ab
--- /dev/null
+++ b/package.json
@@ -0,0 +1,34 @@
+{
+ "name": "muibasic_starterkit",
+ "version": "1.0.0",
+ "description": "Boiler plate for MaterialUI Development",
+ "main": "webpack.config.js",
+ "dependencies": {
+ "@emotion/react": "^11.9.3",
+ "@emotion/styled": "^11.9.3",
+ "@mui/material": "^5.8.6"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.18.6",
+ "@babel/core": "^7.18.6",
+ "@babel/plugin-proposal-class-properties": "^7.18.6",
+ "@babel/preset-env": "^7.18.6",
+ "@babel/preset-react": "^7.18.6",
+ "babel-loader": "^8.2.5",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "webpack": "^5.73.0",
+ "webpack-cli": "^4.10.0"
+ },
+ "scripts": {
+ "build": "webpack --mode development",
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "keywords": [
+ "Material",
+ "UI",
+ "ReactJS"
+ ],
+ "author": "Jae Young Choi",
+ "license": "MIT"
+}
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000000000000000000000000000000000000..73c0283ff38c48aaaa42f3bf026258c17fb91359
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+
+export default function App () {
+ return <Typography variant="h1">Hello World</Typography>
+}
+
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..41f167450e9b2db20951bb5e3726796bd54a6c84
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App/>, document.getElementById('app'));
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..794cb598ae04c81a5dec0774c581030763da3b23
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,33 @@
+const path = require('path');
+
+module.exports = {
+ // enntry file
+ entry: './src/index.js',
+ // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
+ output: {
+ path: path.resolve(__dirname, 'dist'),
+ filename: 'bundle.js'
+ },
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ include: [
+ path.resolve(__dirname, 'src')
+ ],
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-env', '@babel/preset-react'],
+ plugins: ['@babel/plugin-proposal-class-properties']
+ }
+ }
+ }
+ ]
+ },
+ devtool: 'source-map',
+ // https://webpack.js.org/concepts/mode/#mode-development
+ mode: 'development'
+};
+