Dev Diary

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 랜덤으로 메모를 삭제해보았는데 출력된 삭제된 해당 인덱스들이 이해가 가지 않는다 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(); } 전체 코드는 위의 것..

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 1번의 메모를 삭제 했을 때 뒤에 있던 메모가 1번으로 올라오지 않고 2번으로 그대로 있는 이유가 무엇일까 (일단 보류) allMemo = allMemo ?? []; 입력창에 아무것도 없을 때 궁금해서 console.log 해보았다 입력창에 무언가를 입력했을 때는 배열이 이렇게 뜬다 allMemo.push({ title, content, len: allMemo.length }); 그런데 배열에 index가 어차피 나오는데 왜 len: allMemo.length 프로퍼티를 지정해줬을까 궁금해서 len 프로퍼티를 없애보았다 allMemo.push({ title, content }); 아하 브라우저에 index를 보여주기 위해 지정했구나..

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

개인 웹 페이지를 만들어보고 있던 중에 5일 차에 배웠었던 position 속성(property)의 sticky를 사용해보면 좋을 것 같아서 다시 지난 학습을 돌아보았다 position에 대한 정의는 MDN을 참고하시길 position - CSS: Cascading Style Sheets | MDN CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다. developer.mozilla.org 재료를 선택했을 때 선택된 리스트를 보여주는 박스(오른쪽)가 스크롤을 내리더라도 따라다니면 좋을 것 같다 현재는 아래로 스크롤 해서 다른 재료들을 ..