<현록/>

내가 한 딴짓을 검색할 수 있는 기능을 추가해보았다. 검색기능은 이전부터 꼭 학습하고 싶은 영역이었는데 이번 기회에 구현할 수 있게 되었다. 검색 키워드와 저장 키워드가 일치하는 경우에는 키워드를 포함하는 요소의 부모요소(즉 개별 메모 컨테이너)를 삭제할 수 있게끔 구현했다. 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..

메모앱 생성시간을 기록 할 수 있는 타임스탬프 기능을 구현해 보았다. 기록 시간이 7:08 와 같이 한 자리수로 떨어질 때는 앞에 0을 붙여서 언제나 두 자리수로 출력되게끔 구현하였다. 타임스탬프는 수정 권한이 없게 하기 위해 지난시간 배운 contenteditable 속성을 활용해 false 값으로 주었다. // ...(중략) let timeBox = document.createElement('div'); timeBox.innerHTML = timeStamp(); // timestamp 호출 timeBox.setAttribute('contenteditable', 'false'); timeBox.className = 'timeStamp'; function timeStamp() { const today =..

(진행배경) 메모를 추가하고 엔터 버튼을 누른 뒤 창을 새로고침하면, 메모 컨테이너 안에 있던 이미지가 아래 사진과 같이 밖으로 벗어나는 오류가 발생하였다. [문제 - Enter 이벤트 발생에 따른 요소 간 충돌문제] (문제 상황) 엔터를 치지 않았을 때는 해당 문제가 발생하지 않고, 엔터를 치고 웹을 재로드 하면 문제가 발생하는 것으로 보아 엔터 이벤트 발생과 관련된 오류인 것으로 추정되었다. (문제 원인) 원인은 사용자가 내용을 편집할 때 'Enter' 키를 누르면 웹 브라우저는 내부적으로 태그를 삽입하여 줄 바꿈을 처리하는 문제였다. 메모를 기록하고 엔터를 치면 로컬스토리지에 해당 내용이 저장 되도록 소스 코드를 작성해 놨는데, 이 과정에서 이미지를 감싼 div가 p태그 내부에 새롭게 만들어지며 충..

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

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