🌓 Dream Note

👀 소개글

Dream Note는 꿈일기를 기록할 수 있는 웹사이트입니다.📓 ​

🚖 서비스 링크

https://dreamnote-9f9f2.web.app

🔗 블로그

개발 기록: https://tinyurl.com/ylvw7xjd

⚙️ 기술 스택

✔️Frond-end

​

🔮 기능 소개

1. 꿈 일기 기록/조회/수정/삭제(CRUD)

• 메인화면에서는 일기를 월별로 조회할 수 있습니다.
• 특정 날짜의 일기를 기록하고 수정 및 삭제할 수 있습니다.

2. 일기 장르 태그 지정

• 일기의 장르를 설정할 수 있습니다. 기본 장르는 일상으로 선택되어 있습니다.
• 일기 작성 페이지에서 장르의 추가와 삭제가 가능합니다.

3. 일기 검색

일기의 제목/본문 내용을 검색하여 원하는 일기를 조회해 볼 수 있습니다.

4. 이미지 업로드

일기에 이미지(썸네일)을 추가할 수 있습니다.

5. 일기를 로컬에 저장

브라우저를 닫아도 일기 데이터가 사라지지 않습니다. (단, 브라우저 캐시 및 로컬데이터 삭제 시 일기 데이터가 손실됩니다.)

6. 반응형 웹 디자인

모바일, 태블릿, PC에 유연하게 대응할 수 있는 반응형 디자인을 적용하였습니다.

🙋‍♀️ 배운 점

• React를 사용한 CRUD 기능 구현에 익숙해질 수 있었습니다.
• Context API를 사용하여 데이터 상태를 관리하는 과정을 학습한 뒤 프로젝트에 적용하였습니다.
• FileReader 객체를 이용해 이미지 업로드를 진행하였습니다.
• Local Storage에 데이터를 저장, 수정, 삭제 및 조회하는 방법을 익혔습니다.

🚩 개선점

• 실제 어플리케이션을 사용해 본 뒤, 다양한 기기에서 동기화가 가능한 서버 구축의 필요성을 느낌 👉 Firebase를 이용한 서버 구축 진행 중
• 이미지 파일 크기가 클 경우 일기가 저장되지 않는 버그 수정 필요