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" ],}
라이브러리 설치npm install vue-router import {createWebHistory, createRouter} from "vue-router";const routes = [ { path: "/", name: "home", component: () => import('../pages/ChatRoom.vue') }]const router = createRouter({ history: createWebHistory(), routes})export default router; import { createApp } from 'vue'import './style.css'import App from './App.vue'import router from "./router/router.ts";createApp(App) .use(router) .mount('#app') <script setup lang="ts"></script><template> <router-view></router-view></template><style scoped>.logo { height: 6em; padding: 1.5em; will-change: filter; transition: filter 300ms;}.logo:hover { filter: drop-shadow(0 0 2em #646cffaa);}.logo.vue:hover { filter: drop-shadow(0 0 2em #42b883aa);}</style> 라우터 이동 router-linkvue 프로젝트내에서 다른 페이지로 이동할때 a 태그를 이용하게 되면 전체 페이지가 리로딩 되게 됩니다. SPA 환경에서는 초기 로딩시 Web 관련 리소스를 다 가져오는데 전체 페이지 리로딩이 발생하면 많은 비효율을 가져오게 됩니다. 다행히 vue-router 가 적용된 프로젝트에서 다른 경로로 이동하고 싶을 경우에는 a 태그 대신 router-link 를 사용하면 화면 리로딩 없이 SPA 내에서 페이지 전환이 이뤄지므로 문제가 발생하지 않습니다.
라이브러리 설치npm install vue -g 프로젝트 생성vue create <생성할 프로젝트 이름> Vue CLI v5.0.8? Please pick a preset: (Use arrow keys)❯ Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features Vue CLI v5.0.8? Please pick a preset: Manually select features? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) ◉ Babel ◉ TypeScript ◯ Progressive Web App (PWA) Support❯◉ Router ◉ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing Vue CLI v5.0.8? Please pick a preset: Manually select features? Check the features needed for your project: Babel, TS, Router, Vuex, Linter? Choose a version of Vue.js that you want to start the project with 3.x? Use class-style component syntax? No? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes? Use history mode for router? (Requires proper server setup for index fallback in production) Yes? Pick a linter / formatter config: Prettier? Pick additional lint features: Lint on save? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files? Save this as a preset for future projects? (y/N) n