π Window 98μ μ°Έκ³ ν΄μ HTML, CSS, μλ°μ€ν¬λ¦½νΈλ‘ μΉ μ΄ν리μΌμ΄μ μ λ§λλ νλ‘μ νΈμ λλ€.
π λ°°ν¬ λ§ν¬: win98 chrome app
- CORS μλ¬λ₯Ό λ°©μ§νκΈ° μν΄ live-serverλ₯Ό νμ©νμ¬ μ€νν©λλ€.
Open
index.htmlwith Live Server
βββ src/
βββ components/ - μ»΄ν¬λνΈ νμΌ
βββ Startup.js
βββ Todo.js
βββ TextEditor.js
βββ App.js - μ»΄ν¬λνΈ μ μ
βββ Component.js - μ»΄ν¬λνΈ κ΅¬ν
βββ index.js - entry point
βββ style/ - css νμΌ
βββ index.html
* eslint, prettier μ€μ νμΌ
- ν μΌ μΆκ°/ μμ
- ν μ€νΈ μ λ ₯/ μμ
- ν μ€νΈ ν¬κΈ°, μ€νμΌ, ν°νΈ, μμΉ μ‘°μ
- μΊλ²μ€ μ , λν 그리기/ μ§μ°κΈ°
- μ μκΉ λ³κ²½
-
λ°λ³΅ μμ μ
mapμ ν΅ν΄ λ λλ§ν©λλ€.<!-- κ°μ ꡬ쑰 λ°λ³΅ --> <div class="icon-group"> <!-- ... --> <div id="todo" class="icon todo" tabindex="0"> <strong>ToDo List</strong> </div> <div id="editor" class="icon editor" tabindex="0"> <strong>Text Editor</strong> </div> <div id="paint" class="icon paint" tabindex="0"> <strong>Paint</strong> </div> </div> <!-- 리ν©ν λ§ --> <!-- App.js --> const { data } = this.state; return ` <div class="icon-group"> ${data.map((list, key) => ` <div class="icon"> <strong class="icon-name">${list.icon}</strong> </div> ` ).join("")} </div> `
-
scriptνμ μmoduleλ‘ μ€μ ν΄μ λͺ¨λλ 벨 μ€μ½νλ₯Ό λ§λλλ€.<body> <!-- ... --> <script src="./index.js"></script> <script src="./script/clock.js"></script> <script src="./script/modal.js"></script> <script src="./script/todo.js"></script> <script src="./script/texteditor.js"></script> <script src="./script/paint.js"></script> <script src="./script/paint-tools.js"></script> </body> <!-- 리ν©ν λ§ --> <!-- index.html --> <body> <div id="root"></div> <script src="./src/index.js" type="module"></script> </body>
-
μλ°μ€ν¬λ¦½νΈ νμΌμ μ»΄ν¬λνΈ κ΅¬μ‘°λ‘ λ¦¬ν©ν λ§ νμ΅λλ€.
// Component.js export default class Component { constructor(target) { this.target = target; // event target this.initailize(); this.setEvent(); this.render(); } // μ΄κΈ°ν initailize() {} // λ·°(λ§ν¬μ ) template() { return ""; } // λ λλ§ render() { this.target.innerHTML += this.template(); this.setEvent(); } // μ΄λ²€νΈ ν¨μ setEvent() {} // μν μ λ°μ΄νΈ setState(newState) { this.state = { ...this.state, ...newState }; this.render(); } }
-
ES6μ
classλ¬Έλ²μΌλ‘ μμ±ν΄μ μ»΄ν¬λνΈ μ½λμ μ¬μ©λ²μ ν¨ν΄νν©λλ€.// App.js μμ import Todo from "./components/Todo.js"; import TextEditor from "./components/TextEditor.js"; class App { constructor() { const app = document.querySelector("#root"); new Todo(app); new TextEditor(app); } } new App();