쿠폰을 발급하는 특정 프로젝트를 진행하다가 발급 버튼을 누르면 중복으로 쿠폰이 발급되는 이슈가 발생되었습니다.클릭 이벤트나 함수 호출 또한 한 번만 되게끔 되어있는데 어째서 중복으로 실행이 되는지 의문이라 검색해보니 이벤트 버블링 (Event Bubbling) 이라고 하는 현상을 알게 되었습니다. 이벤트 버블링은 동작 이벤트를 가지고 있는 태그가 중첩으로 구성되었을 때, 해당 동작 이벤트를 실행하게 되면 중첩된 모든 동작 태그들에 한하여 중복으로 이벤트가 발생되는 현상을 말합니다.  [HTML] 취소 확인 제가 처음 만든 모달에 존재하는 쿠폰 발급 버튼입니다.보시는 것처럼 a 태그 안에 button이 중첩되어 들어가 있고, 버튼을 클릭하면 get..

이전에 canvas 로 데이터들을 통합하여 만들었었는데, 그 때 만들었던 쿠폰 canvas의 경우 저장하기 기능이 존재했기 때문에 이 canvas로 만들어진 데이터를 캡쳐한 이후에 다운로드 되는 기능이 존재해야 했습니다.오늘은 이 기능을 javascript로 구현해보는 방법을 정리해보겠습니다.  HTML 바코드 저장하기하나로 만들어진 canvas 영역과 해당 canvas 데이터를 다운로드 받을 button 을 만들어주었습니다.  Javascript// 쿠폰 + 바코드 스크린샷 다운로드function capture() { html2canvas(document.getElementById('canvas'), { allowTaint: true, useCORS: ..

개발 중인 프로젝트 내에서 특정 텍스트, 바코드를 포함한 쿠폰 이미지를 생성하여 노출시킨 후, 다운로드 할 수 있는 기능을 구현해야 했습니다.단, 바코드와 쿠폰 이미지, 특정 텍스트 모두 각자 별개의 데이터로 이루어져있기 때문에 이것들을 적절하게 배치하여 하나의 이미지로 만든 뒤 이것을 다운로드 처리하는 것이 필수 과정이기 때문에 우선 이 요소들을 하나의 데이터로 합친 뒤 다운로드 하게끔 하는 방법에 대해서 정리해보도록 하겠습니다. # 타임리프를 사용했기 때문에 th 문법이 적용되어있습니다.  HTML  우선 최종 쿠폰 이미지가 생성되어 노출될 canvas 영역을 만들어줍니다.아래의 input 타입 데이터들은 이 canvas 영역에서 하나로 ..

자바스크립트에서 Object, Array 에 들어있는 데이터들을 Destructure 하여 사용하는 방법에 대해서 알아보겠습니다. 이렇게 사용하는 방법은 api를 연동하여 json 형식의 데이터들을 불러올 때 매우 유용하게 사용할 수 있습니다. animals.js const animals = [ { name: "cat", sound: "meow" }, { name: "dog", sound: "woof" } ]; export default animals; index.js import animals from "./data" // (1) console.log(animals); // 결과 : [Object, Object] // (2) const [cat, dog] = animals; console.log(cat..

자바스크립트 ES6의 화살표 함수에 대해서 알아보겠습니다. 화살표 함수는 특정한 동작을 수행하는 함수가 아니라 기존에 사용하던 함수의 양식을 함축하여 줄여줄 수 있는 함수입니다. 기존 방식 var numbers = [3, 56, 2, 48, 5]; const newNumbers = numbers.map(function (x) { return x * x; }) 기존에 사용하던 방식대로 함수를 사용하게 되면 위와 같은 형식으로 사용할 수 있을 것입니다. 특정 함수에 수행되는 함수를 직접 기입하고 넣어줌으로서 동작되는 형식으로 주로 사용합니다. 화살표 함수를 사용하면 안에 작성된 function 부분을 없애줌으로서 코드의 양을 줄여줄 수 있습니다. 화살표 함수 적용 var numbers = [3, 56, 2,..

배열을 다룰 때 유용한 Javascript 함수들을 알아보겠습니다. 대표적으로 Map, Filter, reduce, find, find index 와 같은 함수들이 있습니다. (1) Map Map 은 배열의 각 데이터들에 명령이나 반영할 내용들을 매핑시켜 적용하고자 할 때 사용하는 함수입니다. Map() 함수 내부에는 동작되는 내부 함수가 존재하므로 Map 에 반영할 내용들을 넣기만 하면 모든 데이터에 동일하게 적용되게 됩니다. 예시 var numbers = [3, 56, 2, 48, 5]; function double(x){ return x * 2; } console.log(numbers.map(double)); 배열의 데이터가 존재하고, 매개변수를 두 배로 만들어주는 함수를 만들어 map을 통해 모든..