[JS] 노트 앱 만들기!

텍스트를 작성할 수 있는 노트앱을 만들어 볼겁니다.!! 

이 앱은 처음에는 이렇게 아무것도 없는 빈공백에 버튼만 놓여져 있고 이 버튼을 누르게 되면 텍스트를 작성할 수 있는 박스가 생성됩니다.

이 박스에서는 텍스트만 쓸 수 있고 내용을 삭제할 수도 있습니다. 

이렇게 만들어 질 수 있고 다양한 어플들에서 이러한 메모장을 생성해서 어플을 만들었다는 기억이 납니다 .

자, 그럼 이 어플은어떻게 생성되었는지 한번 확인해 보도록 하겠습니다. 

---

const notesContainer = document.querySelector(".notes-container");
const createBtn = document.querySelector(".btn");
let notes = document.querySelectorAll(".input-box");

- noteContainer는 노트들이 추가될 컨테이너 역할을 합니다. 

- createBtn은 class가 btn인 요소를 참조합니다. 

- notes는 class가 input-box인 <p>요소들을 선택하여 참조합니다. 

 

function showNotes() {
  notesContainer.innerHTML = localStorage.getItem("notes");
}

showNotes();

 이 함수는 로컬스토리지에서 저장된 노트를 불러와서 notesContainer에 표시하는 함수입니다. 

localStorage.getItem('notes')는 로컬 스토리지에서 'notes'라는 키로 저장된 값을 가져옵니다. 

이 값은 notesContainer의 innerHTML로 설정되어 페이지가 로드될 때 저장된 노트들이 표시되도록 합니다.

 

showNotes()를 호출하여 페이지가 로드될 때 자동으로 저장된 노트들이 화면에 표시됩니다.

function updateStorage() {
  localStorage.setItem("notes", notesContainer.innerHTML);
}

updateStorate함수는 현재 notesContainer의 내용을 로컬 스토리지에 저장하는 역할을 합니다. localStorage.setIem('notes',notesContainer.innerHTML)는 notesContainer의 현재 innerHTML을 'notes'라는 로컬 스토리지에 저장합니다. 이를 토통해 페이지를 새로고침해도 노트가 유지됩니다. 

 

createBtn.addEventListener("click", () => {
  let inputBox = document.createElement("p");
  let img = document.createElement("img");
  inputBox.className = "input-box";
  inputBox.setAttribute("contenteditable", "true");
  img.src = "images/delete.png";
  notesContainer.appendChild(inputBox).appendChild(img);
});

이 코드는 createBtn이 클릭되면 새로운 노트를 생성하는 역할을 합니다. 

- inputbox는 새로운 <p>요소를 생성하며 class를 input-box로 설정하고 contentededitable속성을 true로 설정한다. 이 속성은 사용자가 해당 요소를 클릭하여 내용을 편집할 수 있게 해준다. 

- img는 살제버튼으로 사용할 이미지를 생성한다. 이 이미지는 나중에 노트를 삭제할 때 사용된다. 

- 마지막으로 생성된 inputbox와 img를 notesContainer에 추가한다. 이로써 새로운 노트가 화면에 나타나게 된다. 

 

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

 이 코든느 notesContainer내에서 발생하는 클릭 이벤트를 처리한다.

- e.target.tagName==='IMG'는 만약 클릭한 요소가 이미지(IMG)라면 해당 이미지를 포함하는 부모요소를 제거한다. 그런다음 updateStorage()를 호출하여 변경된 내용을 로컬 스토리지에 저장한다. 

- e.target.tagName==='p'는 만약 클릭한 요소가 p태그라면 모든 노트요소를 다시 선택하고 각각의 노트에 대해 keyup이벤트를 등록한다. 이 이벤트는 사용자가 노트의 내용을 수정할 때마다 updateStorage()를 호출하여 변경된 내용을 로컬 스토리지에 저장한다. 

document.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    document.execCommand("insertLineBreak");
    event.preventDefault();
  }
});

이 코드는 사용자가 노트(inputBox) 안에서 Enter 키를 누를 때 발생하는 동작을 정의합니다.

- 기본적으로 Enter 키를 누르면 새로운 노트가 생성되거나 현재 노트의 내용이 변동될 수 있지만, 이 코드는 document.execCommand("insertLineBreak")를 사용하여 대신 줄 바꿈을 삽입합니다

- event.preventDefault()는 기본 동작을 막아, Enter 키를 누를 때 새 노트가 생성되거나 다른 원치 않는 동작이 발생하지 않도록 합니다.