[week2] GET userList

index.html

@@ -16,7 +16,7 @@
     <div class="todoapp">
       <h1>
         <span style="color: rgb(251, 73, 73)">T</span
-        ><span style="color: rgb(225, 217, 152)">O</span
+        ><span style="color: rgb(249, 209, 90)">O</span
         ><span style="color: rgb(99, 201, 106)">D</span
         ><span style="color: rgb(18, 72, 208)">O</span
         ><span style="color: rgb(133, 70, 188)">S</span>

index.js

@@ -1,4 +1,5 @@
 import TodoLocalStore from './src/js/core/TodoLocalStore.js';
+import userList from './src/js/core/UserList.js';
 import TodoApp from './src/js/TodoApp.js';
 import { FILTER_TYPES } from './src/utils/const.js';
 new TodoApp(document.querySelector('.App'));

src/js/TodoApp.js

@@ -3,10 +3,9 @@ import TodoInput from './components/TodoInput.js';
 import TodoList from './components/TodoList.js';
 import TodoLocalStore from './core/TodoLocalStore.js';
 import { FILTER_TYPES } from '../utils/const.js';
+import getUserList from './core/UserList.js';
 
 export default function TodoApp($app) {
-  // localStorage.clear();
-
   const initialDtate = {
     todoes: [
       {
@@ -54,13 +53,6 @@ export default function TodoApp($app) {
     onFilter: (filterType) => filterTodo(filterType),
   });
 
-  const init = () => {
-    this.setState({
-      ...this.state,
-    });
-  };
-  init();
-
   const addTodo = (addContent) => {
     const { todoes } = this.state;
     const nextIdx = Math.max(0, ...todoes.map((todo) => todo.idx)) + 1;
@@ -163,4 +155,13 @@ export default function TodoApp($app) {
       });
     }
   };
+
+  const init = async () => {
+    this.setState({
+      ...this.state,
+    });
+    const a = await getUserList();
+    console.log(a);
+  };
+  init();
 }

src/js/core/TodoLocalStore.js

@@ -1,3 +1,4 @@
+//아직 쓰이지 않음
 import { FILTER_TYPES } from '../../utils/const.js';
 export default function TodoLocalStore() {
   this.setState = (nextState) => {

src/js/core/UserList.js

@@ -0,0 +1,15 @@
+const getUserList = async () => {
+  const BASE_URL = 'https://js-todo-list-9ca3a.df.r.appspot.com';
+  try {
+    const res = await fetch(`${BASE_URL}/api/users`);
+    if (res.ok) {
+      // console.log('응답 josn', res.json());
+      return await res.json();
+    } else {
+      return null;
+    }
+  } catch (e) {
+    throw new Error(`오류가 생겼습니다 ${e.message}`);
+  }
+};
+export default getUserList;