gulp로 js 파일, css파일 Minify 및 Merge하기
gulp 이해를 돕는데 가장 많이 도움을 받은 블로그입니다. 단계씩 작성해주신 글만 따라가도 잘 할 수 있습니다. 다만, 예제를 따라하면서 자세하지 않았거나 몰랐던 부분 같은 것을 기억하기 위해 글을 씁니다. (도움을 받은 블로그에서는 약간의 지식이 깔려있어야한 듯 싶습니다.) https://valuefactory.tistory.com/314 = https://programmingsummaries.tistory.com/393 gulp란? gulp시작하기 gulp 시작하기 gulp.js을 시작하기 위해 필요한 가장 기본적인 사용 방법들을 정리했습니다. gulp 개념 gulp 는 node.js 기반의 task runner 입니다. 반복적인 귀찮은 작업들이나 프론트엔드 빌드에 필요한 작업들.. valuefac..
자바스크립트 디자인패턴 - 들어가며, 1장
자바스크립트는 세계에서 가장 인기있는 언어 중 하나로 자리 잡고 있다. 다소 장난감같은 태생때문에 개발자들이 디자인패턴을 무시하는 경향이 있다. 디자인 패턴은 신뢰성 있는 솔루션을 제안할 수 있는 훌륭한 도구다. - 자바스크립트 디자인패턴 중, 들어가며 책 펴자마자 나오는 글인데, 진짜 뜨끔했다. 나도 몇년 전, 아니 몇일 전까지만 해도 아직까지 나는 디자인패턴 뭐 ㅎ 라고 생각했기 때문일까. 물론 ㅋㅋㅋㅋㅋㅋㅋㅋ 말도 안되는 자기위로였지만. 좀 제대로 알아야할 것 같아서 기초 서적 찾던 중에 하코사에서 누군가가 책을 추천하길래, 언능 도서관가서 대여해왔다. 1부에서는 전통적인 디자인 패턴을 다룬다고 하고 2부에서는 책에서 다루지 않은 패턴 그리고 자바스크립트에 특화된 패턴을 다룬다고 한다. 내가 읽고 ..
e.target.dataset과 jQuery의 .data()의 결과 값은 다를 수 있다.
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..
vue.js 기초- 인스타그램 만들어보기 08_ajax통신, axios (코딩애플 세미나 후기)
더보기 버튼을 생성하여 버튼 클릭 시에 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는 하단에 리스트를 ..