Dev Diary

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 Vanilla JavaScript로 todolist와 같은 로직의 shopping list 를 구현해보았다. ❗️[문제 발견] 그런데 리스트를 수정하는 과정에서 오류가 발생했다. script.js:487 Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler? at updateTitle (http://127.0.0.1:5501/script.js:487:24) at HTMLInputEl..

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 랜덤으로 메모를 삭제해보았는데 출력된 삭제된 해당 인덱스들이 이해가 가지 않는다 function remove() { console.log(event.srcElement.id); console.log(allMemo); const idx = allMemo.find( (item) => item.len == event.srcElement.id ); if (idx) { allMemo.splice( allMemo.findIndex((item) => item.len == idx.len), 1 ); } localStorage.setItem("allMemo", JSON.stringify(allMemo)); render(); } 전체 코드는 위의 것..

오늘은 DOM에 대한 수업을 들었다. 질문에 하나씩 답할 때마다 진행 과정을 프로그래스가 점점 올라가는 것으로 나타내는 기능 구현 미션이 있었는데 배운 코드들을 접목시키는 것이 어렵다고 느껴져서 나의 코드와 강사님의 코드를 비교하여 분석하고자 한다. ✅ 코드리뷰: 내가 작성한 코드 break down 해보기 input창에 입력을 하면 프로그래스 바가 20퍼센트씩 올라가도록 하는 것이 목표였다 (그래서 총 5개의 input text창을 채우면 프로그래스가 100퍼센트가 되도록) 1️⃣ input element에 무언가를 입력할 때 20만큼 증가시키기 위해 addEventListener 를 사용했다. 2️⃣ 같은 요소에 event를 반복하기 위해 forEach 를 사용했다. 3️⃣ input 이벤트는 입력 ..