[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와 자료구조에 대해서 공부할 예정이다. 집중력이 며칠사이 많이 떨어진거 같아서 다시 끌어 올리고 있다. 화이팅!
Author And Source
이 문제에 관하여([TIL] DAY-12 Vanilla JS TodoList), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dnrxorla/TIL-DAY-12저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)