[React] TodoList 만들기 6일차 (다이어리 만들기 1일차)

명화·2023년 12월 20일

TodoList 뿌시기

목록 보기
6/7
post-thumbnail

📘 React로 다이어리 만들기 1일차

일보후퇴했던 다이어리를 만들...고 있는 중... 구글링 하면 제일 많이 나오는 감정일기장 코드를 엄청나게 참고했다. 거의 비슷하지만 쬐꼼 다른 그런....... 무튼 하루만에 다 끝내지는 못할 것 같다^^... 아자아자...💪🏻...

📖 파일 구조

Home → 메인페이지
EditDiary → 작성/수정/삭제 페이지
ViewDiary → view 페이지

📖 기능

  1. 작성하기

    5일차 노트 앱과 저장하는 방식이 같다. (localStorage를 사용)
    여기에서 날짜가 오늘 날짜로 세팅되는걸 추가 할 계획이다.

  2. 월별 리스트 보여주기

    일기 작성할 때 날짜 저장을 new Date(날짜).getTime()형식으로 저장하였고 이전/다음 버튼을 누를 때도 getTime()으로 조건문 걸어서 보여주도록 하였다. (감정일기장 코드 참고)

  1. 정렬 기능

    sort함수 사용해서 날짜 최신순 / 오래된 순 을 정렬하였다.

📖 느낀점

이번에도 로컬스토리지를 사용했다. 아직 작성하기 기능만 하긴했지만^^... 감정일기장 코드의 도움을 엄청나게 받았다. 다이어리도 몇 번 반복해야할듯😢 정렬 기능 하는데 sort함수를 까먹어버렸지 뭐야... 알고리즘도 틈틈히 공부해야겠다ㅠ.ㅠ
그리고 오늘 알게 된 것! Link와 useNavigate()의 차이를 살짝쿵 이해하게 되었다. 어제는 뭣도 모르고 Link만 사용했었던ㅋ.ㅋ
Link는 조건 없이 바로 이동할 때 사용
useNavigate는 이벤트같은거 발생하고 이동해야할 때 사용!

0개의 댓글