[프로젝트] 딴짓추적표 | 1. 레이아웃, 메모 조회 및 갱신하는 법

간단한 메모앱 구현을 위해 아래 유튜브 영상에서 설명하는 기본 레이아웃과 로컬스토리지를 활용한 메모 불러오기 및 갱신 기능을 구현하였다. 해당 영상에서는 레이아웃이 좌측으로 쏠려 있는데 개인적으로 중앙에 오는 디자인이 더 좋아서 배열은 다르게 변경했다.

 

[참고사이트]

• 이모티콘 다운: https://iconmonstr.com/
• 메모앱 구현: https://www.youtube.com/watch?v=n3U4jFbp05M 

 

[배운점]

1. contenteditable 속성

• HTML5의 모든 엘리먼트는 contenteditable='true'로 설정함으로써 해당 엘리먼트 내부에 텍스트를 작성할 수 있다.
• 즉, input 외에도 div, span등의 요소도 텍스트 필드로 변화시킬 수 있음을 의미한다.
• (활용하면 좋은 예) 표의 제목 같이 수정하면 안되는 항목에서 'contenteditable', 'false'로 설정하여 유용할 것 같다.
• 아래와 같이 setAttribute 속성을 활용해 속성을 부여할 수 있다.

divBox.setAttribute('contenteditable', 'true')

• setAttribute를 주는 요소가 input인 경우 contenteditable 속성이 필요하지 않다.  
  • 틀린 예) inputBox.setAttribute('contenteditable', 'true');
  • 상식적으로 input에는 contenteditable 속성 필요 하지 않다. 사용자가 내용을 편집할 수 있도록 설계되어 있기 때문

 

2. appendChild( )

• appendChild를 연결해서 사용할 수 있다는 것을 알게되었다. 쉽게 말해 부모의 자식의 자식... 이렇게 연결이 가능한 것!

notesContainer.appendChild(inputBox).appendChild(img);
// notesContainer 안의 inputBox 안의 img

• appendChild와 append( )의 차이
  • appendChild( )는 노드 객체만(태그단위) 추가 가능, 최대 1개만, 추가 가능
  • append는 text도 추가 가능, 여러개 추가 가능
    • 예) const div= document.createElement('div')
    • div.append('hi') // <div>hi</div>

 

3.  이벤트리스너 분기처리

notesContainer.addEventListener('click', function (e) {
  if (e.target.tagName === 'IMG') {
    e.target.parentElement.remove();
    updateStorage();
  } else if (e.target.tagName === 'DIV') {
    notes = document.querySelectorAll('.input-box');
    notes.forEach((nt) => {
      nt.onkeyup = function () {
        updateStorage();
      };
    });
  }
});

• 클릭한 tagName이 img 일때와 p일때를 구분해서 이벤트리스너를 하나의 함수안에서 작성할 수 있다.
• e.target.parentElement.remove 해당 요소의 부모 요소 제거

 

4. onkeyup 함수

• 문자 입력 후 이벤트 발생(사용자가 키보드 키를 눌렀다가 땠을 때의 이벤트)
• 즉, 위의 코드에서는 문자 입력후 로컬스토리지 업데이트 함수가 호출된다.
• 반대로 onkeydown은 이벤트 발생 후 문자 입력(로컬스토리지 선 반영 후 텍스트 입력됨)