Vue 컴포넌트 템플릿 생성

프로젝트 구조가 잡혔다면, 이제 실제 화면을 구성할 뷰 컴포넌트를 작성해야 합니다. 간단한 예제로 목록을 보여주는 메인 화면과 상세 내용을 보여주는 화면 두 가지를 만들어 보겠습니다.

src/views 디렉토리를 생성하고, 그 안에 HomeView.vue와 DetailView.vue 파일을 만듭니다.

HomeView.vue:

<template>
  <section class="home-container">
    <h1>메인 목록 화면</h1>
    <p>여기에 데이터 리스트가 표시됩니다.</p>
  </section>
</template>

<script>
export default {
  name: 'HomeView'
}
</script>

DetailView.vue:

<template>
  <section class="detail-container">
    <h1>상세 내용 화면</h1>
    <p>선택한 항목의 상세 정보가 여기에 렌더링됩니다.</p>
  </section>
</template>

<script>
export default {
  name: 'DetailView'
}
</script>

Vue Router 설정 파일 작성

이제 생성한 컴포넌트들을 URL 경로와 매핑하기 위해 라우터 설정 파일을 구성합니다. src/router 폴더 아래에 index.js 파일을 생성하고 다음과 같이 코드를 작성합니다.

import Vue from 'vue';
import VueRouter from 'vue-router';

import HomeView from '../views/HomeView.vue';
import DetailView from '../views/DetailView.vue';

Vue.use(VueRouter);

const routeDefinitions = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/detail',
    name: 'Detail',
    component: DetailView
  }
];

const appRouter = new VueRouter({
  mode: 'history',
  routes: routeDefinitions
});

export default appRouter;

메인 엔트리 파일에 라우터 연동

애플리케이션의 시작점인 main.js 파일을 수정하여, 앞서 만든 라우터 인스턴스를 Vue 루트 인스턴스에 주입합니다.

import Vue from 'vue';
import RootComponent from './RootComponent.vue';
import appRouter from './router/index.js';

Vue.config.productionTip = false;

new Vue({
  el: '#root-app',
  router: appRouter,
  render: h => h(RootComponent)
});

루트 컴포넌트 및 내비게이션 구성

전체 레이아웃을 담당할 루트 컴포넌트(RootComponent.vue)에 내비게이션 링크와 라우터 뷰 포트를 배치합니다. <router-link>를 사용하면 페이지 새로고침 없이 경로를 이동할 수 있습니다.

<template>
  <div id="root-app">
    <nav class="main-navigation">
      <router-link class="nav-link" to="/">홈</router-link>
      <router-link class="nav-link" to="/detail">상세 페이지</router-link>
    </nav>
    
    <main class="content-area">
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: 'RootComponent'
}
</script>

<style>
#root-app {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  color: #333;
  padding-top: 40px;
}

.main-navigation {
  margin-bottom: 20px;
}

.nav-link {
  margin: 0 15px;
  text-decoration: none;
  color: #42b983;
  font-weight: bold;
}

.nav-link.router-link-exact-active {
  color: #35495e;
}
</style>

ESLint 포맷팅 규칙 조정

개발 서버를 실행할 때 ESLint로 인한 불필요한 포맷팅 오류가 발생한다면, 웹팩 설정에서 해당 로더를 제외시키거나 규칙을 완화할 수 있습니다. build/webpack.base.conf.js 파일을 열어 eslint-loader 관련 설정을 주석 처리하거나 삭제합니다.

// build/webpack.base.conf.js
module.exports = {
  module: {
    rules: [
      // 아래 ESLint 로더 설정을 제거하거나 주석 처리하여 포맷팅 검사를 건너뜁니다.
      /*
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      }
      */
    ]
  }
}

설정을 저장한 후 npm run dev 명령어를 다시 실행하면, 브라우저에서 내비게이션이 정상적으로 동작하는 것을 확인할 수 있습니다.

SASS/SCSS 스타일시트 통합

프로젝트에서 SCSS 문법을 사용하려면 관련 로더를 설치해야 합니다. RootComponent.vue의 스타일 블록에 lang="scss" 속성을 추가하고 외부 스타일시트를 불러와 보겠습니다.

<style lang="scss">
  @import "./assets/styles/global.scss";
  
  #root-app {
    background-color: #f9f9f9;
  }
</style>

이 상태에서 빌드를 시도하면 sass-loader를 찾을 수 없다는 오류가 발생합니다. 이를 해결하기 위해 터미널에서 다음 패키지를 개발 의존성으로 설치합니다. 최신 환경에서는 node-sass 대신 sass (Dart Sass)를 사용하는 것이 권장됩니다.

npm install sass-loader sass --save-dev

패키지 설치 후 개발 서버를 재시작하면 SCSS로 작성된 스타일이 성공적으로 컴파일되어 화면에 적용됩니다.