실습 : 가계부 만들기
세부 목적
1. 현재 자산 입력
현재 자산이 입력될 때 숫자 형식으로 들어간 것을 toLocaleString()을 통해 문자열 형식으로 바꾸어 주기
2. 가계부 내역 입력
유효성 검사와 데이터 저장을 통해 소비내역 작성을 가능하게 한다.
또한 map을 통해 필요한 데이터를 가져와 견본 데이터가 아닌 실제 데이터가 저장되도록 하게 만든다.
매핑한 데이터의 formatting을 통하여 데이터를 좀 더 보기 좋게 만들 수도 있다.
3. 가계부 자산 확인
map 과정 전에 sorting을 통해 특정 방향으로 정렬할 수도 있다.
그리고 삭제 기능을 통해 구매 데이터를 삭제하고 최신화 할 수 있다.
프로그램 개발 요구사항 분석
가계부 서비스 spec
소비내역 관리 -> 자산현황 파악 및 이전 기록 분석
메인 컨셉
- 현 자산 관리
- 소비 내역 관리
가계부 Entity 정리
| 자산 | 소비 내역 |
|---|---|
| id | id |
| 금액 | 금액 |
| 최초 생성일자 | 카테고리 |
| 수정 일자 | 내용 |
| 시점금액 | |
| 생성일자 |
User Story
유저가 목표달성을 위한 인터랙션을 하나의 문장으로 정리한 것
{{사용자}}는 {{무언가}}를 위해 {{무언가}}를 할 수 있다.
- Main 컨셉에서 세밀하게 분화
-> 현재 자산을 관리할 수 있다.현재 자산을 조회할 수 있다.
현재 자산을 등록할 수 있다.
->소비내역을 관리할 수 있다.
소비내역을 등록할 수 있다.
소비내역을 수정할 수 있다.
소비내역을 삭제할 수 있다.
만들어진 스토리를 기반으로 디자인 시안
-> 현재 자산을 관리할 수 있다.
현재 자산을 조회할 수 있다.
현재 자산을 등록할 수 있다.
->소비내역을 관리할 수 있다.
소비내역을 등록할 수 있다.
소비내역을 수정할 수 있다.
소비내역을 삭제할 수 있다.
User Flow
User story를 기반으로 구현 시나리오를 정의한 것
- 원칙
유저의 행동을 기반으로 시나리오가 시작
유저의 행동에 따른 피드백 제공 - 시나리오 성공 케이스 먼저 작성
- 시나리오 실패 케이스 나열
-> == 엣지 케이스
시나리오의 조건들을 나열하고, 조건별로 실패가능한 케이스들을 정리
가계부 서비스의 유저 플로우
소비내역을 관리할 수 있다 -> 소비내역을 등록할 수 있다.
필수 조건:자산 존재 여부, 자산 금액
- 성공 시나리오
유저는 자산이 0원 이상일 경우 소비내역을 등록할 수 있다. - 실패 시나리오
유저는 자산이 0원 미만이면 소비내역을 등록할 수 없다.
유저는 자산보다 많은 소비내역을 등록할 수 없다.
가계부 서비스의 상세 플로우
소비내역을 관리할 수 있다 -> 소비내역을 등록할 수 있다.
필수 조건:자산 존재 여부, 자산 금액
- 성공 시나리오
유저는 자산이 소비할 내역 이상이 있다면 소비내역을 등록할 수 있다. - 실패 시나리오
유저는 자산이 소비내역 미만이라면 소비내역을 등록할 수 없다.
1.자산을 조회한다.
2.자산이 0원 이상이라면 소비 내역을 등록할 수 있는 폼을 볼 수 있다.
-> 자산이 0원이라면 소비 내역을 등록할 수 있는 폼을 볼 수 없다.
3.소비 내역 등록시, 자산보다 같거나 적은 금액만 등록할 수 있다.
시각화
-
상세 플로우를 작성했다면 다이어그램을 통해 전체 흐름을 확인해본다.
(다이어그램 예시:링크) -
전체 흐름을 확인했다면 의사 코드를 작성해보는 것으로 전체 흐름의 대한 맥락을 잡는다.
※의사 코드:보통 일반적인 언어로 작성하며, 코드처럼 쓰돼 알기 쉽고 간편하게 작성해
전체 알고리즘에 대한 맥락을 잡는다.
소감 : 전체적으로 따라가기 쉬웠으나 Vite에 대해 처음 접해서 꽤 많은 오류를 저질렀다.
Vite의 모듈 실행 스크립트라는 점을 알지못해 일반 HTML, 바닐라 JS처럼 실행했다가 모듈화가 되지 않아 자바스크립트 파일을 읽어오지 못하거나 실행이 안되는 등에 문제점을 겪고 구글링과 Chat GPT를 통해 Vite라는 라이브러리가 있음을 알게 되었다. 그리고 깔아두기만 하고 잘 써보지 않은 NPM의 사용법을 다시 공부하게 되는 계기가 되었다.
그리고 프로그램을 개발할 때 단순히 생각나는 기능들만 작성하는 것이 아니라 먼저 필요한 요구 사항과 그에 따른 흐름, 그리고 흐름에 맞는 코드들을 짜넣어야 한다는 것을 배웠고 첫 프로젝트에서 왜 개발 진척이 불규칙했는지에 대해서도 알게 되었다.
