[TIL] DAY-12 Vanilla JS TodoList

dnrxorla·2022년 4월 6일
0

TIL

목록 보기
11/12
post-thumbnail

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와 자료구조에 대해서 공부할 예정이다. 집중력이 며칠사이 많이 떨어진거 같아서 다시 끌어 올리고 있다. 화이팅!

profile
프론트엔드를 꿈꾸며 개발을 공부 합니다.

0개의 댓글