[Udemy Vue 완벽가이드 Section16] 235. 레이아웃/컴포넌트 계획하기

레이아웃이라는 말에는 모든게 포함된다.

컴포넌트, 라우트 등 모든 것이 다 해당된다.

 

1/ 라우트

라우트부터 시작해보자.

이 애플리케이션에서 사용할 메인 페이지들이 된다.

 

코치에 대해서

/coaches 라우트 : 코치 목록을 로딩 → CoachesList 컴포넌트

/coaches/:id 동적 매개변수 라우트 : → CoachDetails 컴포넌트. 여기서 코치에 대한 상세정보를 확인한다.

/register : 코치를 등록하는데 사용 → CoachRegisteration 컴포넌트

 

이렇게 코치에 관련된 라우트는 다 끝났다.

 

요청에 대해서

/contact : 양식을 열어서 코치에게 메시지를 전송 → ContactCoach 컴포넌트

/requests : 들어오는 요청을 확인 → RequestsReceived 컴포넌트

 

Vue라우터를 통해 컴포넌트를 로딩하게 되므로 각 페이지들은 컴포넌트가 된다.

 

그럼 나머지 페이지들은 어떻게 하면 될까?

 

2/ 레이아웃

페이지를 그려보면 상단에는 헤더가 필요할 거다.

여기에 CoachesList로 가는 링크와 Requests로 가는 링크가 있다.

헤더를 통해서 앱의 해당 메뉴들로 이동할 수 있다.

 

coaches를 누르면 CoacheList페이지가 나타나게 될거고,

여기에는 작은 목록이 뜨도록 해서 필터링 하여 코치의 전문 분야에 따라 필터링을 하게 한다.

코치는 등록할 때 전문분야를 입력해야 한다고 하자.

 

filter가 있고, 그 아래에는 다양한 코치항목의 목록이 표시된다.

 

이메일 주소를 입력하고 코치에게 메시지를 보낼 수 있게 된다.

그리고 이를 전송하게 되면, 요청으로 이어지게 된다.

코치에게 요청이 전송되면, 해당 요청은 앱의 요청 영역에 표시가 된다.

 

요청 메뉴를 클릭하면, 헤더가 포함된 다른 페이지가 로딩이 되며,

해당 페이지에는 요청의 목록이 렌더링되어 이메일 주소와 전송된 메시지를 볼 수 있다.

그러면 그 이메일 주소로 답장을 보낼 수 있다.

 

이 페이지들에는 다양한 컴포넌트를 사용한다.

컴포넌트에 대한 계획을 지금 세울 수도 있으나,

일단 시작을 한 후에 페이지를 구축하면서 컴포넌트를 구축해보자.

 

예를 들어, 코치 항목에는 개별 컴포넌트를 사용하게 되는 등 내용이 많을 예정이다.

개괄적인 계획은 이 정도이고,

애플리케이션의 구조가 어느 정도 이해했다.

 

 

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