Vite 6

[VueJS] vite로 만든 vue프로젝트 GitHub Pages에 올리기

https://minu0807.tistory.com/154 [토이프로젝트] PUBG your.stat 길고 긴 작업 끝에 드디어 끝났다. 완벽하게 끝낸 건 아니지만 너무 오랜 시간 작업을 했고, 다른 하고 싶은 것들을 계속 못하고 있어서 이 정도로 마무리하기로 했다. 해결할 수 없어 포기한 부 minu0807.tistory.com 여기서 만들었던 토이 프로젝트를 다른 곳에서 무료로 배포한 상태에서 방치를 하고 있었다. 최근 확인할 게 있어서 접속을 해보니 꺼져있길래 다시 배포하려고 하니 안 되는 상황이 발생했다. 처음 저 프로젝트를 마무리하고 깃허브에서 제공하는 pages에 배포를 해보려다가 봐도 이해가 잘 안 돼서 안 하고 있다가 오늘 적용시켰다. 1. 배포종류 먼저 레파지토리의 프로젝트를 pages ..

VueJS/Vite 2023.12.31

[토이프로젝트] PUBG your.stat

길고 긴 작업 끝에 드디어 끝났다. 완벽하게 끝낸 건 아니지만 너무 오랜 시간 작업을 했고, 다른 하고 싶은 것들을 계속 못하고 있어서 이 정도로 마무리하기로 했다. 해결할 수 없어 포기한 부분도 있고, 해결하는 데 애먹은 부분들도 있고, 처음 사용해 보는 타입스크립트와 정보가 부족해 공식문서에 최대한 의지한 파이어베이스, PUBG API 그리고 vue3 플러그 인들을 쓰면서 많은 경험을 한 것 같아 만들면서 많은 도움이 된 것 같다. 이 프로젝트를 만든 이유와, 개발환경, 기술 스택, 구현된 화면 캡쳐 및 설명, 배포된 사이트 주소 등의 내용은 아래 깃허브 README에 모두 작성해 두었다. https://github.com/smw0807/pubg_your.stat GitHub - smw0807/pub..

ETC 2023.03.24

[VueJS] Vite에 NuxtJS의 layouts, pages 규칙 적용해보기

Nuxt를 사용하면서 제공되는 기능들 중에 마음에 들었던 기능은 layouts와 pages 디렉터리의 기능이었다. pages안에 생성된 디렉터리와 파일명에 맞춰 자동으로 라우트 경로를 만들어 줘서 편리했고, 각 페이지 파일마다 보여줄 레이아웃을 지정해 줘서 기본 화면들에선 메뉴가 보이다 특정화면에선 메뉴가 없는 다른 레이아웃을 보여줄 수 있어 편리했다. pages의 자동 라우트 경로 생성 기능은 사람마다 호불호는 좀 있는 것 같았다. 위 예시로 pages/vuetify/vuetify1.vue가 http://localhost:5000/vuetify/vuetify1로 자동으로 페이지 경로가 생성된다. 그리고 pages/login.vue의 경우는 layouts의 login.vue 파일로 레이아웃을 잡아놔서 로..

VueJS/Vite 2023.02.06

[VueJS] Vite+Vue3 JWT기능 구현하기

가장 기본적인 기능이면서 구현하기 까다로운 로그인 기능... vue2 기반의 vue-cli와 nuxt도 jwt 기능을 활용한 로그인 기능에 대한 글을 작성했었는데 솔직히 너무 초반에 공부하면서 만들어본 거라 내용 자체가 마음에 들지 않았다. (글을 다시 쓰고 싶지만 귀찮아서 못하고있다.) 최근 vite+vue3로 vue3에 대해 조금씩 접해보다 jwt를 이용한 로그인 기능을 구현해보자 해서 만들어봤다. 토큰을 발급, 검증하는 백엔드 부분은 다루지 않고 웹단만 작성했습니다. 우선 프로젝트에 axios, vue-router, vuex가 모두 세팅되었다는 가정하에 시작합니다. 그리고 디자인 프레임워크로 퀘이사를 사용했습니다. 추가적으로 설치가 필요한 건 vue3-cookies 이걸 설치해야 합니다. npm i..

VueJS/Vite 2022.04.25

[VueJS] vite에 axios, interceptors 적용하기

적용하는 방법은 vue-cli에서 했던 방법과 유사했던 것 같다. 먼저 axios 설치 npm install axios vite.config.js에 proxy 설정 import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' import { quasar, transformAssetUrls } from '@quasar/vite-plugin' export default ({mode}) => { process.env = {...process.env, ...loadEnv(mode, process.cwd())}; return defineConfig({ server: { proxy: { '/api': process.env.VITE..

VueJS/Vite 2022.03.03

[VueJS] Vite에서 env 사용하기

2023-01-23 내용추가 최근 vite 4.0.0 버전으로 작업한게 있었는데 아래 글 본문 처럼 별도의 작업 없이 바로 .env 파일이 읽어지는게 확인 됐다. .env 파일안에 VITE_ 형식의 값을 넣으면 바로 import.meta.env로 불러올 수 있다. 혹시 몰라서 vite 3.1.0 버전의 프로젝트에서도 아래 작업을 지우고 해봤는데 정상적으로 불러와지는게 확인 됐다. 2023-02-06 내용추가 오늘 블로그 글 작성을 위해 vite 3.2.3버전의 프로젝트를 생성해서 확인해봤는데 별도의 작업없이 .env를 읽어지는게 확인됨 Vue2와 vue2 기반의 NuxtJS만 오랜 시간 사용을 하다 보니 vue3를 제대로 접해본 적이 없어 요즘 조금씩 알아보고 있다. 이번에는 웹프레임워크도 nuxt 말고..

VueJS/Vite 2022.02.19