DKU-D-Coding · Jun-Jinu · Feb 28, 2023 · Mar 1, 2023 · Mar 4, 2023 · JunilHwang
diff --git a/week4/index.html b/week4/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="style.css">
+    <title>4주차 JavaScript 실습</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="./src/App.js" type="module"></script>
+</body>
+</html>
diff --git a/week4/src/App.js b/week4/src/App.js
@@ -0,0 +1,135 @@
+import Component from "./Component.js";
+
+import ItemAppender from "./components/ItemAppender.js";
+import ItemsView from "./components/ItemsView.js";
+
+import { observable } from "./Observer.js";
+
+class App extends Component {
+    init() {
+        this.state = observable({
+            todoItems: [
+                { name: "코딩하기", done: false, updateState: false },
+                { name: "밥먹기", done: true, updateState: false },
+                { name: "양치하기", done: false, updateState: false },
+            ],
+        });
+    }
+
+    template() {
+        return `
+            <h1>4주차 미션 - 옵저버 </h1>
+
+            <div id="item-appender"></div>
+            <div id="items-view"></div>
+        `;
+    }
+
+    mount() {
+        //투두리스트 state를 불러옴
+        const { todoItems } = this.state;
+        const $itemAppender = this.$component.querySelector("#item-appender");
+        const $itemsView = this.$component.querySelector("#items-view");
+
+        // state를 props로 전달
+        new ItemAppender($itemAppender);
+        new ItemsView($itemsView, { todoItems });
+    }
+
+    setEvents() {
+        this.appendTodoItem();
+        this.deleteTodoItem();
+        this.toggleTodoItem();
+        this.updateTodoItem();
+    }
+
+    appendTodoItem() {
+        const { todoItems } = this.state;
+        const appendBtn = this.$component.querySelector("#append-btn");
+
+        if (appendBtn) {
+            appendBtn.addEventListener("click", () => {
+                const newTodo =
+                    this.$component.querySelector("#append-input").value;
+
+                this.setState({
+                    todoItems: [
+                        ...todoItems,
+                        observable({
+                            name: newTodo,
+                            done: false,
+                            updateState: false,
+                        }),
+                    ],
+                });
+            });
+        }
+    }
+
+    deleteTodoItem() {
+        const { todoItems } = this.state;
+        const $itemsView = this.$component.querySelector("#items-view");
+
+        $itemsView.addEventListener("click", (event) => {
+            if (event.target.id === "delete-btn") {
+                const todoIndex = parseInt(
+                    event.target.closest("li").getAttribute("data-id")
+                );
+                console.log(todoIndex);
+
+                const deletedTodoItems = todoItems.filter(
+                    (item, index) => index !== todoIndex
+                );
+                this.setState({ todoItems: deletedTodoItems });
+            }
+        });
+    }
+
+    toggleTodoItem() {
+        const { todoItems } = this.state;
+        const $itemsView = this.$component.querySelector("#items-view");
+
+        $itemsView.addEventListener("change", (event) => {
+            if (event.target.id === "toggle-btn") {
+                const todoIndex = parseInt(
+                    event.target.closest("li").getAttribute("data-id")
+                );
+                const toggledTodoItems = [...todoItems];
+                toggledTodoItems[todoIndex] = {
+                    ...toggledTodoItems[todoIndex],
+                    done: !toggledTodoItems[todoIndex].done,
+                };
+                this.setState({ todoItems: toggledTodoItems });
+            }
+        });
+    }
+
+    updateTodoItem() {
+        const { todoItems } = this.state;
+        const $itemsView = this.$component.querySelector("#items-view");
+
+        $itemsView.addEventListener("click", (event) => {
+            if (event.target.id === "update-btn") {
+                const todoIndex = parseInt(
+                    event.target.closest("li").getAttribute("data-id")
+                );
+
+                const updatedTodoItems = [...todoItems];
+                updatedTodoItems[todoIndex].updateState =
+                    !updatedTodoItems[todoIndex].updateState;
+
+                if (!updatedTodoItems[todoIndex].updateState) {
+                    const $itemsTitle = this.$component.querySelector(
+                        `#title-${todoIndex}`
+                    );
+
+                    updatedTodoItems[todoIndex].name = $itemsTitle.value;
+                }
+
+                this.setState({ todoItems: updatedTodoItems });
+            }
+        });
+    }
+}
+
+new App(document.querySelector("#app"));
diff --git a/week4/src/Component.js b/week4/src/Component.js
@@ -0,0 +1,54 @@
+import { observable, observe } from "./Observer.js";
+
+export default class Component {
+    $component;
+    $props;
+    state;
+
+    constructor($component, $props) {
+        this.$component = $component;
+        this.$props = $props;
+        this.init();
+        this.updateState();
+        this.render();
+    }
+
+    template() {
+        return "<div></div>";
+    }
+
+    mount() {
+        /* 하위 컴포넌트 마운트 */
+    }
+
+    render() {
+        this.$component.innerHTML = this.template();
+        this.mount();
+        this.setEvents();
+    }
+
+    setState(newState) {
+        this.state = { ...this.state, ...newState };
+        this.render();
+    }
+
+    init() {
+        //state 초기화
+        // this.state = observable({
+        //     todoItems: [
+        //         { name: "코딩하기", done: false, updateState: false },
+        //         { name: "밥먹기", done: true, updateState: false },
+        //         { name: "양치하기", done: false, updateState: false },
+        //     ],
+        // });
+    }
+
+    setEvents() {}
+
+    updateState() {
+        observe(() => {
+            this.render();
+            console.log("렌더링");
+        });
+    }
+}
diff --git a/week4/src/Observer.js b/week4/src/Observer.js
@@ -0,0 +1,66 @@
+function debounce(func) {
+    let frameId;
+    return function () {
+        if (frameId) {
+            cancelAnimationFrame(frameId);
+        }
+        frameId = requestAnimationFrame(func);
+    };
+}
-function debounce(func) {
-    let frameId;
-    return function () {
-        if (frameId) {
-            cancelAnimationFrame(frameId);
-        }
-        frameId = requestAnimationFrame(func);
-    };
-}
+function debounce(func) {
+    let frameId;
+    return () => {
+        cancelAnimationFrame(frameId);
+        frameId = requestAnimationFrame(func);
+    };
+}
-function debounce(func) {
-    let frameId;
-    return function () {
-        if (frameId) {
-            cancelAnimationFrame(frameId);
-        }
-        frameId = requestAnimationFrame(func);
-    };
-}
+function debounce(func) {
+    let frameId;
+    return () => {
+        cancelAnimationFrame(frameId);
+        frameId = requestAnimationFrame(func);
+    };
+}
+
+let currentObserver = null;
+
+export const observe = (func) => {
+    currentObserver = debounce(func);
+    func();
+    currentObserver = null;
+};
+
+export const observable = (obj) => {
+    const observers = new Map();
+
+    return new Proxy(obj, {
+        get(target, key) {
+            const value = target[key];
+
+            if (value !== null && typeof value === "object")
+                return observable(value);
+
+            if (currentObserver && typeof observers !== "undefined") {
+                if (!observers.has(key)) observers.set(key, new Set());
+
+                observers.get(key).add(currentObserver);
+            }
+
+            return value;
+        },
+        set(target, key, value) {
+            target[key] = value;
+
+            if (observers.has(key))
+                observers.get(key).forEach((observer) => observer());
+
+            return true;
+        },
+    });
+};
+
+// const state = observable({
+//     todoItems: [
+//         { name: "코딩하기", done: false, updateState: false },
+//         { name: "밥먹기", done: true, updateState: false },
+//         { name: "양치하기", done: false, updateState: false },
+//     ],
+// });
+
+// observe(() =>
+//     console.log(state.todoItems[0].name + " 로그가 실행이 됐습니다.")
+// );
+
+// state.todoItems[0].name = "todo";
+// state.todoItems[0].name = "todo1";
+// state.todoItems[0].name = "todo2";
+
+// requestAnimationFrame(() => {
+//     state.todoItems[0].name = "todo3";
+// });
diff --git a/week4/src/components/ItemAppender.js b/week4/src/components/ItemAppender.js
@@ -0,0 +1,12 @@
+import Component from "../Component.js";
+
+export default class ItemAppender extends Component {
+    template() {
+        return `
+        <div class="input-container">
+            <input type="text" placeholder="새로운 할 일을 입력해주세요" id="append-input" class="append-input"/>
+            <button class="btn" id="append-btn">추가</button>
+        </div>
+        `;
+    }
+}
diff --git a/week4/src/components/ItemsView.js b/week4/src/components/ItemsView.js
@@ -0,0 +1,41 @@
+import Component from "../Component.js";
+
+import { observe } from "../Observer.js";
+
+export default class ItemsView extends Component {
+    updateState() {
+        observe(() => {
+            console.log("ItemsView 컴포넌트에서 옵저버...");
+            console.log(this.$props);
+        });
+    }
+
+    template() {
+        const { todoItems } = this.$props;
+
+        return `
+        <ul>
+            ${todoItems
+                .map(
+                    ({ done, name, updateState }, index) => `
+                <li data-id="${index}">
+                    <input type="checkbox" ${
+                        done ? "checked" : ""
+                    } id="toggle-btn" ${updateState ? "class='updated'" : ""}/>
+                    <input type="text" ${
+                        done ? "class='todo checked'" : "class='todo'"
+                    } id="title-${index}" value="${name}" ${
+                        updateState ? "" : "readOnly"
+                    } />
+                    <button class="btn" id="update-btn">${
+                        updateState ? "완료" : "수정"
+                    }</button>
+                    <button class="btn deleteBtn" id="delete-btn">삭제</button>
+                </li>`
+                )
+                .join("")}
+        </ul>
+
+        `;
+    }
+}