효율적인 코드관리를 위해 컴포넌트별로 나누고, 스토리지를 이용해 ToDoList를 작성할 수 있는 웹사이트를 만들었다. 이전에 비슷한 것을 조금 공부해봐서 앞선 주차보다는 비교적 가볍게 들을 수 있었다. 하지만 난생 처음보는 것이었다면 많이 어려웠을 것이라 생각해보니, 뷰와 리액트를 예습해놔야 할 필요를 다시금 느끼게 된다...😥
📌 새로 배운 내용
- $todoList: $는 DOM 엘리먼트를 담고 있다는 의미. todoListEliment로도 쓰인다.
- button에는 기본적으로 type=submit이 들어있다.
- 헤더에 스크립트파일을 넣으면 스크립트를 불러오는 동안 브라우저 렌더링이 차단된다.
- 쿠키는 ;로 나뉘어 있기 때문에 split(";")으로 쪼개줘야 한다.
- 쿠키의 유효기간은 GMT시간으로 기간이 정해지며, new Date().toGMTString() 으로 GMT 시간을 알 수 있다.
- 현재시간 기준으로 유효기간 설정법
document.cookie = 'user=roto; max-age=3600'
- localStorage에는 string만 넣을 수 있기 때문에
JSON.stringify
를 통해 문자열로 바꿔야 하며,
불러올때도 JSON.parse
를 통해 파싱해서 써야한다.
- localStorage는 용량이 많아지거나 외부에서 조작하면 오류가 발생될 수 있기 때문에 storage.js 를 만들고, try catch로 여기서만 접근할 수 있도록 만드는 것이 좋다.
- 이때 storage.js 에는 전역오염을 최소화하기 위해 IIFE(즉시실행함수)를 이용해 감싸는 것이 좋다.