자바스크립트에서 JSON 데이터를 이용하여 메모장 생성하기

15 Sep 2023

javascript

이번 포스트에서는 자바스크립트와 JSON 데이터를 이용하여 동적으로 메모장을 생성하는 방법에 대해 알아보겠습니다. 메모장은 제목과 내용으로 구성되며, 사용자가 입력한 데이터는 JSON 형식으로 저장되고 필요할 때마다 불러와서 화면에 표시됩니다.

HTML 구조 설정하기

먼저, HTML 구조를 설정해야 합니다. 다음과 같이 div로 메모장이 표시될 영역과 입력 폼이 있는 영역을 만들어줍니다.

<div id="memo-container"></div>
<div>
  <input id="memo-title-input" placeholder="제목을 입력하세요" />
  <textarea id="memo-content-input" placeholder="내용을 입력하세요"></textarea>
  <button id="add-memo-button">메모 추가</button>
</div>

JSON 데이터 관리하기

메모장의 데이터는 JSON 형식으로 관리됩니다. 이 데이터를 추가, 수정, 삭제하는 함수를 작성해봅시다.

let memos = [];

function saveMemos() {
  localStorage.setItem("memos", JSON.stringify(memos));
}

function loadMemos() {
  const savedMemos = localStorage.getItem("memos");
  if (savedMemos) {
    memos = JSON.parse(savedMemos);
  }
}

function addMemo(title, content) {
  const newMemo = {
    id: Date.now(),
    title,
    content,
  };
  memos.push(newMemo);
  saveMemos();
}

function deleteMemo(id) {
  memos = memos.filter((memo) => memo.id !== id);
  saveMemos();
}

function editMemo(id, newTitle, newContent) {
  const memo = memos.find((memo) => memo.id === id);
  if (memo) {
    memo.title = newTitle;
    memo.content = newContent;
    saveMemos();
  }
}

메모장 생성과 표시하기

다음으로, 입력 폼에서 입력한 데이터를 가져와서 메모장을 생성하고 화면에 표시하는 함수를 작성해봅시다.

function createMemoElement(memo) {
  const memoElement = document.createElement("div");
  memoElement.className = "memo";
  memoElement.innerHTML = `
    <h2>${memo.title}</h2>
    <p>${memo.content}</p>
    <button class="delete-memo" data-id="${memo.id}">삭제</button>
    <button class="edit-memo" data-id="${memo.id}">수정</button>
  `;
  return memoElement;
}

function displayMemos() {
  const memoContainer = document.getElementById("memo-container");
  memoContainer.innerHTML = "";

  memos.forEach((memo) => {
    const memoElement = createMemoElement(memo);
    memoContainer.appendChild(memoElement);
  });

  // 삭제 버튼 클릭 이벤트 리스너 등록
  const deleteButtons = document.getElementsByClassName("delete-memo");
  Array.from(deleteButtons).forEach((button) => {
    button.addEventListener("click", (event) => {
      const id = parseInt(event.target.dataset.id);
      deleteMemo(id);
      displayMemos();
    });
  });
}

function addMemoHandler() {
  const titleInput = document.getElementById("memo-title-input");
  const contentInput = document.getElementById("memo-content-input");
  
  const title = titleInput.value;
  const content = contentInput.value;
  
  if (title && content) {
    addMemo(title, content);
    titleInput.value = "";
    contentInput.value = "";
    displayMemos();
  }
}

document.getElementById("add-memo-button").addEventListener("click", addMemoHandler);

실행하기

모든 준비가 끝났습니다! 브라우저에서 HTML 파일을 열어서 메모장을 생성하고 편집해보세요. 추가한 메모는 브라우저의 로컬 스토리지에 저장되기 때문에, 새로고침해도 데이터가 유지됩니다.

이제 자바스크립트와 JSON 데이터를 이용하여 메모장을 동적으로 생성하는 방법에 대해 알아봤습니다. 이를 응용하여 다양한 기능을 추가해보세요!

#javascript #JSON