주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

e.target.dataset과 jQuery의 .data()의 결과 값이 다르다? 어떻게 된일인지 파악해보자. 환경정보 -jQuery : https://code.jquery.com/jquery-3.3.1.min.js 요구사항 data-lang 속성의 값이 'ko'인 타겟을 클릭하면 data-lang 값이 en으로 변경된다. 이 때 변경된 data-lang의 값을 타겟 재 클릭 시 가져오기 이슈사항 vue.js 를 사용하여 동적으로 리스트 생성했고, 동적으로 생성하는 타겟을 클릭 -> 동적으로 타겟의 값이 수정됨 -> 타겟을 재 클릭 시 결과 값이 e.target.dataset과 .data();의 값이 상이함. e.target.dataset의 경우 내가 의도한대로 수정된 결과 값을 리턴한다. 하지만 $(e..

더보기 버튼을 생성하여 버튼 클릭 시에 ajax 통신을 해보겠습니다. 더보기 버튼을 생성해줍니다. App.vue 그 다음 더보기 이벤트에 실행될 함수를 만들어주고 ajax 통신을 위해 axios를 install 해줍니다. npm install axios install이 끝나면 가져올 데이터가 담긴 json 파일을 만들어 줍니다. ajax를 통해 방금 만든 json 내용을 가져와보도록 하겠습니다. App.vue axios를 사용해 이벤트를 생성한 후에 버튼에 바인딩 해줍니다. axios에서 get가져온다 moreData.json을 then끝나면 moreData가 들어오고 그것을 this.postData 배열리스트에 push해준다. 아까 unshift는 상단에 리스트를 추가해주고 push는 하단에 리스트를 ..

에 대해 배워보겠습니다. 저는 강의를 들으면서 slot에 대해 처음알게되었습니다. slots는 하위컴포넌트에게 HTML, Component를 전달 할 수 있다고합니다. 그리고 을 사용하는 이유는 props 정의안하고 parent에서 child로 데이터를 간단히 표현할 때 사용한다고 합니다. 컴포넌트를 사용할때 로 사용하고는 했는데, 가끔 강의를 보면 로 사용하고는 하는 사람들을 봤습니다. 은 여닫는 함수가 모두 존재할 때에만 사용할 수 있다고 합니다. 문법 child parent 여기에 HTML을 넣으면 slot 안에 표현된다 을 vue파일에 추가합니다. App.vue App.vue 파일에서 태그 사이에 타이틀을 삽입해보겠습니다. Editor.vue 을 사용해줍니다. 아래와 같이 확인이 됩니다. 정상적으..

EventBus에 대해 알아보겠습니다. EventBus는 컴포넌트간의 통신을 쉽게해준다고 합니다. 물론 child-parent 까지의 간단한 컴포넌트라면 사용안해도 props를 통해 통신을 할 수 있습니다. 하지만 복잡해진 트리 체계를 갖게된다면? EventBus를 사용해서 처리하는 방식을 알아보겠습니다. EventBus.js 파일을 생성해줍니다. 그리고 EventBus.js에 내용을 작성해 줍니다. import Vue from 'vue'; export default new Vue() 이것으로 EventBus.js 내부 작성은 끝입니다. 이것을 기존 프로젝트에서 import해서 사용하면됩니다. 예제를 하기위해서 기존 프로젝트에 parent-child 구조의 컴포넌트 하나를 추가하겠습니다. 아래 영역을 C..