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

gulp 이해를 돕는데 가장 많이 도움을 받은 블로그입니다. 단계씩 작성해주신 글만 따라가도 잘 할 수 있습니다. 다만, 예제를 따라하면서 자세하지 않았거나 몰랐던 부분 같은 것을 기억하기 위해 글을 씁니다. (도움을 받은 블로그에서는 약간의 지식이 깔려있어야한 듯 싶습니다.) https://valuefactory.tistory.com/314 = https://programmingsummaries.tistory.com/393 gulp란? gulp시작하기 gulp 시작하기 gulp.js을 시작하기 위해 필요한 가장 기본적인 사용 방법들을 정리했습니다. gulp 개념 gulp 는 node.js 기반의 task runner 입니다. 반복적인 귀찮은 작업들이나 프론트엔드 빌드에 필요한 작업들.. valuefac..

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

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

기존의 3차에서 썼던 소스를 활용해서 계속 수업을 진행했습니다. 잘 있나 npm run serve를 한 번 해보고 시작합니다. 잘있으면 일단 첫번째로는 인스타에 올릴 때 필터효과를 사용해보도록 하겠습니다. cssgram 을 사용할 것인데요, 전 처음 알았어요 https://una.im/CSSgram/ CSSGram What is This? For more background on CSS Image Effects, you can check out my blog series here, or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters. Simply put, CSSgram is a library for ed..