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는 비동기적 컴포넌트의 로딩이 완료될 때까지 대체 컴포넌트를 그리는 방법을 제시한다. 하지만 아..

Vue에서 router로 페이지 이동 시 띡띡 바뀌는게 아니라 스무스 하게 변경되는 효과를 적용시켜주는 기능이다. router로 페이지 이동시 페이지 이동효과를 줄 수 있음.(부드러운 이동 느낌) app.vue와 defaultLayout 2개에 적용시킴. 각각 페이지 이동과 body영역을 재 랜더링 했을때 부드럽게 이동되는 느낌이 나도록 함. name에 명시된 이름과 아래 class명이 맞아야함. 사용예시 및 출처주소 Transition | Vue.js 추가 수정사항 기존에는 router-view를 transition이 감싸게 했었는데 warning이 console에 찍혔다. 트랜지션 안에 명시하지 말라는 거였다. can no longer be used directly inside .... 다음과 같이 ..

인터넷에 검색해보면 여러가지 글이 많이 나오고, 결론적으로 상위로부터 전달 받은 props들을 사용 할 때 보통의 경우 export default를 명시하여주고 어떤 내보내는지 이런거에 대한 명시가 필요한데 그 부분들을 편하게 사용 할 수 있도록 줄인것 같다. 간단하게 전달받은 props를 사용하는 모습만 봐도 편리함이나 구분에서 차이가 보여진다. 기존 export default를 사용하는 경우 export default { props:{ userInfo: { type:Object } } } scrpit setup 내부에서 사용 하는 경우 import {defineProps} from "vue"; const props = defineProps({ userInfo: { type: Object } }); 참..

이 글은 주 단위로 하던 스터디 를 개인적으로 정리하는 글입니다. 9장 Composition API 에 대해서 설명하는것으로 시작한다. 기존에는 options API 형식으로 사용하던걸 Vue3버전에서 부터 Composition API 방식으로 변경하여 적용이 가능하다. Composition API 를 사용할때의 장점은 구분이 명확하게 이뤄질 수 있다는 점이다.(data, method, onMounted 등등을 사용할 때 조금 더 직관적임.) ref와 reactive를 사용한 state관리에 대해서 말한다. ref를 사용하는경우 state에 직접 접근하지 못하고 .value를 호출하여 값을 가져와야한다. Vue에서는 상태변화를 감지하기 위해 프록시 형태로 감싸게되는데 이 부분때문인듯 하다. Composi..