[Udemy Vue 완벽가이드 Section16] 234. 데이터 요구 사항 계획하기

그럼 data부터 시작해보자.

 

우리에게는 두 가지 주요기능이 있다.

Coaches가 있고, Requests, 즉 메시지가 있다.

 

그러면 coach들의 list, requests들의 list가 필요하다.

여러 개의 requests들이 전송될 수 있고, 또한 동일 coach에게 여러 개의 request가 전송될 수 있다.

 

그리고 모든 요청 아이템들은 당연히 코치를 가리켜야 한다.

따라서 요청은 아주 중요한 데이터가 된다.

 

 

request에는 무엇이 있어야 할까?

- 코치 id(request이 전송될 때 request이 코치에게로 연결되어 있어야하므로.)

- 메시지(즉, 코치에게 전송될 텍스트. 그래야 코치가 답변할 수 있다.)

- (요청자의) 이메일 주소

 

이렇게 요청 내에는 세 개의 중요 데이터가 포함된다.

그리고 이러한 요청들의 목록 또한 앱의 중요 부분이 된다.

 

코치에는 뭐가 있어야 할까?

- First name

- Last Name

- id

- description

- 시간당 비용(rate)

 

이 정도의 데이터면 충분한 것 같다.

이렇게 핵심 데이터, 즉 앱에 필요한 핵심 데이터 모델을 정리했다.

 

coach id를 통해 coach와 request는 연결된다.

이는 데이터 모델 밑그림에 불과하고, 좀 더 전문적인 방식으로 계획을 수립할 수도 있다.

 

이제 필요한 데이터에 대한 전반적인 아이디어는 얻었으니, Vuex의 레이아웃을 구성하는데 도움이 된다.

예를 들면, 두 개의 Vuex 모듈이 필요하겠다.

코치에 하나, 요청에 하나 이렇게 모듈을 사용하게 된다.

 

그리고 Vuex와 데이터를 계획하는 것은 저장하고 싶은 데이터를 계획하는 것 뿐만 아니라 Getter, Action, Mutation을 계획하는 것.

 

Getter의 경우에는 간단하다. 

코치를 fetching할 getter, 요청을 fetching할 getter가 필요하다.

 

그렇다면 Mutation의 경우에는 어떨까?

1/ 코치

코치에는 코치 등록을 위한 변형이 필요할 것이고, 코치를 설정하기 위한 변형이 필요하다.

이 부분이 모호할 수도 있는데, 앱이 시작되면 데이터베이스, 즉 웹 서버인 백엔드, 이 경우에는 Firebase에서 코치를 로딩하게 된다.

코치에 관한 데이터가 로딩되고 나면, 즉 코치의 목록이 데이터베이스로부터 로딩되고 나면, 그 목록을 로컬 Vuex저장소로 설정한다.

이렇게 코치에는 두 개의 변형이 필요하다.

 

2/ 요청

요청에서는 코치로의 연락을 위한 변형이 필요할 거다. 즉, 새로운 요청을 추가하는 경우.

그리고 요청 설정 변형도 필요할 텐데, 

백엔드로부터 요청이 로딩되고 나면 요청을 설정하는 것. 왜냐하면 코치와 마찬가지로 요청도 데이터베이스로 전송되어 거기에 저장될 것이고 데이터베이스로부터 로딩을 할 수 있어 변형을 통해 설정을 할 수 있다.

 

 

Action의 경우에는 코치를 로딩하는 액션과, 요청을 로딩하는 액션이 있을 것이고

새로운 코치를 추가하고, 새로운 요청을 추가하는 액션이 있을 거다.

 

이렇게 애플리케이션 내의 데이터를 살펴봤다.

이제 레이아웃인 컴포넌트와 우리가 작업하게 될 라우트로 넘어가 계속 작업해보자.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.