안녕하세요 상훈입니다.

리액트를 다루는 기술이라는 책의 21강에서 사용되는 koa-router는 현재의 리액트 버전(17)에서는 사용할 수 없습니다.

설치방법

npm i koa-tree-router

 

사용 방법

const Koa = require("koa");
const Router = require("koa-tree-router");

const app = new Koa();
const router = new Router();
router.get("/", function(ctx) {
  ctx.body = "hello, world";
});

app.use(router.routes());

app.listen(8080);
// 혹은
app.listen(8000, () => {
  console.log('listening...8000...');
})

기존의 사용방식은 일치하고, 다른점은 하단의 app.use 부분입니다.

allowedMethods() 와 같은 긴 코드가 사라지고 위와같이 깔금한 내용만 남았습니다.

 

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

 

 

 

koa-tree-router

A high performance koa router. Latest version: 0.10.1, last published: 11 days ago. Start using koa-tree-router in your project by running `npm i koa-tree-router`. There are 7 other projects in the npm registry using koa-tree-router.

www.npmjs.com

 

반응형

안녕하세요 상훈입니다.

React.js 를 사용하던 와중 history를 사용하려고하는데 에러가 발생하였습니다.

export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' (possible exports:

내용은 'useHistory' 라는 함수가 존재하지 않는다는 내용이었습니다.

 

리액트의 버전이 올라가면서 또 사용되지 않는 내용인데요,

이전 내용

이렇게 사용하던 내용들이 이제는  아래와 같이 사용해주시면 됩니다.

 

더욱 간결한 함수의 등장으로 이제는 useHistory를 사용하지 않습니다!

 

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

 

참고

 

Attempted import error: 'useHistory' is not exported from 'react-router-dom'

useHistory giving this error: Failed to compile ./src/pages/UserForm/_UserForm.js Attempted import error: 'useHistory' is not exported from 'react-router-dom'. This error occurred during the build...

stackoverflow.com

 

반응형

안녕하세요 상훈입니다.

React.js 에서 Switch 를 사용하려고 하는데 아래와 같은 에러가 발생하였습니다.

ERROR in ./src/App.js 20:37-43 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams) 

에러의 원인은 React의 버전이 올라가면서 Switch Routes 로 변경되었다고 합니다.

사용 방법은 똑같으니, Switch로 작성하셨던 부분을 Routes로 변경해주시면 됩니다.

Switch => Routes

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

react-router-dom 의 기능에서도 Switch 대신에 Routes를 작성해주시면 됩니다.

 

이상입니다.

 

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

반응형

Vue.js 에서 router 를 이용할 때 페이지 탭의 이름을 설정할 수 있다.

바로 routerindex.js 에서 가능하다.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: 'IP Address Tracker'
    }
  },
]

Home.vue의 meta.title : '  ' 의 값을 설정

그리고 rotuer 아래에 작성

// page tab control
router.beforeEach((to, from, next) => {
  document.title = `${to.meta.title}`
  next()
})

 

전체 코드 예시

// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: 'IP Address Tracker'
    }
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// page tab control
router.beforeEach((to, from, next) => {
  document.title = `${to.meta.title}`
  next()
})

export default router

 

유용하게 사용하십쇼!

반응형

사용환경 : Vue.js 2, vue-cli, vue-Router 사용

 

router-link + binding 를 통해 해당 내용을 전달해준다.

<router-link :to="'/detail/'+123453" >

여기서 `123453` 이 전달하고자하는 변수가 될 수도 있다.


 

1. Home.vue

<template>
// 각각의 id를 가진 리스트를 v-for로 출력.
<div class="movie" v-for="movie in movies" :key="movie.imdbID">
	<router-link :to="'/movie/' + movie.imdbID" />
    	// router-link를 통해 반복문을 통해 출력된 movie 객체의 id값을 전달하고자 한다.

</template>

 

2. Index.js (router)

  {
    path: '/movie/:id',
    name: 'Movie Detail',
    component: MovieDetail
  }

: 바인딩을 통해 id값을 전달할것이라고 선언한다.

 

3. MovieDetail.vue

2가지 방법으로 출력이 가능하다.

  1. html 요소에 바로 텍스트만 출력
  2. script 내에서 추가 가공 후 또다른 전체 데이터를 출력

  1. html 요소에 출력

  html 요소에 출력하는 것은 간단하다.

<template>
	<div> {{ $route.params.id }} </div>
</template>

이렇게 바로 사용이 가능하다.

 

  2. script 내에서 가공 (후 또 다른 전체 데이터를 출력)

  위에서 $route를 바로 사용하던데에 반해 이번에는 vue의 useRoute 기능을 사용해야 한다.

 

import { useRoute } from 'vue-router'

export default {
  setup () {
    const route = useRoute()
    const paramsValue = route.params.id  
  }
}

이렇게 paramsValue로 변수를 선언하여 사용할 수 있다.

반응형

안녕하세요 상훈입니다.

Vue.js 에서 라우팅을 정리해볼까합니다. 

 

Route, Routing...  Laravel 에서는 web.php가 그 역할을 가지고 있습니다. 


하지만 저는 Front Framework 부분에서 그 내용을 처리하는 것이 더 옳다고 생각하기 때문에 vue-route에도 신경을 써보았습니다.

처음에는 진짜 정말 ? ? ? 하는 순간에 파일이 휙휙 지나가고 내가 한 게 이게 무엇인가...나는 감자다 이랬는데 여러 번 반복하여 자료를 살펴보고 직접 세팅을 해보았으며 정리를 해보니 대략적인 감을 잡았습니다.

Vue.js 3 에서는 아직 적용해보지 않았고, 현재는 Vue.js 2 만 적용해본 상태입니다.

기본 구성은 이렇습니다.

기본 구성은 위와 같습니다. 

0. Vue project설치하고, vue-router를 설치합니다.

$ vue create '프로젝트명'
$ npm i -S vue-router
$ npm install 

1. router/index.js 생성
2. views/...  : vue 파일들 생성
3. main.js 수정
4. App.vue 수정

이렇게 진행하도록 하겠습니다.


1. router/index.js 생성

router 폴더와 그 안에 index.js를 생성하겠습니다. 그리고 아래와 같은 코드를 작성해줍니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import FirstPage from '@/views/first-page.vue'
import SecondPage from '@/views/second-page.vue'
import MainPage from '@/views/main-page.vue'

Vue.use(VueRouter)

const routes = [
        {
            path: '/', name: 'MainPage', component: MainPage
        },
        {
            path: '/FirstPage', name: 'FirstPage', component: FirstPage
        },
        {
            path: '/SecondPage', name: 'SecondPage', component: SecondPage
        },
    ]

const router = new VueRouter({
    mode: 'history',
    routes
})
export default router

vue route 관련한 내용을 import.

VueRouter를 사용한다고 선언.

routes의 경로를 직접 지정 저장. => Web.php가 하는 라우팅 역할

router를 출력(?) 내보내기(?) 느낌 실행


2. views/...  : vue 파일들 생성

views라는 폴더를 생성해주시고, 그 안에 해당되는 .vue파일들을 생성해줍니다.

3개의 .vue 파일을 router 이름과 동일하게 생성

 

여기서 잘 보시면 파일제목 <-> route 했던부분의 이름이 다른 것을 확인하실 수 있습니다.

바로 snake-casecamel-case를 지원하는 것인데요, 이에 대해서는 아시리라 생각하고 넘어가겠습니다.


3. main.js 수정

main.js

기존에 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),
}).$mount('#app')

변경된 부분은

1. import router from './router'
2. Vue 객체 내에 router 선언 
입니다.

이 곳에서 router를 호출하게 되고, app을 렌더링 시켜줍니다.


4. App.vue 수정

마지막으로 App.vue 수정입니다. 이곳에서는 쓸데없는 기존의 부분들을 모두 걷어내주고, 아래와 같이 작성합니다.

<template>
  <div id="app">
    <h1>Router Start</h1>
    <router-link to="/">Main Page</router-link> |
    <router-link to="/FirstPage">First Page</router-link> |
    <router-link to="/SecondPage">Second Page</router-link>
    <router-view />
  </div>
</template>

<script>

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<router-link> </router-link>
<router-view />

두 가지만 잘 알고 있으면 됩니다. 나머지는 없애도 됩니다.

<router-link to="경로"> a 태그 라고 생각하세요 </router-link>

router link a 태그와 생김새가 동일합니다. 해당 태그를 클릭하면 (1)의 index.js에 의해 routing되어 해당되는 경로로 이동합니다. 

router-view 는 해당되는 view출력해줍니다. 대신 contents만 갈아끼워준다는 느낌이 강합니다.

 

 

[ F12 개발자모드 ] 를 켜서 확인해주시면 <div id="app"> 내의 태그들 reload 되기 때문입니다.

 

이제  $ npm run serve 를 통해 서버를 띄워주시면 아래의 결과가 나옵니다.

라우팅 어려운것,,,,

 

위의 내용 중에 오류잘못 서술한 부분이 있다면

코멘트 남겨주시면 감사하겠습니다.

 

뷰 초보자이지만 천천히 꾸준히 나아가려고 합니다. 감사합니다.

 

제가 정리한 전체적인 흐름입니다.

 

 

 

강의는 짐코더님의 Vuetify 강좌 중에서 반복적으로 연습해보았습니다.

 

 

동적 라우트 매칭 | Vue Router

동적 라우트 매칭 주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 자주 있습니다. 예를 들어 모든 사용자에 대해 동일한 레이아웃을 가지지만 하지만 다른 사용자 ID로 렌

router.vuejs.org

반응형

+ Recent posts