나만의 작은 일기장, 감정 일기장 📓

오늘 하루를 그날의 기분과 함께 기록하는 일기장입니다.

업데이트 사항

• TypeScript 적용(2023.05.06 ~ 2023.05.08, 2일)

목차

• 나만의 작은 일기장, 감정 일기장 📓
  • 업데이트 사항
  • 목차
  • 데모
  • 개요
  • 프로젝트 폴더 구조
  • 1. 프로젝트 진행 동기
  • 2. 프로젝트 플로우 차트
  • 3. 기술 및 개발환경
  • 4. 구현 기능
  • 5. 구현 동작
    • Home Page
    • New Page
    • Edit Page
    • Diary Page

데모

데모 : 나만의 작은 일기장, 감정 일기장

개요

📓 오늘 하루를 나의 기분으로 기억하고 기록하는 일기장입니다.
📝 내가 작성한 일기의 목록을 확인할 수 있습니다.
🧹 내가 작성한 일기를 월별로 정렬(최신/오래된 순), 필터링(전부/좋은/안좋은)하여 볼 수 있습니다.
🔄 내가 작성한 일기를 수정할 수 있습니다.
🔥 내가 작성한 일기를 삭제할 수 있습니다.

프로젝트 폴더 구조

📂 src
├── App.css
├── App.tsx
├── 📂 components
│   ├── DiaryEditor.tsx
│   ├── DiaryItem.tsx
│   ├── DiaryList.tsx
│   ├── EmotionItem.tsx
│   ├── MyButton.tsx
│   └── MyHeader.tsx
├── index.css
├── index.tsx
├── 📂 pages
│   ├── Diary.tsx
│   ├── Edit.tsx
│   ├── Home.tsx
│   └── New.tsx
├── 📂 types
│   └── Types.ts
└── 📂 util
    ├── date.ts
    └── emotion.ts

1. 프로젝트 진행 동기

첫 React 프로젝트로, React의 기본 CRUD 기능을 구현해보기 위한 프로젝트입니다.

실제 프로젝트에 React의 State와 기본적인 Hooks을 사용하는 경험을 쌓기 위해 프로젝트를 진행했습니다.

2. 프로젝트 플로우 차트

3. 기술 및 개발환경

• Front-end

- React(create-react-app)
- react-router-dom
- localStorage
- TypeScript

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.10.0",
"typeScript": "^4.9.5"

• 배포 환경

- firebase hosting

4. 구현 기능

• 📓 CRUD
  • 일기 작성
  • 선택한 일기 수정
  • 선택한 일기 삭제
• 📜 일기 목록 정렬 및 필터링
  • 일기 목록 보기
  • 일기 최신순 / 오래된 순 정렬
  • 일기 전부 / 좋은 감정만(완전좋음, 좋음) / 안좋은 감정만(그럭저럭, 나쁨, 끔찍함) 필터링
• 💾 일기 데이터 저장
  • 일기 데이터 로컬 스토리지 저장
• 👟 페이지 이동
  • 라우터 기능 구현

5. 구현 동작

Home Page

일기 목록 데이터를 월별로 볼 수 있으며 일기 목록을 최신-오래된 순 정렬을 할 수 있으며 기분에 따라 필터링을 할 수 있습니다.

[월별 정렬]

[최신-오래된 순 정렬/기분별 필터링]

New Page

새로운 일기를 작성합니다.

Edit Page

작성했던 일기 데이터를 수정/삭제합니다.

[일기 데이터 수정]

[일기 데이터 삭제]

Diary Page

선택한 일기를 열람할 수 있습니다.