[Vue.js] Vue.js 시작하기
Vue 회사에서 front 업무(?)도 살짝 담당하게 되어 Vue.js를 공부하게 되었다. 아주 옛날에 배웠던 것 같긴 한데.. 아무것도.. 생각이 나지 않는다... Haha.h...a... 그리하여 Inflearn Vue.js 시작하기 - Age of Vue.js 강의를 듣게 되었고, 업무를 하면서 틈틈이 참고하고자 간략하게 내용들을 정리해 보았다. 아주 쉽고 빠르게 Vue.js 세계를 이해시켜주신 장기효님께 감사를.. 👏🏻👏🏻👏🏻 What is the Vue View: 눈에 보이는 화면 (화면의 요소는 HTML) HTML은 DOM을 이용해서 javascript로 조작 -> Reactivity DOM Listeners: View에서 사용자 이벤트는 Vue의 DOM Listeners로 청취 Modal: ..
[JavaScript] 클립보드에 텍스트, 이미지 저장하기 (Copy text, image to clipboard in javascript)
Copy text, image to clipboard in javascript 웹 개발에서 종종 사용되는 텍스트, 이미지를 클립보드에 복사하는 방법을 기록해보았다. Copy Text const tempArea = document.createElement("textarea"); // 임시 element 생성 document.body.appendChild(tempArea); tempArea.value = $("#copyTextId").val(); // 복사할 영역의 값 저장 tempArea.select(); document.execCommand("copy"); document.body.removeChild(tempArea); Copy Image 이렇게 간단하게 이미지를 클립보드에 복사하는 코드가 많이 없었는..
[Spring] 페이징 무한 스크롤 (Infinite Scrolling Pagination)
Infinite Scrolling & Pagination Infinite Scrolling 구현에 참고할 수 있는 정말 좋은 자료가 있다. jQuery Infinite Scrolling Demos 속도 개선을 위해 VanillaJs로 구현된 Demo를 활용하여 구현해보자. Demo scrollingTest.html 아래 코드를 적용해보면 바로 동작을 확인해볼 수 있다. Infinite Scroll + Pagination Experiment TEST Apply Demo 코드를 활용해서 적용해보자 ! View infiniteScrolling.html Infinite Scroll + Pagination Experiment TEST Controller GalleryApiController.java @Requir..
jQuery Selectric 정리
jQuery Selectric⚡ 자주 사용하는 jQuery Selectric 코드 정리. a.k.a. 자주 사용하는 = 매번 찾기 귀찮은(?) Reference https://selectric.js.org/{:target="_blank"} http://selectric.js.org/demo.html{:target="_blank"} Include Initialize $(function() { $('select').selectric(); });동적 생성 HTML - 선택 - JavaScript $.each(result.list, function(item) { var listItem = result.list[item]; $('#selectricEx').append(''..