[TIL] DAY-12 Vanilla JS TodoList

Vanilla JS TodoList 생성

• App.js
  컴포넌트 생성 및 관리를 위해 App.js 생성

• Header.js
  simple todo list 헤더 컴포넌트 방식으로 추가

• TodoForm.js
  클라이언트 내에서 액션할 수 있는 TodoForm 컴포넌트 방식으로 생성

function TodoForm({ $target, onSubmit }) {
  const $form = document.createElement('form')

  $target.appendChild($form)

  let isInit = false

  this.render = () => {
    $form.innerHTML = `
      <input type="text" name="todo"/>
      <button>Add</button>
    `

    if (!isInit) {
      $form.addEventListener('submit', e => {
        e.preventDefault()

        const $todo = $form.querySelector('input[name=todo]')
        const text = $todo.value
        
        if (text.length > 1) {
          $todo.value = ''
          onSubmit(text)
        }
      })
      isInit = true
    }
  }
  this.render()
}

출처: 프로그래머스 데브코스 3주차 강의

• TodoList.js
  상태를 변할 수 있도록 setState 추가

• main.js
  app.js 생성 후 기존에 main.js에서 하는 작업을 app.js로 묶음

• storage.js
  local storage

const storage = (function(storage){
  const setItem = (key, value) => {
    try {
      storage.setItem(key, value)
    } catch(e) {
      console.log(e)
    }
  }

  const getItem = (key, defaultValue) => {
    try {
      const storedValue = storage.getItem(key)

      if (storedValue) {
        return JSON.parse(storedValue)
      }
      return defaultValue
    } catch(e) {
      console.log(e)
      return defaultValue
    }
  }

  return {
    setItem,
    getItem
  }
})(window.localStorage)

출처: 프로그래머스 데브코스 3주차 강의

Module

ES6 에서 처음으로 모듈에 대한 표준이 도입되었다.
모듈 표준이 없었을 당시에는 AMD, CommonJs, UMD 방식의 모듈시스템을 사용했다.

모듈 import/export

• 모듈에 선언한 변수나 함수를 다른 모듈에 제공하기 위해 export를 사용
• export 된 모듈을 가져와 사용하기 위해 import를 사용
• export default를 통한 기본 내보내기는 한 개만 지정할 수 있다.

모듈 스크립트와 일반 스크립트 차이점

• 모듈은 항상 '엄격모드'로 실행된다.
• 모듈은 자기 자신만의 스코프를 가진다.
• 동일한 모듈을 여러번 import 했을 경우, 최초 import 구문만 실행되고 나머지 구문은 무시된다.

모듈화 장점

전체적인 소프트웨어 이해의 용이성 증대 및 복잡성 감소
소프트웨어 디버깅, 테스트, 통합, 수정 시 용이성 제공
기능의 분리가 가능하고 인터페이스가 단순
오류의 파급효과 최소화
모듈의 재사용 가능으로 개발과 유지보수가 용이

회고🥲

Vanilla JS를 이용해서 TodoList 구현을 해보았는데 아직 보강해야할 것도 많고 과제 이후에 내가 따로 더 기능을 추가해보고 하면서 완성 시켜 볼 예정이다. 하지만 아직 과제도 다 못 끝냈기에 😓 일단 내일까지 마무리를 다 할 계획이고 그 이후에 이것에 대해서 살을 좀 더 붙이는게 목표. 로토님의 강의는 너무 어렵지도 않고 이해하기 쉽게 잘 설명해주셔서 많이 알아가는 느낌이라 기분이 좋고 이후에 과제를 마무리하고 다시 모던 javascirpt와 자료구조에 대해서 공부할 예정이다. 집중력이 며칠사이 많이 떨어진거 같아서 다시 끌어 올리고 있다. 화이팅!