시작

지난 시간에는 Vue를 설치하고 프로젝트를 생성하는 방법을 알아보았다. 이번시간에는 프로젝트 생성 후 설정 및 라이브러리 및 패키지 설치 등 다음 단계을 알아보도록 하겠다.

프로젝트 생성후 다음단계

1 프로젝트의 구조 이해

생성된 프로젝트의 디렉토리 구조를 이해하고, 주요 폴더와 파일들의 역할을 이해해보자.

1.1 프로젝트 디렉토리

• node_modules/ : 프로젝트의 모든 npm 패키지가 설치되는 디렉토리이다.

  • ❗️이 디렉토리는 직접수정하지 않는다. package.json 파일에 정의된 의존성을 바탕으로 npm install 명령어를 통해 자동으로 관리된다.

• public/ : 정적 파일을 포함하는 폴더로 index.html 파일도 이곳에 위치한다.
  favicon.ico와 같은 정적 자산도 이곳에 위치한다.

  • ❗️ 정적 파일은 JavaScript, CSS, 이미지, 폰트 등과 같이 클라이언트 측에서 사용되는 파일을 말한다.

• src/ : 소스 코드가 위치하는 폴더로 우리가 개발하는 것들이 이루어지는 디렉토리이다.

• assets/ : 이미지, 폰트, CSS와 같은 정적 자산이 위치하는 디렉토리이다.
  src 디렉토리 내의 파일들은 이 디렉토리의 자산을 상대 경로로 참조할 수 있다.

• components/ : Vue 컴포넌트가 위치하는 디렉토리이다.
  재사용 가능한 UI 컴포넌트를 이 디렉토리에 생성한다.
  예: Header.vue, Footer.vue, Button.vue

  • ❗️ Vue.js의 컴포넌트는 UI를 구성하는 재사용 가능한 독립적인 블록입니다.

• views/ : 페이지 수준의 Vue 컴포넌트가 위치하는 디렉토리이다.
  일반적으로 라우터에 의해 렌더링되는 컴포넌트들이 포함된다.
  예: Home.vue, About.vue

• router/ : 라우터 설정 파일이 위치하는 디렉토리이다. index.js 파일을 통해 애플리케이션의 라우트를 정의한다.

  • ❗️ 웹 애플리케이션에서 라우터(Router)는 사용자가 방문하는 URL 경로에 따라 다른 페이지나 컴포넌트를 보여주는 역할을 하는 라이브러리 또는 기능을 말한다.

• store/ : Vuex 상태 관리 스토어가 위치하는 디렉토리이다.
  index.js 파일을 통해 Vuex 스토어를 설정하고 모듈을 구성한다.

1.2 프로젝트 파일

• App.vue : 애플리케이션의 루트 컴포넌트이다.
  주로 전체 애플리케이션의 레이아웃을 정의한다.

• main.js : 애플리케이션의 진입점 파일이다.
  Vue 인스턴스를 생성하고 App.vue 컴포넌트를 마운트한다.

• babel.config.js : Babel 설정 파일이다.
  최신 JavaScript 문법을 구형 브라우저에서도 동작하도록 변환한다.

• package.json : 프로젝트 메타데이터 및 의존성 목록이 포함된 파일이다.
  프로젝트의 이름, 버전, 스크립트, 의존성 등이 정의된다.

2 라이브러리 및 패키지 설치

• Vue Router : 라우팅을 위해 설치

$ npm install vue-router

• Vuex : 상태관리를 위해 설치

$ npm install vuex

• Axios : HTTP 요청을 위해 설치

$ npm install axios

설치가 완료 되면 위와 같이 package.json 파일에서 확인이 가능하다.

3 기본 구조 설정

3.1 라우터 설정

Vue Router를 사용해 프로젝트의 라우팅을 설정한다. src/router/index.js 파일을 생성하거나 수정한다.

3.1.1 라우터 설정 파일 만들기

프로젝트의 루트 디렉토리에 src/router 디렉토리를 만들고, 그 안에 index.js 파일을 생성한다. 이 파일에서 라우터를 설정합니다.

• src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(Router); // Router를 플러그인으로 사용하도록 등록

export default new Router({
  mode: 'history', 
  // 브라우저의 히스토리 API를 사용하여 URL을 관리한다. 
  // 이 모드를 사용하면 URL에 해시(#)가 포함되지 않는다.
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
    // 각 경로에 대한 설정을 배열로 정의한다.
    // 경로는 path, name, component를 포함한다.
  ]
});

3.1.2 라우터를 메인 앱에 연결

메인 앱 파일인 src/main.js에서 라우터를 임포트하고 Vue 인스턴스에 연결한다.

• src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
// 라우터 설정 파일을 임포트한다.

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App) // Vue 인스턴스에 라우터를 연결한다.
}).$mount('#app');

3.1.3 라우터 뷰와 링크 설정

App.vue 파일에서 <router-view>와 <router-link>를 사용하여 라우트된 컴포넌트를 표시하고 네비게이션 링크를 만든다.

• scr/App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <!--네비게이션 링크를 생성한다. to 속성을 사용하여 경로를 지정한다.-->
      <router-link to="/about">About</router-link>
      <!--현재 라우트에 맞는 컴포넌트를 렌더링하는 자리 표시자이다.-->
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
/* 전역 스타일 */
</style>

3.1.4 동적라우트 매칭

동적 라우트 매칭을 통해 경로에 변수를 포함할 수 있다. 예를 들어, 사용자 프로필 페이지를 동적으로 로드할 때 사용한다.

• src/router/index.js

import UserProfile from '@/views/UserProfile.vue';

const routes = [
  {
    path: '/user/:id', // id : 동적 세그먼트로, url의 일부로 전달되는 변수이다.
    name: 'UserProfile',
    component: UserProfile
  }
];

export default new Router({
  mode: 'history',
  routes
});

• src/components/UserProfile.vue에서 라우트 접근하기

<template>
  <div>
    <h1>User Profile</h1>
    <p>User ID: {{ $route.params.id }}</p>
    <!--$route.params.id : 라우트의 id 파라미터에 접근-->
  </div>
</template>

<script>
export default {
  name: 'UserProfile'
};
</script>

<style scoped>
/* 스타일 정의 */
</style>

3.1.5 네비게이션 가드

네비게이션 가드는 특정 조건에 따라 라우트 전환을 허용하거나 막을 수 있다. 예를 들어, 사용자가 인증된 경우에만 특정 페이지에 접근하도록 설정할 수 있다.

• 글로벌 네비게이션 가드 | src/router/index.js

const router = new Router({
  mode: 'history',
  routes
});

router.beforeEach((to, from, next) => {
  // 인증된 사용자만 접근 가능
  if (to.path === '/protected' && !isAuthenticated()) {
    next('/');
  } else {
    next();
  }
});

export default router;

function isAuthenticated() {
  // 인증 여부를 반환하는 함수 (예: 토큰 검증)
  return !!localStorage.getItem('authToken');
}

• 라우트 정의에서 네비게이션 가드 | src/router/index.js

const routes = [
  {
    path: '/protected',
    name: 'Protected',
    component: Protected,
    beforeEnter: (to, from, next) => {
      if (!isAuthenticated()) {
        next('/');
      } else {
        next();
      }
    }
  }
];

3.1.6 프로그램적 네비게이션

• Vue Router를 사용하면 자바스크립트를 통해 특정 경로로 프로그래밍 방식으로 이동할 수 있다.

this.$router.push('/about');

3.1.7 중첩된 라우트

• 중첩된 라우트를 사용하면 하나의 라우트 내에서 여러 하위 라우트를 정의하여 복잡한 뷰 구조를 만들 수 있다.

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
];

3.1.8 예시 구조

my-vue-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   │   └── index.js
│   ├── views/
│   │   ├── Home.vue
│   │   ├── About.vue
│   │   └── UserProfile.vue
│   ├── App.vue
│   └── main.js
├── .gitignore
├── package.json
└── README.md

3.2 Vuex 설정

Vuex를 사용해 상태 관리를 설정한다. src/store/index.js 파일을 생성하거나 수정한다.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 상태 변수 정의
  },
  mutations: {
    // 상태 변화를 위한 함수 정의
  },
  actions: {
    // 비동기 작업 정의
  },
  modules: {
    // 모듈 정의
  }
});

4 주요기능 구현

4.1 컴포넌트 생성

필요한 컴포넌트들을 src/components 폴더 아래에 생성한다.

• src/components

src/components/
  |- HelloWorld.vue
  |- Home.vue
  |- About.vue
  |- Navbar.vue
  |- Footer.vue

4.2 API통신

Axois를 사용해 외부 API와 통신한다.

• src/services/api.js

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
});

export default {
  getExampleData() {
    return apiClient.get('/example');
  }
};

5 스타일링 및 UI프레임워크 사용

프로젝트의 스타일을 적용한다. 추가적으로, Vuetify, Bootstrap-Vue 등의 UI 프레임워크를 사용하여 디자인을 통일성 있게 할 수 있다.

$ npm install vuetify

UI프레임워크를 설치한 후 src/plugins/vuetify.js 파일을 설정하고, main.js에 추가한다.

• src/plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

export default new Vuetify({});

• src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app');

6 배포

프로젝트를 빌드하여 배포한다.

$ npm run build

다음으로

프로젝트를 만들어보고, 기본 설정 및 배포까지 알아 보았다. 다음 시간에는 배포전 테스트와 vue로 미니 프로젝트를 구성해보면서 공부해 보겠다.

참고 문서
Vue.js 공식문서

jest-test 오류관련 문서

작성된 Github Link
Github Stjoo0925