<현록/>

내가 한 딴짓을 검색할 수 있는 기능을 추가해보았다. 검색기능은 이전부터 꼭 학습하고 싶은 영역이었는데 이번 기회에 구현할 수 있게 되었다. 검색 키워드와 저장 키워드가 일치하는 경우에는 키워드를 포함하는 요소의 부모요소(즉 개별 메모 컨테이너)를 삭제할 수 있게끔 구현했다. function filter() { let searchValue = searchInput.value.toLowerCase(); // 대소문자를 구분하지 않는 검색을 위해 소문자 변환 let notes = document.querySelectorAll('.inputDiv'); for (let i = 0; i < notes.length; i++) { if (notes[i].innerHTML.toLowerCase().includes(se..

간단한 메모앱 구현을 위해 아래 유튜브 영상에서 설명하는 기본 레이아웃과 로컬스토리지를 활용한 메모 불러오기 및 갱신 기능을 구현하였다. 해당 영상에서는 레이아웃이 좌측으로 쏠려 있는데 개인적으로 중앙에 오는 디자인이 더 좋아서 배열은 다르게 변경했다. [참고사이트] 이모티콘 다운: https://iconmonstr.com/ 메모앱 구현: https://www.youtube.com/watch?v=n3U4jFbp05M [배운점] 1. contenteditable 속성 HTML5의 모든 엘리먼트는 contenteditable='true'로 설정함으로써 해당 엘리먼트 내부에 텍스트를 작성할 수 있다. 즉, input 외에도 div, span등의 요소도 텍스트 필드로 변화시킬 수 있음을 의미한다. (활용하면 좋..

[기획배경] 개인 토이프로젝트로 간단한 메모앱을 만들어보려고 한다. 형식은 투두리스트를 취하고 있지만, 본질은 'not-todolist' 에 가깝다고 보면 될 것이다. 이 프로젝트에 대한 아이디어는 베스트셀러인 '초집중' 에서 영감을 받았다. 작가는 '딴짓추적표'를 기록함으로써 본짓과 딴짓하는 시간을 구분하고 딴짓 행동에 대한 인지를 강조한다. 이를 통해 끝내 초집중으로 나아갈 수 있음을 말하고 있다. 개발자 취준을 시작하면서 배워야 할것은 너무 많은 가운데 도무지 무엇을 어떻게 시작해야 할 지 눈 앞이 캄캄했다. 휴대폰을 보는 시간이 많아졌고, 무기력한 시간이 계속되었다. 책을 완독한 것은 아니지만 생산성을 높이기 위해서는 해야하는 일을 해내는 것만큼이나 하지 말아야 할 일을 하지 않는 것이 중요함을 ..