진스

출처 vue-cookies 사용법 vue-cookies 사용법 kyounghwan01.github.io 웹 개발자라면 필수로 알아야 하는 가장 기본 쿠키 사용법 입니다. 쿠키는 잘 아시다시피 사용자의 브라우저에 저장되고 서버에는 저장되지 않습니다. 그렇기 때문에 보안에 관련된 정보는 절대 넣으시면 안됩니다.(ex - 비밀번호) 저의 경우 브라우저에 뜨는 공지에 일주일간 안보기 선택한 경우 브라우저에서 쿠키를 만료일 7일 짜리로 설정하고 쿠키 만료시 다시 공지를 띄우는 형식으로 쿠키를 활용하였습니다. 자, 그렇다면 vue에서는 쿠키를 어떻게 사용하는지 알아보겠습니다. 1.npm install vue-cookies vue-cooke랑 vue-cookies가 있는데, 후자가 더 다운로드 수가 더 높고 read..

출처 vue slot 사용법 vue slot 사용법 kyounghwan01.github.io slot은 부모 컴포넌트에서 자식 컴포넌트의 엘리먼트를 지정할때 사용합니다. 부모에 따라서 자식의 컴포넌트에 영향을 받을 테니, 컴포넌트 재사용성면에서 좋은 장점을 가집니다. 또한 범위 있는 slot을 통해 컴포넌트 내에서도 잘게 쪼개서 재사용이 가능합니다. 예제를 통해서 어떻게 사용되는지 살펴보고 각자의 상황에 맞게 가져가시길 바랍니다. v-slot 간단하게 named-slot + slot-scope입니다 다른점은 slot을 v-slot을 사용할 때, 무조건 template 태그로 감싸고 그 컴포넌트 안에서 v-slot를 사용해야 합니다. 위 예제에서 v-slot으로 변형하면 아래와 같습니다. 기본 이름 있는 ..

출처 Vue - 메모리 낭비 최소화하기 Vue - 메모리 낭비 최소화하기 kyounghwan01.github.io Virtual scroll 기법 스크롤된 위치를 계산하여 그 위치에 해당하는 DOM만 그려주는 원리입니다. 또 다른 방식으로는 인피니티 스크롤을 구현하는 방법도 있지만, 밑으로 내려가면 상위 데이터는 계속 남아있는 것이니 결론적으로는 스크롤 위치에 해당하는 dom만 그리는 것이 더 좋은 방법입니다. v-once v-once는 첫 렌더링 이후 이 값이 변하지 않아도 된다고 확인할 때, 사용합니다. 요소와 구성 요소를 한 번만 렌더링합니다. 이후에 다시 렌더링 할 때 요소 / 구성 요소 및 모든 하위 요소는 정적 콘텐츠로 처리되고 건너 뜁니다. 업데이트 성능을 최적화하는 데 사용할 수 있습니다...

출처 Vue - 가장 쉽고 빠르게 Input 한글 입력 막기 Vue - 가장 쉽고 빠르게 Input 한글 입력 막기 kyounghwan01.github.io input 태그의 :value를 핸들링하여 쉽게 한글 입력을 막아봅시다 대부분의 경우 Input의 경우 공통 컴포넌트로 받아 여러곳에서 사용하니 이번 예제도 단순히 input 만으로 끝나는게 아닌 부모, 자식 관계로 보여 드리겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 export default { data() { return { current_password: "" }; } }; cs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ..

출처 vue - mapGetters 사용법 vue - mapGetters 사용법 kyounghwan01.github.io 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import { mapGetters } from 'vuex' @Component{ computed: { ...mapGetters([ '가져올getters값' ]) } } // this.가져올getters값 으로 접근가능 // 또는 ...mapGetters({ // this.doneCount를 store.getters.doneTodosCount에 매핑하십시오. doneCount: 'doneTodosCount' }) Colored by Color Scripter cs

출처 vue @focus, @blur 예제 vue @focus, @blur 예제 kyounghwan01.github.io Vue.js의 이벤트 사용 방법 정리 Vue.js에서 이벤트를 다루는 방법에 대해서 간단히 정리하려고 합니다. HTML에는 나 처럼 당연히 알고 있는 기본 이벤트가 있습니다. 그리고 이미 javascript 를 통해서 기본 이벤트와 어우러지게 사 ux.stories.pe.kr 이벤트 구현 Vue.js에서 이벤트를 구현하는 방법인 v-on 디렉티브를 이용합니다. v-on은 줄여서 @로 대체할 수 있습니다. 이벤트명설명 click 마우스를 클릭했을 때 실행함 dblclick 마우스를 더블 클릭했을 때 실행함 mouseover 마우스의 포인트가 요소 위로 올라왔을 때 실행함 mouseout..

출처 vue 이벤트 수식어, computed, watch vue 이벤트 수식어, computed, watch kyounghwan01.github.io 아래와 같은 코드에서 div를 클릭 할 경우 이벤트 버블링에 의해 div3을 누르면 div3 -> div2 -> div1 순으로 호출되며, 함수 역시 func3 -> func2 -> func1 순으로 호출된다. 많은 경우에 div3을 누르면 func3만 실행되게 하고 싶은 상황이 있다. div1 div2 div3 .stop div1 div2 div3 stop은 클릭 이벤트 전파가 중단됩니다. 위의 예제로 보면 div3를 클릭한 경우 func3가 작동하고, 이벤트 버블링에 따라 func2가 작동합니다. 이후 stop의 영향을 받아 func1는 작동하지 않습니..

출처 vue 파일 전역으로 관리하기, computed, watch vue 파일 전역으로 관리하기, computed, watch kyounghwan01.github.io 1. vue-cli를 통해 프로젝트를 만들어 줍니다. 1 2 3 4 5 6 $ npm i -g @vue/cli $ vue create //저는 기본 default 를 선택했습니다 cd yarn serve //정상적으로 프로젝트 실행됨 cs 2. src 밖에서 webpack 설정 파일을 작성합니다. Vue-cli 2에서는 webpack.config.js 라는 파일이 루트에 있었으나 3부터는 해당 파일이 없기 때문에 루트 디렉토리에 vue.config.js 라는 파일을 만들고 아래 코드를 넣어줍니다. src 밖 에서 만들어야합니다. 1 2 3..