next-step · kimjanghu · Jul 6, 2021 · Jul 6, 2021 · Jul 7, 2021 · Jul 7, 2021
diff --git a/index.html b/index.html
@@ -6,10 +6,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>이벤트 - TODOS</title>
   <link rel="stylesheet" href="./src/css/style.css" />
+  <script type="module" src="./src/index.js" defer></script>
 </head>
 
 <body>
-  <div class="todoapp">
+  <div id="app" class="todoapp">
     <h1>TODOS</h1>
     <input id="new-todo-title" class="new-todo" placeholder="할일을 추가해주세요" autofocus />
     <main>

diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,5 @@
+export default class App {
+  constructor($target) {
+    console.log($target);
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,4 @@
+import App from './App.js';
+import { $ } from './utils/utils.js';
+
+document.addEventListener('DOMContentLoaded', () => new App($('#app')));
diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -0,0 +1,4 @@
+const $ = (selector) => document.querySelector(selector);
+const $$ = (selector) => document.querySelectorAll(selector);
+
+export { $, $$ };