VueJS 60

[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] Nuxt3에 pinia(피니아) 적용하기

패키지 설치 yarn, npm 중 본인의 환경에 맞는 걸로 설치한다. yarn add pinia @pinia/nuxt npm install pinia @pinia/nuxt nuxt.config.ts 수정 modules에 설치한 nuxt용 피니아를 적용시킨다. export default defineNuxtConfig({ modules: ['@pinia/nuxt'], }); 이러면 끝이다. nuxt 모듈 패키지라 적용방법이 쉽다. store 디렉터리 및 파일 추가 프로젝트 내부에 store 디렉터리를 추가한다. 그리고 그 안에 테스트를 위해 myStore.ts를 만들고 아래와 같이 소스코드를 작성한다. import { defineStore } from 'pinia'; export const useMyStor..

VueJS/Nuxt 2023.09.08

[VueJS] Nuxt3에서 파이어베이스 사용해보기(+TS)

전에 vite, vue3, typescript와 파이어베이스를 이용해 프로젝트를 만들었었다.(https://minu0807.tistory.com/154) 최근 시간 날 때 nuxt3를 공식문서를 보면서 조금씩 이용해 보다가 vuefire라는 걸 이용해 파이어베이스를 쉽게 사용할 수 있는 것 같아 한 번 사용해보려고 했으나.... 생각보다 불편해서 그냥 firebase 패키지만 사용했다. 정확한 이유는 본문 맨 마지막에 작성... 이 글에서는 파이어베이스-파이어스토어에 있는 데이터를 가져오는 것까지만 작성했다. 본문에서 작업한 프로젝트는 https://minu0807.tistory.com/157 https://minu0807.tistory.com/158 [VueJS] Nuxt3 설치 및 layouts, p..

VueJS/Nuxt 2023.07.02

[VueJS] Nuxt3에 quasar 설치 및 적용(+sass, icon)

넉스트3를 하나하나 알아보기 위해 최근 설치했다. 알아보기 위해 설치했는데 컴포넌트나 디자인 같은 것들을 하나하나 만들기엔 너무 많은 시간이 소요될 것 같아 디자인 프레임워크를 찾아봤다. https://nuxt.com/modules?category=UI Modules · Nuxt Comprehensive UI toolkit for Vue.js and Nuxt.js that empowers you to build amazing user interfaces with ease. With Vunix, you can leverage the power of popular utility-first CSS frameworks like Tailwind CSS, Unocss, WindiCss, or use your own..

VueJS/Nuxt 2023.06.06

[VueJS] Nuxt3 설치 및 layouts, pages 적용(compositionAPI)

프로젝트 설치 npx nuxi init 공식문서에 나와 있는 설치 방법으로 설치를 하면 이렇게 생성이 된다. nuxt2에서는 설치 시 기본적인 디렉터리들을 생성해줬었는데 nuxt3는 없다. 처음 설치하고 봤을 때 조금 당황... 공식문서를 봐보면 layouts 규칙 적용 방법이 여러가지로 보이는데 nuxt2와 같은 형식으로 빠르게 적용 방법만 작성 layouts, pages 디렉터리 생성 먼저 app.vue는 삭제해버린 후 layouts, pages 디렉터리를 추가한다. layouts layouts 디렉터리 안에 기본 레이아웃 용 파일로 default.vue와 테스트를 위해 sub.vue 파일을 생성 후 아래와 같이 소스코드 작성 //default.vue default.vue //sub.vue sub.v..

VueJS/Nuxt 2023.06.04

[VueJS] Vue3 CompositionAPI에서 Props 사용(+TypeScript)

vue3에서 compositionAPI 방식으로 props를 사용하는 방법이 좀 다양하다. 사용할 때마다 자꾸 헷갈려서 작성하게 됐다... 자세한 설명은 공식문서에 있으니 본문 하단에 링크를 첨부하고 종류와 소스로만 간단하게 작성할 생각이다. 첫 번째로 optionsAPI방식과 유사한 방식으로 이런 방법이 있다. defineProps의 경우 defineEmits와 같이 별도로 Import 할 필요 없고 바로 사용이 가능하다. 두 번째 방법으로는 순수 타입으로 props를 정의하는 방법으로 좀 더 간결하게 작성이 가능하다. 세 번째로는 interface를 이용한 props 정의하는 방법이다. 하지만 첫 번째 방법을 쓰기엔 compositionsAPI를 쓰는 것 같지도 않고, 타입스크립트를 쓰는 것 같지 않..

VueJS 2023.03.02

[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] vue-timeago3 typescript 환경에서 사용하기

vue-timeago3는 현재 타입스크립트를 사용할 수 있도록 처리되어 있지 않다. 이전 글에서 작성한 방법대로 import 후 사용해도 아마 되긴 할 텐데, 선언한 곳에 빨간 줄이 생기고 확인해보면 아래 사진과 같은 문구를 확인할 수 있을 것이다. 그래서 npm run dev로 실행은 되지만 빌드는 되지 않는다. 해결 방법은 위 문구에서 마지막 문장을 해주면 된다. declare module 'vue-timeago3'; 을(를) 포함하는 새 선언 (.d.ts) 파일 추가 먼저 프로젝트 최상위 위치에 @types 디렉터리를 생성한다. 그리고 그 안에 선언 파일을 추가할 모듈명과 똑같은 디렉터리를 생성하고 index.d.ts 파일을 생성한다. 모듈명이 vue-timeago3 였기 때문에 똑같이 만들어 준다..

VueJS 2022.12.25

[VueJS] Vue3 vue-timeago3 사용해보기

글 예시로 작성한 소스 및 프로젝트는 Vite, Vue3와 디자인 프레임워크 퀘이사를 사용하였습니다. 먼저 예제 화면 각 이미지 하단 캡션 글자가 vue-timeago3를 이용해 보여주었다. 사용방법은 매우 간단하다. # 모듈 설치 npm i vue-timeago # 한글 표시를 위한 모듈 설치 npm i date-fns 먼저 이렇게 2개를 설치. main.js를 열어서 아래 소스를 추가한다. import timeago from 'vue-timeago3'; app.use(timeago); 이러면 준비가 끝난다. 사용하고자 하는 컴포넌트를 열어서 코드를 작성 이게 끝이다. 데이터의 날짜도 new Date()를 이용해 값을 셋팅해도 되고, 위 소스에서 aDay2~6처럼 string으로 그냥 타이핑해도 된다...

VueJS 2022.12.24