[Udemy Vue 완벽가이드 Section16] 메인 프로젝트:"코치 찾기" 웹앱 233. 프로젝트/웹앱 계획하기

강의 과정의 메인 프로젝트인 Coach Finder 앱을 구축해보자.

이 웹앱, Vue.js로 구축한 웹사이트를 통해 원하는 코치를 찾을 수 있게 된다.

우리가 구축하게 될 이 웹사이트, 이 웹앱에는 두 가지의 주요 기능이 있다.

 

1/ Find a Coach : 코치 찾기 기능

 1) List all available coaches

 - available한 코치들의 목록을 생성할 수 있어야 한다.

 

 2) View coach details

- 이 애플리케이션에 가입한 모든 코치들의 상세정보를 표시할 수 있도록 만든다.

 

3) Register as a coach

- 코치로서 가입하는 기능

 

4) Contact a coach

- 코치에게 연락할 수 있는 기능

 

2/ 연락하고자 하는 관심있는 코치에게 요청 메시지를 보내는 기능

1) Contact a coach

2) View incoming requests

 - 코치들은 이렇게 들어오는 요청들을 보고 답장을 회신할 수 있어야 한다.

 

 

Planning a Vue App

앱 구축을 위한 계획을 짜야 한다.

어떤 코드를 작성해야 할지에 대한 확실한 계획을 짜야한다.

어떤 앱을 구축하든 간에 계획을 수립하는 것은 가장 중요한 부분 중 하나이다.

앱 구축 계획을 하는 것엔 수많은 방법이 있다.

여러가지 방법 중 하나일 뿐.

 

구축하고자 하는 앱의 주요 기능을 정의하면서 시작하는걸 좋아한다.

이 경우에는 Find a Coach와 Requests Messages 이다.

그리고 이 영역에 속하는 하위 기능의 경우에는 모든 코치들 목록보기, 코치로 등록하기, 메시지 전송하기 등이 있다.

 

이렇게 기능을 정의한 후, 두 가지의 중요한 작업을 해야한다.

 

 

첫 번째의 중요한 작업

- "우리에게 필요한 데이터, 데이터 모델", Vue의 관점에서는 우리에게 필요한 "Vuex저장소 레이아웃"을 derive하는 것.

애플리케이션 전역의 state, getter들을 계획하고 필요하게 될 actions과 mutations에 대해 계획을 수립하는 것.

 

경험한 바로는 대체적으로 계획을 해도, 앱을 구축하기 시작하면 계획이 변경되게 된다.

계획 했던 것보다 더 많은 액션, 또는 다른 액션이나 변형을 추가하게 된다.

그래도 괜찮다. 시작 전에 며칠 동안이나 계획을 하는건 별로 좋지 않은 것 같다.

빨리 시작하는걸 좋아하지만, 어느정도 윤곽을 잡는게 좋다.

 

두 번째로 중요한 작업

- 물론 이 부분부터 시작해도 된다.

- 디자인, 즉 애플리케이션의 레이아웃을 고안하는 것.

어떤 컴포넌트가 필요하며, 이 컴포넌트들이 서로 어떻게 연관되어 있는지.

이 때는 vue router를 통해 설정할 route를 계획하는 부분도 포함된다.

어떤 다양한 페이지를 포함할지 등.

디자인이라 함은 색상이나 폰트 등의 디자인을 말하는게 아니다.

그런 부분은 디자이너들이 고안할 부분이다. Vue관점의 디자인에 대해 이야기하는 것.

컴포넌트와 컴포넌트들이 연관되어 있는 방식.

 

 

이렇게 주요 핵심이 되는 부분이 두 개가 있다.

 

 

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