'Component'에 해당하는 글 2건

Vue router

Programming/Vue.js 2021. 8. 24. 02:56

단일 페이지 어플리케이션(SPA) 인 vue 프로젝트에서의 링크 및 라우팅은 Vue.js 의 공식 라우터인 Vue Router 를 사용할 수 있다. (써드파티 라우터도 상관없음. Page.js, Director, ...) 이 때 라우터는 화면 전환에 필요한 기능들을 제공한다. 경로 매핑, 전환 효과... 우리는 단지 컴포넌트(.vue) 를 열심히 만들어 경로에 매핑하면 된다. 만약 단순한 라우팅만 필요하다면 별도의 라이브러리 없이 페이지 수준의 컴포넌트를 렌더링 하면 된다.

 

 

설치

 

> npm install vue-router
# or
> npm install vue-router@4

 

 

1. src/router.js

 

이 파일에 라우팅 경로와 매핑될 컴포넌트 정보들을 작성한다.

 

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

import App from './App'
import Component1 from "@/components/Component1";
import Component2 from "@/components/Component2";

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path: '/',
            component: App
        },
        {
            path: '/menu1',
            component: Component1
        },
        {
            path: '/menu2',
            component: Component2,
	    children: [
	       ...
	    }
        }
    ],
    mode: 'history'
})

export default router

 

가장 쉬운 방법으로 path 에 매칭되는 컴포넌트를 정의하였으며, children 안에는 동일하게 서브 path 와 컴포넌트들을 정의할 수 있다. vue-router 의 기본 mode 는 hash 이며 url 에 해시(#)가 추가되는데, 해시를 제거하려면 history 모드를 사용해야 한다.

 

 

2. src/main.js

 

Vue 인스턴스에 라우터 추가

 

import router from './router'

new Vue({
  render: h => h(App),
  router  // routes: routes 의 줄임
}).$mount('#app')

 

 

3. component.vue

 

<template> 안에서는 선언적 방식의 router 관련 태그로 <router-link> 와 <router-view> 가 주로 사용된다. <router-link> 는 <a> 태그로 렌더링되며, <router-view> 자리에는 지정된 컴포넌트가 렌더링된다.

 

<router-link to="/menu1">/menu1</router-link>
<router-link to="/menu2">/menu2</router-link>

<router-view name="navigation"></router-view>
<router-view name="contents"></router-view>

 

<router-link> 를 사용하면, url 에 매칭되었을 때 해당 태그에 'router-link-active' 클래스가 생성되므로 원한다면 스타일도 쉽게 적용 가능하다.

 

 

라우터 파라미터

 

routes: [
    { path: '/user/:id', component: User },
    { path: '/user/:id', component: User, props: true },
    { path: '/user', component: User, props: (route) => ({ query: route.query.q }) },
]

 

  • 첫번째 예는 컴포넌트에서 $route.params.id 로 속성을 받을 수 있다.
  • 두번째 예는 컴포넌트 옵션에서 props: ['id'] 로 선언 후 id 로 속성을 받을 수 있다.
  • 세번째 예는 /user?q=abc 에 대해 props: ['query'] 로 선언 후 속성을 받을 수 있다.

 

 

프로그래밍 방식의 router 사용

 

주로 Vue 인스턴스 내부에서 프로그래밍 방식(this.$router)으로 사용하여 라우터 인스턴스 메소드를 사용할 수 있다.

 

this.$router.push(path)  // window.history.pushState
this.$router.replace(path)  // window.history.replaceState
this.$router.go(-1)  // window.history.go(-1)

 

 

저작자표시 비영리 변경금지
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

import Vue

Programming/Vue.js 2021. 8. 20. 02:15

vue create 로 vue 프로젝트를 생성했을 때, 자동으로 생성된 파일들 중 뭔가 중요해 보이는 파일들을 살펴 보았다.

 

  • public/index.html
  • src/main.js
  • src/App.vue
  • src/components/HelloWorld.vue

 

 

1. public/index.html 

 

<html lang="">
    <head>
        ...
    </head>
    <body>

    <div id="app"></div>

    </body>
</html>

 

vue-cli-service serve 명령으로 보았다시피 Welcome Vue 웹사이트를 확인하였는데, 이 때의 템플릿이 public/index.html 파일이며 html-webpack-plugin 라이브러리로 처리된다. 빌드시 JS / CSS 등이 자동으로 삽입되며, webpack.config.js 파일을 생성하여 템플릿 관련 여러가지 설정 변경이 가능하다. (기본 템플릿 파일 및 타이틀 변경 등...) 이 파일에서 중요한 한 줄은,

 

<div id="app"></div>

 

이 html 파일은 body 안에 div 태그 한 줄만 있는 것을 보니, 레이아웃 보다는 정적 리소스를 관리하는 템플릿이다. 이 div 태그 하나에 앞으로 많은 컴포넌트들이 보여질 것이다.

 

 

2. src/main.js

 

어플리케이션의 시작점이 되는 파일이며, Vue 를 초기화하여 index.html 의 태그(#app) 에 삽입하는 코드가 들어 있다.

 

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

 

vue3 로 오면서 코드가 아주 조금 간단(?)해졌다. Vue 어플리케이션에 App 컴포넌트를 가져와서 #app 에 붙이는 코드이다. createApp 에 전달된 App 컴포넌트는 루트 컴포넌트가 된다. Vue 어플리케이션을 생성하는 이 파일에 추가적으로 자주 사용할 전역 컴포넌트나 부가적인 Vue 라이브러리를 등록할 수도 있다.

 

 

3. src/App.vue

 

<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
    name: 'App',
    components: {
        HelloWorld
    }
}
</script>

<style>
...
</style>

 

루트 컴포넌트에서는 다른 컴포넌트들을 트리형태로 계속해서 추가하여 사용할 수 있다. <template> 태그 안에는 기존의 html 태그와 동일하게 작성할 수 있으며 <HelloWorld> 태그 자리에는 해당 컴포넌트의 html 태그들이 삽입될 것이다. <script> 태그 안에는 HelloWorld 컴포넌트 태그를 사용할 수 있도록 명시하였다. 컴포넌트는 기존의 html 파일과 마찬가지로 html 태그, js, css 등도 여전히 사용할 수 있으며 재사용이 가능하다.

 

 

 

Vue 프로젝트는 이와 같은 구조로 .vue 컴포넌트만 열심히 만들면 된다.

 

빌드(vue-cli-service serve) 하게 되면 브라우저에서 vue 프로젝트를 확인할 수 있다. 기본 웹페이지에서 devtool 등을 이용하여 네트워크 resource 를 나열해 보면, index.html 템플릿과 vue 파일로 작성된 코드들이 js 파일(app.js, chunk-vendors.js 등)로 번들링(webpack) 되어 동작하는 것을 확인할 수 있다.

 

저작자표시 비영리 변경금지
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,