VueJS 가이드 8 - 예산

VueJS를 통한 애플리케이션 개발에 대해 알아봅니다.

작성자

조덕기

조덕기

DanielCho

본 포스팅은 Matthias HagerVue.js Application Tutorial - Step 8: Budgeting를 저자의 허락하에 번역한 글입니다. 오탈자, 오역 등이 있다면 연락부탁드립니다.

예산 모듈에 들어가기 전에 코드가 어디까지 왔는지, 예산과 관련하여 애플리케이션이 어떻게 작동하는지 다시 한 번 살펴보자.

지금까지 온 길

필자는 사용자의 관점에서 보는걸 좋아한다. 이 시점에서 사용자들은...

  • 애플리케이션을 로드하고 기본적으로 계정 페이지를 볼 수 있다
  • 잔액, 카테고리 및 이름이 있는 계정을 추가하기 위해 클릭을 할 수 있다
  • 추가한 모든 계정 목록을 볼 수 있다
  • 계정의 이름 및 카테고리를 수정할 수 있다 (잔액은 제외)
  • 계정을 삭제할 수 있다
  • 나중에 애플리케이션으로 돌아가서 입력한 데이터를 확인할 수 있다

여기까지 오는데 오랜 시간이 걸린 것처럼 느껴질 수도 있다. 우리가 확고한 기반을 설정했기 때문에 나머지 애플리케이션 대부분은 자체적으로 구축할 것이다. 다음은 우리가 성취한 프로그래밍 작업이다.

  • 중대형 애플리케이션으로 성장시킬 생각을 하면서 모듈 기반 프로젝트 구조 설정
  • vuex 및 vue-router 사용
  • 데이터는 ID 기반 조회 및 저장
  • 스토어를 사용하여 모든 컴포넌트간 통신 및 데이터 일관성 보장
  • 모든 데이터의 로컬 저장소 저장
  • API는 개별 컴포넌트이므로 원하는 경우 쉽게 교체 가능

예산을 위한 예산 편성

우리가 Accounts 를 잘 끝냈다고 다음 모듈 계획을 건너뛰지 말자. 예산 책정을 위한 워크 플로우를 생각하고, 일부 화면을 스케치 하는게 좋을 것이다.

매월 사용자는 어렵게 번 돈을 다양한 카테고리에 예산을 책정한다. 공과금으로 140 달러, 식료품으로 300 달러, 집세로 1000 달러, 넷플릭스에 10 달러 등으로 예산을 책정할 수 있다. 예산은 매월 바뀔 수 있지만 지난달의 예산을 단순히 복사하는 쉬운 방법을 제공하는게 좋을 것이다. 또한 각 예산 카테고리에 실제로 지출한 금액을 알아야 한다. 지출은 트랜잭션에서 발생하며 각 트랜잭션은 예산 카테고리에 할당되지만 손쉬운 조회를 위해 예산 개체의 총액을 추적하자.

아직 보고 또는 분석에 대해 걱정하지 말자. 그것들은 자체 모듈이어야 한다. 그리고 시간을 내서 데이터 객체를 직접 생각해보고 필자가 생각한 것과 비교해보자.

이 정보를 저장하는데 가장 큰 질문은 카테고리가 개별 객체이여야 할지 아니면 예산 객체의 단순한 이름이여야 할지이다. 결국 이전의 관계형 질문으로 돌아간 것이다. 카테고리가 자체 유형인 경우 모든 예산 개체를 모으지 않고 카테고리 목록을 얻는 것이 더 쉽다. 그러나 카테고리별로 데이터를 얻고 싶을 때마다 추가의 검색이 들어간다.

단일 카테고리 및 단일 월에 대한 예산 데이터를 저장하는 가장 간단한 방법은 다음과 같다.

'jcijeojde88': {
    'id': 'jcijeojde88',
    'name': 'Groceries'
    'budgeted': 150,
    'spent': 87.36,
    'date': '2017-02-16T22:48:39.330Z'
}

카테고리 객체를 사용하면 다음과 같이 된다.

'budgets': {
    'jcijeojde88': {
        'id': 'jcijeojde88',
        'category': 'ijdoiejf8e',
        'budgeted': 150,
        'spent': 87.36,
        'date': '2017-02-16T22:48:39.330Z'
    }
}

'categories': {
    'ijdoiejf8e': {
        'id': 'ijdoiejf8e',
        'name': 'Groceries'
    }
}

매월, 여러 예산을 포함한 객체로 저장하는 것도 고려해볼 수 있다.

'budgets': {
    'de7ednve': {
        'id': 'de7ednve',
        'date': '2017-02-16T22:48:39.330Z',
        'budgeted': 1359.29,
        'spent': 1274,
        'income': 1459.41,
        'budgetCategories': {
            'jcijeojde88': {
                'id': 'jcijeojde88',
                'category': 'ijdoiejf8e',
                'budgeted': 150,
                'spent': 87.36
            }
        }
    }
}

'categories': {
    'ijdoiejf8e': {
        "id": "ijdoiejf8e",
        "name": "Groceries"
    }
}

따라서 월간 데이터를 모을 필요가 없기 때문에 월별 데이터를 보다 쉽게 볼 수 있다. 또한 우리는 매월 잔액에 대한 누적 합계를 기록 할 것이다. 이 방법은 데이터 저장 및 검색에 몇 가지 복잡한 요소가 추가될 수 있지만, 사용자가 예산을 볼 때 대부분 월간 보기를 사용하기 때문에 필요하다고 생각한다. 결론적으로 필자는 몇 가지 단점에도 불구하고 이 월별 설정이 가장 적합하다고 생각한다.

다음은 사용자가 수행 할 몇 가지 작업이다.

  • 이번 달 예산 보기
  • 예산 금액으로 지출 카테고리 추가하기
  • 카테고리에서 쓸 수 있는 금액이 얼마나 남았는지 확인하기
  • 카테고리에 책정된 예산 금액 업데이트하기
  • 지난 달 전체 예산 복사하기
  • 지난 달 각 카테고리에서 얼마나 많은 예산을 책정했는지, 지출은 얼마인지 보기
  • 이번 달 총 수입, 예산 및 지출 금액 확인하기

이전과 마찬가지로 잠시 시간을 내서 애플리케이션의 이 부분을 만드는데 첫 단계가 무엇이여야 할지 생각해보자

이건 필자의 목록이다.

  • 예산"월" 추가하기
  • 생성된 달에 개별 예산 카테고리 추가하기
  • 예산이 추가될 때마다 월 기록 업데이트하기
  • 월 및 예산에 대한 ID를 자동으로 생성하기
  • 사용자가 해당 달의 예산을 볼 수 있도록 "월" 보기 컴포넌트 만들기
  • ndexedDB에서 데이터 저장 및 로딩하기
  • 각 컴포넌트에 대한 루트 추가하기
  • 계정 및 예산 책정간 탐색하기

예산은 이미 계정보다 복잡해지고 있지만, 그리 심각한 수준은 아니다. 모듈 사이에는 아직 커뮤니케이션이 이루어지지 않는다. 곧 만들게 될 트랜잭션이 실제로 예산과 계정간의 연결 고리일 것이다. 애플리케이션의 탐색 및 스타일링에 대해 생각하기 위해 곧 다시 작업을 해야 할 것이다. 지금은 기능적인 플레이스홀더일 뿐이다. 이 섹션에는 코드가 없었지만 다음에는 방금 계획한 예산 모듈에 대한 작업을 진행할 것이다.

Tags : vue javascript 

comments powered by Disqus