목록에 쓸 예시 데이터를 만드는 메모

화면에 필요한 것

목록 화면을 그리기 전에 어떤 정보가 필요한지 적었다. 제목과 날짜, 짧은 설명 정도면 첫 모습을 확인할 수 있었다. 실제 회원 정보를 가져오는 대신 화면 연습용 값을 직접 만들어 두기로 했다.

작은 데이터

const notes = [
  { title: "창가의 오후", date: "2026-04-03" },
  { title: "짧은 산책", date: "2026-04-05" },
];

위 코드는 예시 항목의 모양만 보여 준다. 저장이나 통신을 처리하는 완성된 프로그램은 아니다. 화면을 만들면서 설명이 꼭 필요한지 살펴보고 필요한 값만 더할 생각이었다.

보기 좋은 값만 넣지 않기

처음에는 짧은 제목 두 개만 넣었다가 긴 제목도 하나 추가했다. 날짜가 없는 경우와 설명이 비어 있는 경우도 따로 보았다. 값이 고르게 들어 있을 때는 알아채지 못한 줄바꿈이 눈에 들어왔다.

예시 데이터가 실제 이용 상황을 그대로 대신하지는 못한다. 그래도 화면을 그리는 동안 어떤 조건을 아직 보지 않았는지 드러내는 데는 도움이 됐다. 오늘 기록에는 완성 화면보다 다음에 확인할 입력의 종류를 남겼다.