vite 사용시 좋은점 개발중엔 ES Import를 직접지원 하고, 브라우저에서 이용하여 favicon.ico 가 명시된 부분도 변경해라. 기존에는 public 폴더 내부에 존재하던 index.html파일을 외부로 꺼내라. import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { fileURLToPath } from 'url'; import path from 'path'; const filename = fileURLToPath(import.meta.url); const pathSegments = path.dirname(filename); export default defineConfig({ plugins: [vu..

상태관리 라이브러리의 경우 Vuex와 Pinia가 있다. 2개를 비교하는 글의 경우 인터넷에 많이 있기 때문에 검색을 추천한다. 간단한 설명으로는 pinia가 이후에 나온 것이므로 조금 더 직관적이고 Vue3에서 주로 사용하는 Composition API를 기준으로 동작한다는 것이다. 그리고 다중 store를 지원한다. 타입스크립트 지원. Composition API 지원. (Vue3 기준 common) 등이 있다. 설치 npm install pinia 현재프로젝트기준 "pinia": "^2.1.7", 이 설치됨 main.js 에 추가 적용 import { createPinia } from 'pinia'; const pinia = createPinia(); createApp(App).use(pinia)...

많은 화두가 되는 2개가 있다. 바로 Vuex와 Pinia이다. 여러 블로그 들에서 이미 비교를 잘 해둔게 있었고 개인적인 생각을 정리하기 위해서 그냥 작성한 글입니다. Vue 상태관리 라이브러리이고 Vue 2버전대에선 Vuex가 주로 사용되었고 Vue3버전에서는 Pinia를 주로 사용하는 것 같다. 간단하게 차이점을 말하자면 Pinia에서는 composition api와 option 둘다 지원하는데 반해 Vuex는 option형태만 지원하는듯 하다. 또한 state값을 변경하기 위해서는 Vuex에선 mutation이라고 따로 명시하는 곳이 있고 거기서만 변경이 가능한데 Pinia에서는 action에서 바로 state를 변경 할 수 있다.Vuex에서 별도로 분할되어 있는 영역 1개를 줄여버린것이다. (사..

Vue를 제대로 사용하기전에 Vue에서사용하는 개념인 EventBus와 상태관리 개념인 Vuex(또는 pinia)의 차이점에 대해서 알아 보고자 한다. 두 방식의 공통점은 별도의 위치에서 상태를 관리하므로 비 부모-자식 간 컴포넌트 통신이 가능하다. 대부분의 사람들은 다음과 같이 설명한다. 애플리케이션의 크기가 크면 Vuex를 사용하고 규모가 작으면 Event Bus를 사용하는 것이 좋다. 아래 사이트에서는 무조건 Vuex를 사용하자. 라고 설명한다. 이유는 현재 Vue-CLI를 통한 설치나 각종 설치시 Vuex를 사용하기 위해선 따로 설정들이 필요했으나. 현재는 많은부분이 지원되어 편리하게 사용이 가능하다고 한다. Vue사이트에서 제공하는 스타일 가이드에서도 실질적으로는 Vuex나 기타 상태관리 툴을 ..

추후 관리하는데 필요할것 같아서 Vue 프로젝트 초기설정을 진행하면서 환경변수를 분리하여 사용하고자 했다. 실행시 port를 지정하고 local dev real일때 각각 다른 포트로 수행되도록 스크립트에 넣었다. 그리고 .env파일을 총 4개로 분리하였다. .env .env.local .env.dev .env.real 로 분리하고 스프링 부트 처럼 공통 설정의 경우 application.yml를 사용하듯이 .env파일에 놔두면 적용이 된다. "scripts": { "local": "vue-cli-service serve --port 3000 --mode local", "dev": "vue-cli-service serve --port 3000 --mode dev", "real": "vue-cli-servi..

Vue3에서 제공하는 기능인데 컴포넌트에서 비동기 요청 시 데이터가 다 받아와진후 화면을 보여지고 싶을때 Suspense 를 사용하여 감싸주면 데이터요청시 특정 컴포넌트 or 화면을 보여지게 할 수 있는듯 하다. (데이터 로딩화면 처럼) 참고주소 Vue 3의 새로운 기능 - Suspense Vue 3의 새로운 기능 - Suspense Vue 3의 새로운 기능 - Suspense k1005.github.io 그러나 다른블로그에서는 다음과 같이 말 하기도 한다. 컴포넌트가 데이터를 받아오기 전까지 기본 컨텐츠를 표시할 수 있는 기능으로 2에서는 v-if, v-show를 사용해서 구현해야했다. 하지만 Suspense는 비동기적 컴포넌트의 로딩이 완료될 때까지 대체 컴포넌트를 그리는 방법을 제시한다. 하지만 아..