브라우저 캐시 저장 기능이 포함된 스티키 메모 UI 구현

커뮤니티 반응

작성자가 구현한 코드의 간결함과 프롬프트만으로 완성된 기능 수준에 대해 긍정적인 반응이 예상된다.

합의점 vs 논쟁점

합의점

브라우저 로컬 스토리지는 간단한 웹 앱의 상태 유지에 매우 효율적인 도구이다.
단계적인 프롬프트 요청이 복잡한 코드를 생성할 때 더 정확한 결과를 얻을 수 있다.

실용적 조언

웹 앱 개발 시 데이터 유실을 방지하려면 input 이벤트나 ResizeObserver에 저장 로직을 바인딩하여 실시간 저장을 구현하라.
여러 요소를 관리할 때는 dataset-id를 부여하여 각 요소의 고유성을 유지하고 관리하라.

섹션별 상세

작성자는 단 두 번의 프롬프트로 기능을 완성했다. 첫 번째 프롬프트로 전체적인 UI 구조와 스타일을 잡았고, 두 번째 프롬프트로 브라우저 캐시에 메모를 저장하는 로직을 추가했다. 이를 통해 복잡한 기능도 단계적 프롬프팅으로 구현 가능함을 보여주었다.

javascript

function saveNotes() {
  const notes = [];
  document.querySelectorAll('.note').forEach(note => {
    notes.push({
      id: note.dataset.id,
      content: note.querySelector('textarea').value,
      color: [...note.classList].find(c => ['yellow','pink','green','blue','purple'].includes(c) ),
      x: parseInt(note.style.left),
      y: parseInt(note.style.top),
      width: note.style.width.substring(0,note.style.width.length -2),
      height: note.style.height.substring(0,note.style.height.length -2)
    });
  });
  localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));
}

현재 화면의 모든 메모 정보를 객체 배열로 변환하여 로컬 스토리지에 저장하는 함수

javascript

const resizeObserver = new ResizeObserver(() => saveNotes());
resizeObserver.observe(note);

메모 크기 조절 시 자동으로 저장 함수를 호출하도록 감시하는 로직

데이터 영속성을 위해 localStorage와 JSON 직렬화 방식을 채택했다. saveNotes 함수는 모든 메모 엘리먼트를 순회하며 ID, 내용, 색상, 좌표, 크기 데이터를 추출하여 하나의 문자열로 저장한다. loadNotes 함수는 페이지 로드 시 이 데이터를 파싱하여 이전 상태를 그대로 복원한다.

사용자 경험을 위해 드래그 앤 드롭과 실시간 크기 조절 감지 기능을 구현했다. mousedown, mousemove 이벤트를 조합하여 메모 이동을 처리하며, ResizeObserver API를 활용해 크기 변경 시에도 즉시 데이터가 저장되도록 설계했다. z-index 관리를 통해 클릭한 메모가 항상 최상단에 오도록 처리했다.

용어 해설

브라우저 캐시(Browser Cache): — 웹 브라우저가 사용자 기기에 데이터를 임시로 저장하는 메커니즘이다. 이 게시물에서는 localStorage를 사용하여 페이지를 새로고침하거나 닫아도 작성한 메모 데이터가 유지되도록 하는 데 사용되었다.
로컬 스토리지(Local Storage): — 웹 브라우저 내에 데이터를 키-값 쌍으로 저장하는 웹 스토리지 객체이다. 세션이 종료되어도 데이터가 만료되지 않으며, 이 코드에서는 메모의 내용, 위치, 색상 정보를 JSON 문자열 형태로 영구 저장하는 역할을 한다.
리사이즈 옵저버(Resize Observer): — 엘리먼트의 크기 변화를 감지하는 인터페이스이다. 사용자가 메모장의 크기를 조절할 때마다 변경된 크기 정보를 실시간으로 감지하여 자동으로 브라우저 저장소에 업데이트하는 기능을 수행한다.

언급된 도구

localStorage추천

브라우저 내 데이터 영구 저장