search
Github

투두리스트 만들기(with MVC pattern)

hashtag
1. 개요

바닐라 자바스크립트와 MVC 패턴을 사용하여 투두리스트를 구현한다. 아직 정확한 개념이 잘 잡히지 않으므로 천천히 공부하며 필요하면 내용을 분리하여 추가 작성한다.

기본이 되는 html 구조는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TODO LIST</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.js"></script>
  </body>
</html>

hashtag
2. MVC

  • Model

    • 데이터를 관리하고 변경한다.(추가, 삭제, 수정)

  • Controller

    • View의 이벤트에 의해서 동작되는 변경사항을 연결한다.

    • 이벤트 핸들러를 등록한다.

  • View

    • 데이터를 받아 그대로 DOM에 추가한다.

hashtag
3. TODO LIST

hashtag
TODO 등록하기

hashtag
TODO 완료 및 삭제하기

hashtag
TODO Localstorage에 저장하기

Previous코드의 재사용, 상속과 조합Next투두 등록하기

Last updated