VueJS/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

[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] Firebase 구글 로그인(Vite, Vue3, TS)

1. 파이어베이스 프로젝트 생성 https://console.firebase.google.com/u/0/?hl=ko 로그인 - Google 계정 이메일 또는 휴대전화 accounts.google.com 여기에 접속해서 사용할 프로젝트를 추가한다. 여기까지 다 되면 사용준비는 거의 다 끝이다. 2. 파이어베이스 프로젝트 설정 위 생성이 끝나면 메인화면에 아래와 같이 5개의 아이콘이 있다. 우선 웹만 사용할거라 아이콘 5개 중 3번째 아이콘 웹을 선택한다. 앱 닉네임을 입력한다. 난 그냥 프로젝트와 동일한 이름으로 입력했고, 호스팅 설정은 체크하지 않았다. 앱 등록 버튼을 클릭하면 아래와 같이 출력된다. npm과 script로 사용할 때 사용할 수 있는 방법을 알려준다. 여기선 npm으로 사용해서 만들 예정..

VueJS/Vite 2023.01.24

[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