VueJS 가이드 1 - 개발 계획

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

작성자

조덕기

조덕기

DanielCho

본 포스팅은 [Matthias Hager][1] 의 Vue.js Application Tutorial - Step1 : Planning Your Application를 저자의 허락하에 번역한 글입니다. 오탈자, 오역 등이 있다면 연락부탁드립니다.

ToDo 리스트보다 복잡한 프로그램을 만들 생각이라면, 코드를 작성하기 전에 차분히 앉아서 어떻게 개발할 것인지 계획하는 게 좋다.

이 튜토리얼에서는 개인 및 가족이 사용할 수 있는 간단한 예산 관리 애플리케이션을 만들어 볼 것이다. 이 앱이 유용하거나, 적어도 모든 사람들이 관심을 갖을만한 것이길 바란다. 가장 중요한 것은 Vue.js로 구축된 모든 프로젝트에 응용할 수 있는 많은 원리들에 대해 얘기할 것이라는 점이다. 필자는 현실 세계의 서비스를 만드는 것이 또 다른 ToDo 리스트 앱을 만드는 것 같이 이론적인 것보다 훨씬 보람있고 자극적인 프로젝트라고 느낀다. 그러다보면 (우연히!) 다른 사람들이 실제로 사용할 애플리케이션을 만들지도 모른다.

예산 편성표의 진행 중인 작업 데모보기

사소한 면책 조항 : 필자는 금융 전문가 또는 예산 전문가가 아니다. 이것이 좋은 시스템이라고 주장을 하거나 정보를 저장하고 추적하는 안전한 방법이라고 말하는 게 아니다. 항상 상식 수준에서 판단하자. 이 애플리케이션은 본질적으로 envelope system의 디지털 버전인 You Need A Budget의 원본 오프라인 버전을 사용하여 얻은 경험을 바탕으로 한다. 필자는 이 애플리케이션을 실시간으로 작성 중이다. 즉, 이미 재작업중인 완성된 앱은 없다 (압박은 없다). 따라서 만드는 도중 실수도 하고 추한 코드를 다시 고려하는 모습을 볼 것이다. 필자는 이것이 모두 학습 과정의 한 부분이라고 생각한다.

개발 프로세스 접근

어떤 사람들은 placeholder 데이터를 사용하여 프론트엔드 인터페이스를 작성하길 원한다. 이는 Mockup보다는 한 걸음 더 나아간 대략적인 프로토타입이기 때문이다. 이것은 아웃사이드-인 또는 하향식 접근이라고 할 수 있다. 인사이드-아웃, 상향식 접근법은 데이터로 시작하여 데이터 액세스와 사용하는 방법을 만들고 뷰를 향해 바깥쪽으로 작업한다.

  1. 아웃사이드-인 : Mock 데이터를 만든다. 주요 애플리케이션 화면을 모두 해당 데이터를 사용하여 읽기 전용으로 만든다. 그런 다음 Mock 데이터를 대체하기 시작하며 화면 추가 / 편집을 구축한다.

이 접근 방식의 이점은 응용 프로그램에 대한 전체적인 그림을 매우 빠르게 볼 수 있다는 것이다. 이는 매우 만족스러울 뿐만 아니라 데이터 입력을 처리하는 지루한 작업을 수행하기 전에 접근 방식을 수정하고 결함을 조기에 수정할 수 있게 해준다.

  1. 인사이드-아웃 : 해당 API와 함께 완전한 데이터 구조를 생성한다. Vue.js 용어에서 이것은 mutatins, actions, getters가 있는 store를 구축한다는 것을 의미한다. 데이터는 초기에 잘 정의되어 있으므로 애플리케이션을 구축하는 것은 데이터를 보고, 사용하고, 다양한 방법으로 연결하여 액세스 포인트(프런트엔드)를 만드는 과정이 된다.
  2. 모듈 형: 한 번에 하나씩 애플리케이션의 데이터 입력이 완성된 파트들을 빌드한다. 여기에서는 트랜잭션 페이지 - 목록 페이지, 추가 / 편집 페이지 - 트랜잭션 삭제 및 데이터 저장과 같은걸 만들 수 있다. 그런 다음 계정으로 이동한 다음 예산으로 이동한다. 각 단계에서 우리는 인사이드-아웃 또는 아웃사이드-인 방식으로 작업할 수 있다.

이 방법을 사용하면 애플리케이션의 완전하고 독립적인 섹션들을 더 빨리 얻을 수 있지만, 어떻게 서로 연결되어 있는지에 초점을 맞추지는 않는다. 임시로 가짜 데이터를 만들어야 할 수도 있다.

이 중에서 어떤 접근법을 쓰든 사이드 프로젝트를 만들고 있는 솔로 개발자에게 잘못된 접근이 아니다. 이 튜토리얼에서 필자는 모듈 방식의 인사이드-아웃으로 작업할 예정이며 독자가 계속 참여할 수 있도록 독립적인 부분들을 빠르게 만들 것이다. 또한 이 애플리케이션의 구조와 잘 어울리기도 한다.

스케치 작업

이 애플리케이션을 계획하는데 약 한 시간을 보냈다. 다양한 화면이 어떻게 생겼을지에 대한 대략적인 아이디어를 스케치해봤다.

이것은 내가 고려하고 있던 많은 기능들을 잘라내는데 도움이 되었다. 일단 짜보니 불필요하다고 느껴진 것이다. 전반적으로, 나는 애플리케이션에 대한 더 간단한 접근법을 정한 후에 컴퓨터 앞에 앉았다. 견고한 코어로 시작하여 나중에 기능을 추가하는 것이 좋다.

이 간단한 스케치들이 끝난 후에는 데이터 구조에 대한 대략적인 아이디어를 그렸다.

이 모든 작업들은 앞으로 다루게 될 다양한 모듈들을 생각해 내는데 도움이 되었다.

  1. 트랜잭션 - 사용자가 지출 내역을 보고 새 지출 내역을 추가 할 수 있는 곳
  2. 계정 - 다양한 은행 및 신용 카드 계정 추적
  3. 예산 편성 - 사용자가 특정 카테고리에 돈을 할당하고 전체 재정 상태를 볼 수 있는 곳

Tags : vue javascript 

comments powered by Disqus