CodeHoon

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

안녕하세요 상훈입니다.

✔ 목표

Nuxt.js 3 - Vue.js3 에서 routing 하기 (페이지 전환)

✔ 환경

Nuxt.js3, Vue.js3

✔ 하는방법(결론) - 결론부터 말하기

// app.vue
<template>
  <div>
    <div class="header-area">
      <NuxtLink to="/">Main</NuxtLink>
      <NuxtLink to="/login">Login</NuxtLink> 
      <NuxtLink to="/register">Register</NuxtLink>
    </div>
    <NuxtPage />
  </div>
</template>

/app.vue (루트 경로) 에서 NuxtLink와 NuxtPage를 사용하기.

// /pages/index.vue
<template>
  <div>
    this is index view from pages
  </div>
</template>

/pages/index.vue 라는 파일이 있을 때 app.vue의 NuxtPage 가 /pages/index.vue 가 되는 것 입니다.

✔ Vue.js3 와 Nuxt.js 의 차이점

일반 Vue 프로젝트에서는 

1) main.js - route 사용 선언
2) App.vue - RouteLink, RouteView 로 작성

반면에 Nuxt 에서는 조금 다르더라구요.

처음에는 NuxtPage 말고  Nuxt  태그만 작성했다가 페이지 출력이 되지 않아서 왜 자꾸 안되지??? (여러 기술 블로그를 염탐했을 때) 하다가,
아래의 Nuxt.js3 강의를 올려주신 익숙하신 Vue 유튜버 링크(맨 아래 링크 첨부)에 들어가 빠르게 감아서 NuxtLink 부분만 보고 고치게되었습니다.

✔ 조금 더 나아가기 🚀

그렇다면 /pages/directory/directory/... 이런식으로 하위 폴더가 있을 때는 어떻게 해야할지 잠깐 생각해보았고,

Nuxt 프로젝트 특유의 경로 자동 감지를 생각하게 되어, 간단하게 구현하였습니다.

이렇게 슬래쉬로 하위 디렉터리 구분을 할 수 있었습니다. 

😎 마치며 

왜 이런 간단한 것 하나조차 Vue.js 프로젝트와 달라서 이렇게 애를 먹이는 것인지,,,
하나씩 그래서 설정하고 확인하고... 라우팅까지 신경쓰면서 살고 있네요.
기존에는 1분 걸릴게 Nuxt로 하니 10분도 넘게 찾고 있었네요.

어제는 프로젝트 만들고 띄우지도 못해서ㅋㅋㅋㅋ 지웠다가 새로운 프로젝트 생성하고 난리였습니다.

이상입니다.

안녕하세요 상훈입니다.

Nuxt 3.0 버전을 이용해 gh-page 를 사용하여 git hub page를 자동 배포되도록 설정하려고하는데,
deploy가 동작하지 않았습니다.

npm run deploy

> deploy
> gh-pages -d build

ENOENT: no such file or directory, stat ~

이 말인즉슨 해당 경로에 파일 혹은 폴더가 없다. 

라는 뜻인데요, 저희 프로젝트의 기본 경로를 보시면 동일한 경로가 없을 것으로 판단됩니다.

package.json을 확인해주시면,

"deploy" script 의  gh-pages -d .output/public  이라고 작성되어져있는데, 마지막 .output/public 은 빌드된 내용이 출력될 경로를 나타내줍니다.

그래서 만약! generate 를 안해주셨다면, npm run generate 를 먼저 해주세요.

저는 generate를 안했었기 때문에 경로가 존재하지않아 발생한 오류였습니다. dist 폴더 or public 폴더 등등

(그림에서 안내해준 내용을 잘 읽어보시면, pulbic 이 .output/public 에 생성되었다고 작성되어져있습니다.)
(추가 :  .output/public 을 정적배포가 가능하다고 출력되었습니다.)

이상입니다.

그리고 이제 deploy 를 해주면 됩니다.  npm run deploy 

결과적으로 업로드 성공되었습니다.

이상입니다. 감사합니다.

다음번에는 Action을 통해 자동으로 배포되도록 설정해보려고합니다.

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

바로 router 의 index.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

유용하게 사용하십쇼!

Web Application에서 게시판이나 상품리스트와 같이 정렬이 존재하고,
페이지를 넘겨야하는 경우가 있는데, 이 때 pagination을 사용한다.

라이브러리(ex. Pagination.js) 도 존재하지만 직접 코딩할 때 필요한 limit offset, count를 포스팅하겠다.

Mysql 에서 limit를 사용할때 보통은 1개의 인자만 입력하여 최대 n개 를 가져오게 한다.

select * from tableName ~ limit 10;

그런데 pagination을 적용할 때에는 limit n 으로 전부 처리할 수가 없다.
페이지가 분할되어 출력되어야 하기 때문이다. 

그래서 limt n, k ; 를 사용하는데,

select * from tableName ~ limit 행의 수(offset),  출력할 컬럼 수;

//예시 
select * from tableName ~ limit 3, 4
// 0,1,2,3번째 행부터 4개 출력

이렇게 사용한다.

offset 은 기본적으로는 0으로 처리되며,

설정하지 않을 경우 그냥 자동으로 0 처리가 된다. 

즉, 평소에 offset을 제공하지 않고 limit을 사용한 경우, offset이 0이 자동생략되었다는 것이다.