1. Vue3 프로젝트 생성npm init vue@latest my-vue3-appcd my-vue3-appnpm install 2. Tailwind Css 설치Tailwind CSS와 관련된 패키지를 설치합니다. npm install -D tailwindcss postcss autoprefixer 그런 다음 Tailwind CSS 초기화를 진행합니다. npx tailwindcss init 이 명령어를 실행하면 프로젝트 루트 디렉토리에 tailwind.config.js 파일이 생성됩니다. 3. Tailwind CSS 구성
Pinia 란?Pinia 는 Vue 에서 사용하는 상태 관리를 위한 라이브러리입니다. Vue2 에서는 Vuex 를 사용하다가 Pinia 의 등장으로 점차 Pinia 가 대세를 이루게 됐습니다. Vue 에서는 ref, reactive 와 같은 상태 관리를 할 수 있는 방법들이 있는데 이런 함수들을 이용해 생성된 상태를 다른 페이지로 전달하기 위해서는 props 나 event 혹은 provide 나 inject 를 이용해 전달할 수 있지만, 파일이 많아질수록 추적하기가 복잡해집니다. Pinia 를 사용하는 이유는 상태를 관리하는 로직을 분리할 수 있고 중앙 집중식 으로 관리할 수 있다는 이점 때문에 그렇습니다. 1. Pinia 설치npm install pinia 2. Pinia 모듈 추가하기main.tsimport { createApp } from 'vue';import { createPinia } from 'pinia';import App from './App.vue';const app = createApp(App);const pinia = createPinia();app.use(pinia);app.mount('#app'); 3. Pinia Store 생성
참고 Vue Router 공식 문서 🌐 네비게이션 가드Vue 3 를 이용해 개발하다보면, 사용자의 인증 여부에 따라 페이지 접근을 제한하거나, 페이지 전환 전/후에 특정 로직을 실행하고 싶을 때가 있습니다. SSR 웹사이트의 경우 서버가 요청을 받아서 처리를 하면 되지만, CSR 인 Vue 에서는 Client 에서 페이지 이동을 확인해야 합니다. 다행히 Vue Router 에서는 Router 를 탈때 특정 로직 수행을 위해 네비게이션 가드 를 제공합니다. 네비게이션 가드 는 라우터 전환 시점에 개입할 수 있게 해주는 훅 입니다. 🛡️ 전역 가드전역 가드는 애플리케이션 전체에 적용되며, 모든 라우트 변경 시 실행됩니다. beforeEach: 모든 라우팅 전에 실행 beforeResolve: 컴포넌트 렌더링 전 비동기 작업 afterEach: 라우팅 완료 후 작업
참고https://github.com/posva/unplugin-vue-router vue 에서는 새로운 페이지를 생성할때마다 vue-router 에 직접 등록해줘야 하는 번거로움이 있습니다. 이런 수고스러움을 좀 덜고자 찾아보니 vue 에서도 next 나 nuxt 처럼 파일 기반으로 라우팅을 할 수 있게 지원해주는 모듈을 찾게 됐습니다. 1. unplugin-vue-router 모듈을 설치npm i -D unplugin-vue-router 2. vite.config.ts 에 다음 내용을 추가해 줍니다.vite.config.tsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import VueRouter from 'unplugin-vue-router/vite';// https://vitejs.dev/config/export default defineConfig({ plugins: [vue(), VueRouter({})],}) 3. tsconfig.json 설정 정보 추가tsconfig.json{ "compilerOptions": { // ... "moduleResolution": "Bundler", // ... "types": ["unplugin-vue-router/client"], } // ... "include": [ // ... "./typed-router.d.ts" ],}
Vue Router의 네비게이션 가드는 라우트 이동 전후에 특정 로직을 실행할 수 있는 훅입니다. 주로 아래 같은 상황에서 사용합니다. 로그인 여부 확인 관리자 페이지 접근 제어 페이지 진입 전 데이터 준비 저장하지 않은 폼 이탈 방지 페이지 이동 로그/분석 처리 기본 예제// router/index.tsimport { createRouter, createWebHistory } from 'vue-router'import Home from '../views/Home.vue'import About from '../views/About.vue'import Profile from '../views/Profile.vue'const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, beforeEnter: (to, from, next) => { console.log('About 페이지로 이동 시도') next() }, }, { path: '/profile', name: 'Profile', component: Profile, meta: { requiresAuth: true }, },]const router = createRouter({ history: createWebHistory(), routes,})router.beforeEach((to, from, next) => { const isAuthenticated = localStorage.getItem('token') !== null if (to.meta.requiresAuth && !isAuthenticated) { next({ name: 'Home' }) } else { console.log(`Navigating from ${from.path} to ${to.path}`) next() }})router.beforeResolve(async (to, from, next) => { if (to.meta.requiresData) { try { console.log('Resolving data for', to.path) next() } catch (error) { next(false) } } else { next() }})router.afterEach((to, from) => { console.log(`Navigation completed to ${to.path}`)})export default router 컴포넌트 내부 가드 예제<!-- views/Profile.vue --><template> <div> <h1>Profile Page</h1> </div></template><script>export default { name: 'Profile', beforeRouteEnter(to, from, next) { console.log('Entering Profile component') next((vm) => { vm.loadUserData() }) }, beforeRouteUpdate(to, from, next) { console.log('Updating Profile component') next() }, beforeRouteLeave(to, from, next) { const confirmLeave = window.confirm('정말 페이지를 나가시겠습니까?') if (confirmLeave) { next() } else { next(false) } }, methods: { loadUserData() { console.log('Loading user data') }, },}</script> 전역 가드 beforeEach: 모든 라우트 이동 전에 실행 beforeResolve: 컴포넌트가 렌더링되기 직전에 실행 afterEach: 네비게이션 완료 후 실행