Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hhejo/moonee


https://github.com/hhejo/moonee

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README 

        
# 무니 (MooNee)



## 요약



> indexedDB를 이용한 오프라인 가계부 웹 앱



![무니 (MooNee)](./assets/000-moonee-main.png)



## 상세



5번째 PJT



### 0. 목차



1. 소개

2. 기술 스택

3. 느낀 점

4. 기능 (페이지 구성)

5. 아쉬웠던 부분

6. 앞으로 학습할 것들, 나아갈 방향

7. 어려웠던 부분, 해결한 과정



## 1. 소개



**[무니 (MooNee)](https://hhejo.github.io/moonee/)**



- indexedDB를 이용한 오프라인 가계부 웹 앱

- 간단하게 가계부를 작성하고 관리

- 지출, 수입 항목을 작성하고 조회

- 전체, 날짜별, 지출별, 수입별로 항목 조회

- 총 지출, 수입, 합계 조회

- 모든 내역을 CSV 파일로 내보내기



작업 기간



- 2024/10, 1주



인력 구성



- 1인



## 2. 기술 스택



  



## 3. 느낀 점



- indexedDB를 이용해 오프라인 웹 애플리케이션 제작

- localStore를 이용하는 것도 괜찮지만, 좀 더 관리되는 DB라서 기능이 누적될수록 좋을 것 같았음

- JavaScript만으로는 늘어나는 코드를 관리하기가 아주 힘들었음

- 커스텀 이벤트를 처음 사용해보니 그렇게 어렵지 않고 유용해서 나중에도 활용하고 싶다는 생각이 들었음



## 4. 기능 (페이지 구성)



1. 메인 페이지

   - 이번 달 총 수입, 지출의 합계 출력

   - 이번 달 총 수입, 총 지출 출력

   - 새로운 거래내역을 추가하는 버튼

   - 해당 버튼 클릭 시 사라지면서 거래내역 폼 보이기

2. 거래내역 추가 양식

   - 수입, 지출 중 하나 선택해서 클릭

   - 날짜 입력

   - 금액 입력 (3자리마다 쉼표 처리)

   - 내용 입력

   - 취소하기 버튼을 누르면 폼 사라지고 거래내역 추가 버튼 다시 드러남

   - 저장하기 버튼을 누르면 폼 사라지고 거래내역 추가 버튼 다시 드러나며 거래내역이 생성됨

3. 거래내역 목록

   - 날짜마다 거래내역을 모아 출력

   - 전체, 수입, 지출 버튼을 눌러 해당 항목만 출력

4. CSV 파일 내보내기

   - 해당 버튼을 눌러 전체 거래내역을 CSV 파일로 저장



|                                              |                                                 |                                           |

| :------------------------------------------: | :---------------------------------------------: | :---------------------------------------: |

|      ![메인 화면](./assets/01-main.PNG)      |    ![거래내역 추가 폼](./assets/02-form.PNG)    |   ![거래내역 입력](./assets/03-add.PNG)   |

|    ![거래내역 목록](./assets/04-list.PNG)    |     ![수입 필터링](./assets/05-income.PNG)      |  ![지출 필터링](./assets/06-expense.PNG)  |

| ![거래내역 내보내기](./assets/07-export.PNG) | ![거래내역 내보내기 2](./assets/08-export2.PNG) | ![거래내역 CSV 파일](./assets/09-csv.PNG) |



시연 영상



- `assets` 폴더에 위치



## 5. 아쉬웠던 부분



- 거래내역 수정 기능을 추가하고 싶었지만 하지 못해 아쉬움

- 로그인, 거래내역 동기화 기능을 추가하고 싶었음

- 모바일 웹 앱으로 구현했는데, 크롬과 모바일 사파리에서 다르게 보이는 것을 생각하지 못하고 구현해서 아쉬움

- 더 많은 필터 기능

- 검색 기능

- 태그, 메모 기능



## 6. 앞으로 학습할 것들, 나아갈 방향



- `React`를 사용해서 현재 프로젝트를 더 확장하고 싶고, 다른 사람이 사용하게 하면 좋겠음



## 7. 어려웠던 부분, 해결한 과정



### indexedDB



- 처음 사용해보는 웹 스토리지 기능이어서 검색, 문서 읽기를 통해 구현

- 다른 DB와 기능은 비슷했지만, 좀 다른 점이 있었고(버전 등) 명칭이 달라 약간 낯설었음



### CSS, TailwindCSS



- Flex 자식 요소들이 너비를 갖지 않아 헤매다가, 부모 요소, 자식 요소에 `w-full` 클래스를 주어 해결

- 거래내역 생성 폼에서 수입·지출 버튼을 라디오 버튼으로 만드는 중에 라디오 버튼을 꾸미기 힘들어 시간이 걸렸지만, `` 태그 안에 `` 태그에서 `href="src/style.css"`라고 썼어야 하는데, `/src` 라고 작성해서 실패. 작성을 잘 하자