[1주차] 최무헌 과제 제출합니다 #5
Conversation
only1Ksy
left a comment
only1Ksy
left a comment
There was a problem hiding this comment.
안녕하세요 무헌 님! 1주차 과제 진행하시느라 고생 많으셨습니다
| const arr = getList(key); | ||
| arr[idx].done = cb.checked; |
There was a problem hiding this comment.
| const arr = getList(key); | |
| arr[idx].done = cb.checked; | |
| list[idx].done = cb.checked; |
이미 위에서 getList 로 list를 불러왔으니, 해당 배열 그대로 재사용하면 좋을 것 같습니당 아래 listener들도 마찬가지로요!
| del.textContent = "삭제"; | ||
|
|
||
| // 체크 표시 | ||
| cb.addEventListener("change", () => { |
There was a problem hiding this comment.
지금 각각의 li의 체크박스, 삭제버튼 각각에 이벤트를 개별로 달아주고 계신데, 리스트가 많아지면 비효율적일 수 있으므로 부모 요소에 이벤트를 하나 걸어두고 event.target을 활용하는 방법도 고려해 보시면 좋을 것 같습니다!
| try { | ||
| localStorage.setItem(STORAGE_KEY, JSON.stringify(obj)); | ||
| } catch (e) { | ||
| if (e && e.name === "QuotaExceededError") { |
There was a problem hiding this comment.
localStorage 저장할 때 QuotaExceededError까지 캐치하신 점이 정말 꼼꼼하시네용👍
| @@ -0,0 +1,114 @@ | |||
| :root { | |||
There was a problem hiding this comment.
자주 쓰이는 스타일을 변수로 관리하신 점이 유지보수에 좋을 것 같네요!
| padding: 24px 16px 12px; | ||
| text-align: center; | ||
| } | ||
| header h1 { |
There was a problem hiding this comment.
h1 스타일을 정의해 두셨는데 index.html 파일에서는 h1 요소가 없는 것 같습니다!
| }); | ||
|
|
||
| //저장 | ||
| form.addEventListener("submit", (e) => { |
There was a problem hiding this comment.
LocalStorage를 이용할때 전체 객체를 꺼내고 수정하고 다시 전체를 저장하는 패턴이 최선인지 모르겠다고 남겨 주셨는데, 이미 id에 날짜 정보가 포함되어 있으니 이를 key 값으로 활용해 날짜별로 나눠 저장하고 불러오는 방법도 고려해 보시면 좋을 것 같습니다!
| form.addEventListener("submit", (e) => { | ||
| e.preventDefault(); | ||
| const text = input.value.trim(); | ||
| if (!text) return; |
There was a problem hiding this comment.
빈 문자열인 경우 바로 return이 되고 있는데, alert와 같이 사용자가 알 수 있는 장치를 두면 좋을 것 같다고 생각됩니다!
2 participants
배포링크
https://vanilla-todo-22nd-kn1z89sk4-hammooos-projects.vercel.app/
느낀/배운점
LocalStorage를 이용할때 전체 객체를 꺼내고 수정하고 다시 전체를 저장하는 패턴이 최선인지 모르겠습니다.
라이브러리의 편리함을 깨달았습니다.
getMonth는 0부터 시작
Key Questions
1. DOM은 무엇인가요?
HTML 문서를 트리 구조로 표현한 객체 모델이며 웹 페이지를 자바스크립트가 조작할 수 있게 만든 가상의 구조도입니다.
2. 이벤트 흐름 제어(버블링 & 캡처링)이 무엇인가요?
캡처링: 바깥 -> 안쪽으로 이벤트가 내려오는 단계
버블링: 안쪽 -> 바깥으로 이벤트가 올라가는 단계
아래는 버블링의 예시- 3번 alert발생(p -> div -> form, 캡처링에선 실행x)
이러한 버블링은 주로 event.stopPropagation()로 방지합니다.
3. 클로저와 스코프가 무엇인가요?
스코프: 변수에 접근할 수 있는 범위입니다.
클로저: 함수가 선언될 때의 당시의 주변 변수들을 함께 기억하는 기능, 따라서 함수가 바깥으로 나가도 그 변수들을 계속해서 사용 가능합니다.