너와 나의 프로그래밍

평소에 Vue.js로 개발을 하면서 ElementUI를 주로 사용했었지만, 이번에는 Vuetify를 사용해보고 싶어서 Vuetify Third Party Libaray를 사용하는 도중 정말 황당한 경험을 겪었다. (모듈 추가 후 바로 우측에 원치 않은 스크롤이 생김;;) 전혀 원하지도 않는 페이지에 알 수 없는 스크롤이 생겨버려서 도저히 어느쪽에서 해결을 해야할 지 모르는 상황에 알고보니 HTML Style에 'overflow-y: scroll'이 적용되어 있었다. (기존에 없었던 HTML Tag CSS에 'overflow-y:scroll'이 생김) 이 문제는 예전부터 있었던 Vuetify의 대한 이슈라고 한다. 이 이슈를 해결하기 위해서는 HTML Tag에 강제적으로 'overflow-y: auto !..

Vue.js는 컴포넌트 끼리의 데이터 통신이 가능하다. 보통은 Vuex를 써서 좀 더 효율적으로 상태 관리를 하거나 데이터를 담아 구조적으로 통신을 하나 순수 Vue에서의 Method를 통해 데이터 통신을 할 수 있다. 부모 컴포넌트에서 자식 컴포넌트로 통신 가장 기본적인 단방향 통신 방법으로 'props'와 '사용자 정의 이벤트'를 사용해서 통신을 한다. 부모 컴포넌트는 사용자 지정한 속성으로 값을 보내고 자식 컴포넌트는 부모에서 지정한 속성을 'props'로 받아온다. 간단한 Props를 넘겨주는 예제로 알아본다. (부모 컴포넌트) 먼저 부모 컴포넌트에서 생성한 HelloWorld 컴포넌트에 msg 라는 사용자 정의 속성을 넣고 메세지를 넣는다. (자식 컴포넌트) 자식 컴포넌트에서 props 속성으로..

Vue.js의 '꽃'인 이벤트 핸들링의 대해서 알아보려고 한다. 기존의 Javascript의 'addEventListener' 메서드나 Jquery에서 사용하는 '.on' 메서드 같이 이벤트를 연결하여 사용하는 기능을 DOM Element의 속성안에서 사용할 수 있다. Vue.js의 이벤트 핸들링은 첫 문자가 'v-on' 디렉티브나 '@' 2가지만 사용해서 이벤트 핸들링을 한다. 딱 2가지만 기억하면 쉽게 핸들링을 할 수 있으니 기억하자! 메서드 이벤트 핸들링 메서드 이벤트 핸들링(Method Event Handling)은 컴포넌트의 Method 옵션에 정의되어 있는 메서드 이름을 지정하면 된다. /* testClick이라는 Function을 실행하는 방법. 둘다 동작은 같다. */ 클릭 클릭 위 예제는..

프로그래밍에서 항상 나오는 단골이 for문이 아닐까 싶다. Vue.js에서도 우리가 생각하는 for문을 사용할 수 있다. 하지만 우리가 생각하는 for문과는 조금 다르게 Vue.js에서 사용하는 「v-for」문은 Rendering을 하거나 DOM에서 데이터를 처리할 때도 사용한다. 간단하게 반복적인 DOM을 생성할 수 있어서 Vue.js에서는 꼭 사용되는 디렉티브 중에 하나다. 그리고 v-for를 사용할 때의 중요한 부분은 배열의 대한 유니크한 「key」값을 꼭 설정해 줘야 한다. v-for문의 종류 기본적인 v-for문 Index를 활용한 v-for문(배열) 객체와 Key, Index를 활용한 v-for문(객체만 사용) 리터럴에 직접 적용하는 v-for문 참고 1 : https://kr.vuejs.or..

본론부터 말하면 v-show와 v-if의 가장 큰 차이점은 v-if는 주석 v-show는 display:none으로 처리 된다는 게 가장 큰 차이점이다. v-show와 v-if의 차이는 구현 된 결과물의 따라 '개발자 도구'를 통해 DOM Node의 Element 변화를 확인 할 수 있다. 가끔 어떨때 v-show를 사용해야 하고 어떨때 v-if를 사용하여 분기처리를 해야하는 지 헷갈릴때가 간혹 있다. 그렇다면 둘 다 '안보이게' 처리를 하고 싶은건 맞지만 어떨때 적절한 처리를 하는 것이 좋을까?? (구글에 v-show와 v-if의 코드 정리의 대해 너무 자세하게 설명 되어 있는 것들이 많아 이번에는 예제 코드를 따로 작성하지는 않았다...) v-if(v-else-if, v-else) v-if는 우리가 ..

자바스크립트라면 Element에 addClass나 setAttribute를 줘서 Class Attribute를 Control 할 수 있는 쉬운 방법이 있지만 Vue나 React 같은 경우에는 DOM에 직접적으로 접근하는걸 지양하지 않는 탓에 script 처리를 통해 Attribute를 넣는 다는 것이 참 어렵게 느껴진다. 마침 회사에서 개발 도중 이러한 기능을 처리하는 도중에 아주 괜찮은 예제가 있어서 가져와 보았다. 위 예제는 Element를 클릭하면 background가 Yellow로 바뀌는 예제다. Background로 설정할 부분에 :class 디렉티브를 쓰고 item.id와 selected로 같으면 class를 적용하는 코드다. 클릭은 @click 디렉티브로 클릭이벤트를 받고 seleted를 i..