[Udemy Vue 완벽가이드 Section16] 238. 메인 레이아웃 및 스타일링 작업하기

가장 먼저 볼 페이지는 CoachesList.vue 페이지이다.

마지막에는 꽤 복잡한 페이지가 될 것이다.

 

코치들의 목록 뿐만 아니라, 필터링 로직 또한 추가되어 표시된 코치 목록을 필터링할 수 있게끔 만든다.

 

코치의 목록을 출력하려면 일단 코치가 필요하다.

지금 당장은 관리하고 있는 데이터가 존재하지 않고 있다.

 

CoachList.vue 컴포넌트에 이렇게 두 개의 메인 영역이 있다.

<template>
  <section>
    FILTER
  </section>
  <section>
    LIST OF COACHES
  </section>
</template>

 

이에 대해서는 두 개의 개별 하위 컴포넌트를 생성해 CoachList컴포넌트의 내용을 비교적 간단하게 유지할 예정.

 

 

먼저 지금과 다른 폰트를 사용하기 위해 전역 스타일링을 설정해보자.

→ App.vue에 기본 스타일링을 추가하면 전체 앱으로 적용된다.

일부분의 스타일링이 아니라 전역적으로 적용될 스타일링이 된다.

 

 

지금 당장 이 페이지는 아무런 쓸모가 없다.

 

두 가지 방법으로 작업을 진행할 수 있다

- 첫 번째 : Vuex를 추가해 데이터를 추가하기 시작하는 것.

- 두 번째 : 전체 기본 레이아웃과 내비게이션, 애플리케이션의 헤더를 추가 → 레이아웃 작업을 마무리 → 모든 페이지로 이동이 가능하도록 → 페이지에는 더미 코드 포함 → 데이터는 이후에 추가.

 

이번에는 두 번째 방법을 택해보자.

가장 먼저 내비게이션과 기본 레이아웃을 모두 연결한 뒤 데이터 추가 작업을 하는 것.

 

src폴더로 이동해 pages 옆에 components폴더를 생성한다.

이 폴더의 내부에 layout폴더를 추가한다.

layout폴더 안에는 TheHeader.vue 파일이 들어간다.

이 파일엔 애플리케이션에 필요한 내비게이션을 가진 기본 헤더가 들어있다.

 

App.vue파일 내에서 TheHeader컴포넌트를 지역 컴포넌트로 등록한다.

why? → App.vue에서만 사용하므로.

그리고 <router-view>의 위쪽에서 <the-header>를 렌더링한다.

<!--App.vue-->
<template>
 <the-header></the-header>
 <router-view></router-view>
</template>

<script>
 import TheHeader from './components/layout/TheHeader.vue';
 export default {
  components: {
   TheHeader,
  },
 };
</script>

 

 

TheHeader.vue에는 header요소가 필요하고, 내비게이션의 일부로서 이 페이지의 메인 제목인 h1태그가 필요하다.

클릭 가능해야하며, 시작페이지로 연결되어야 하기 때문에 <router-link>가 되어야 한다.

 

 

이 옆의 ul에는 다양한 내비게이션 항목이 포함되고, 이는 <router-link>가 된다.

TheHeader.vue의 기본 설정은 이 정도면 될 것 같다.

<template>
  <header>
    <nav>
      <h1><router-link to="/">Find a Coach</router-link></h1>
      <ul>
        <li><router-link to="/coaches">All Coaches</router-link></li>
        <li><router-link to="/requests">Requests</router-link></li>
      </ul>
    </nav>
  </header>
</template>

 

 

 

지금은 스크립트가 필요하지 않다. 동적인 요소가 들어있지 않으므로.

스타일링만 추가.

 

 

 

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