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..

이 글은 주 단위로 하던 스터디 를 개인적으로 정리하는 글입니다. 7장 7장에는 실질적인 Vue 프로젝트를 초기 세팅해가는 부분들이었다. 대략적으로만 알면 좋을 것 같다. 회사에서 실질적인 프로젝트를 진행하게되면 초기단계부터 구성하는 경우는 잘 없고 대부분 어느정도 틀이 잡혀있는 상태에서 투입되는 경우가 많기 때문이다. (물론 구조가 어떻게 되어있고 대략적인 지식은 필요하다) 단일 컴포넌트를 사용한 Vue 세팅 및 설정 도구에 대한 설명. 첫번째로는 npm vue/cli create를 수행하여 프로젝트를 생성하는걸 설명하고 있지만.. 현재는 더 빠르게 수행가능한 vite기반의 create-vue를 사용하는 경우가 많다고 함. 만약 Vite를 사용한다고 하면 2가지 방법이 있는데… 첫번째는 직접 설정하는것..

최근 신규서버를 새로 세팅하면서 DB서버 의 경우 데이터는 대부분 안가져오지만 형태는 그대로 사용해야 했기에 신규 서버세팅을 하면서 스키마와 기타 트리거, 펑션, 프로시저, 뷰 등 껍데기만이라도 다 가져오면서 utf8mb3에서 utf8mb4로 변경하여 적용해야했다. 기본파일의 경우 MariaDB 공식 홈페이지에서 다운로드 받았다. mariadb-10.6.14-linux-systemd-x86_64.tar.gz 다운로드 주소 https://mariadb.org/download/?t=mariadb&o=true&p=mariadb&r=10.6.14 Download MariaDB Server - MariaDB.org REST API Release Schedule Reporting Bugs … Continue rea..

이 글은 주 단위로 하던 스터디를 개인적으로 정리하는 글입니다. 이전글에서 5장까지 작성했는데 6장에는 그냥 CSS를 어떤방식으로 사용 할 수 있는지에 대한 설명이 대부분 이였다. 특정 변수값을 v-bind중 하나인 style에 넣어서 적용 시킬수도 있고 class에 추가 할 수도 있고 다양한 형태를 지원한다. 스타일(css) 적용에 대한 내용이다. css의 적용은 기본적으로 동일하다. 요소의 기본 스타일 —> class로 명명된 순서에 따른 스타일적용 —> 인라인 스타일 적용. ex) .test와 .over라는 클래스를 각각 명시했고 동일한 부분이 존재한다면 마지막에 명시한 스타일을 따라간다. 기본적으로 Vue에서도 인라인 스타일을 권장하지는 않는다. 그래도 사용해야하는 경우가 있다면 data 영역에 ..