VUE

개요vue 에서 쉽게 세션을 저장하고 가져오는 라이브러리인 vue-sessionstorage를 사용하였는데 구동방식을 보니 초기 진입시 sessionKey라는 난수를 설정하고 해당 난수로 data 들을 오브젝트 형태로 저장하는 구조였다. 하지만 가끔 sessionKey 값을 초기에 세팅하지 않는 오류가 발생하여 해당 세션 data에 정상적으로 접근을 못하여 라이브러리를 걷어내고 web에서 자체 지원하는 web api 를 사용해 비슷한 구조를 만들기로 했다.전역함수로 만들 js 파일 만들기// session.jsexport default { install(Vue) { Vue.prototype.$sessionSet = (key, value) => { const payload..

Vuex란?Vue.js 안에서 상태 관리 패턴을 지원하는 라이브러리모든 컴포넌트들이 공유 할 수 있는 집중화된 상태 정보 저장소 역할공유하는 상태 데이터는 전역에서 저장소 객체를 통해 관리상위 컴포넌트에서 하위 컴포넌트에 전달하기 위한 props drilling 방지Vuex 사용법// store.jsimport Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);const store = new Vuex.Store({ state: { count: 0, userName: "" }, // 동기적 로직을 정의 mutations: { addCounter(state, count) { ..

transition 이란? transition은 애플리케이션 내에서 요소 추가, 업데이트, 제거될 때 애니메이션 효과를 적용하기 위한 기능 css, javascript transition 을 모두 지원 transition 속성 name: 트랜지션 이름 appear: 초기 렌더링 시에도 트랜지션을 적용할지 여부 appear-class: 초기 렌더링 시 트랜지션을 적용할 때 적용할 클래스 enter-class: 추가될 요소에 적용될 클래스 enter-active-class: 추가될 요소가 애니메이션을 수행하는 동안 적용될 클래스 enter-to-class: 추가될 요소가 애니메이션을 완료한 후 적용될 클래스 leave-class: 제거될 요소에 적용될 클래스 leave-active-class: 제거될 요소가..

$emit 이벤트 내보내기 하위 컴포넌트에서 상위 컴포넌트로 데이터 전달 또는 트리거 목적으로 이벤트를 내보낼 수 있다 // Child.vue // parent.vue 이런식으로 하위(자식) 컴포넌트에서 발생시킨 이벤트를 상위(부모)컴포넌트로 호출을 할 수 있다. 추가적으로 파라미터도 같이 담아서 이벤트를 발생 시킬 수 있다. // Child.vue // parent.vue props 하위 컴포넌트에서 상위 컴포넌트에게서 받아 올 데이터를 선언하면 해당 데이터를 가져 올 수 있다. // parent.vue // Child.vue {{ name }} // minki {{ height }} // 175 export default { props : { name : { type : String, // 속성 타입..

vue 를 사용하다보면 같은 컴포넌트 안에서 기획의도나 특정상황에 대하여 조건에 따라 해당 엘리먼트가 보이고 안보이는 상황이 생긴다 v-if 와 v-show 의 차이점은 v-show 는 항상 렌더링 되어 있고 dom에 남아있다. display : none 같은 결과 v-if 기본 사용법 HI~ Bye v-if 데이터 값에 따른 조건부 렌더링 Hi export default{ data(){ return { isShowElement : true } } } v-else-if, v-else : v-if에 대한 else 블록을 나타낼수도 있다 Hi Bye Hi Bye see You export default{ data(){ return { isShowElement : true, elementId : "sayHi"..

v-bind는 : 약어로 사용 가능 예시 v-bind:class :class 동일한 의미 class 바인딩 // 삼항 연산자로 class 바인딩 가능 export default{ name : "test", data(){ return { activeClass : "active", isAcitve : true, } } }style 바인딩 export default{ name : "test", data(){ return { activeColor : "blue", fontSize : "30px", styleObject : { color : "red", fontSize : "20px" }, isActive : true } } }