[React] TodoList 만들기 5일차 (노트 앱 만들기)

📃 React로 노트 앱 만들기

TodoList는 기능을 나름대로 다 넣은 것 같아서 노트 앱을 만들었다! 라우터를 사용해서 페이지 이동도 하고 localStorage를 사용해서 CRUD를 구현했다.

📖 파일 구조

Home → 메인페이지
CreateNote → 작성/수정/삭제 페이지 (URL 뒤에 id값을 붙여서 구분해주었다)
util > DateFormat은 yyyy-mm-dd HH:MM으로 반환해주는 함수를 따로 빼놓은 것이다. 날짜 변환해주는 라이브러리도 있다고 들었는데 이번에는 그냥 만들어서 사용!

const DateFormat = () => {
  let date = new Date();
  let year = date.getFullYear();
  let month = ("0" + (date.getMonth() + 1)).slice(-2);
  let day = ("0" + date.getDate()).slice(-2);
  let hours = ("0" + date.getHours()).slice(-2);
  let minutes = ("0" + date.getMinutes()).slice(-2);

  return `${year}-${month}-${day} ${hours}:${minutes}`;
}

export default DateFormat;

이렇게 만들어 놓았다 히히...

📖 기능

1. 작성하기

   작성 버튼을 누르면 localStorage.setItem(key, JSON.stringify(value));으로 저장한다. 나는 배열 안에 객체를 넣어서 저장했다!
   고유한 id 값을 만드는 방법이 많았는데 (대표적으로 uuid / random() / Date.now()) 여기에서 Date.now()를 사용해서 id 값을 생성했다.

2. 수정하기useParams()를 사용하여 id 값으로 작성과 수정/삭제 여부를 판별하였다. 받은 id 값으로 제목/내용을 보여줌!
   

   시중에 나와있는 메모 어플을 사용다보면 메모를 수정하고 나면 수정된 날짜를 기준으로 맨 앞으로 정렬하여, 나도 그렇게 해보았다.
   원래 id 값을 유지시킬까 하다가 굳이 그럴 필요는 없을 것 같아 제목/내용의 변경이 있다면 전에 있던 데이터는 삭제하고 수정된 데이터를 새로 저장하는 방식으로 구현하였다. 변경이 없다면 아무일도 일어나지 않음!

3. 삭제하기

   filter를 사용하여 삭제하려는 노트의 id 값이 아닌 것들을 반환하도록 하였다.

4. 검색하기

   onchange에 filter와 includes를 사용하여 제목/내용을 검색할 수 있게 하였다.
   한가지 문제점은 띄어쓰기(" ")를 하면 띄어쓰기 한 내용들이 검색된다.(당연한 얘기ㅋ..ㅋ) 이걸 어떻게 해결해야하는지 고민해봐야겠다🤔

📖 느낀점

일단 새로운걸 하다보니 걱정이 더 많았던.... 그래도 로컬스토리지를 사용하다보니 조금 나은 것 같기도 하고..!! 라우터도 많이 사용해봐야할 것 같고 아직 컴포넌트를 어떻게 나눠야 할지 잘 모르겠다. 버튼도 컴포넌트로 나눠서 재사용하고싶었는데 아직은. .. . 어려워서. ... . 다음에는 꼭 버튼 컴포넌트도 만들어봐야겠다! UI도 나름 메모장처럼 꾸며봤는데 호호,,, 괜찮은 것 같기도.. 아 근데 CSS 너무 어렵다.. 그리드 사용했는데 왤케 어려운겨,,, 차암나,,, 그리고 원래 다이어리를 하려했는데 뭔가 날짜 선택하고 그러는게 어려워 보여서 일보후퇴하고 노트앱을 먼저 만들어봤다. 어쩌다보니 밤 늦게까지 만들게 되었지만..! 뿌듯😊!!