기술 창고(246)
-
[Javascript] 이벤트 버블링 (Feat. 버블링 막기)
쿠폰을 발급하는 특정 프로젝트를 진행하다가 발급 버튼을 누르면 중복으로 쿠폰이 발급되는 이슈가 발생되었습니다.클릭 이벤트나 함수 호출 또한 한 번만 되게끔 되어있는데 어째서 중복으로 실행이 되는지 의문이라 검색해보니 이벤트 버블링 (Event Bubbling) 이라고 하는 현상을 알게 되었습니다. 이벤트 버블링은 동작 이벤트를 가지고 있는 태그가 중첩으로 구성되었을 때, 해당 동작 이벤트를 실행하게 되면 중첩된 모든 동작 태그들에 한하여 중복으로 이벤트가 발생되는 현상을 말합니다. [HTML] 취소 확인 제가 처음 만든 모달에 존재하는 쿠폰 발급 버튼입니다.보시는 것처럼 a 태그 안에 button이 중첩되어 들어가 있고, 버튼을 클릭하면 get..
2024.11.20 -
[Spring Boot] js, css 와 같은 Resources 버전 관리 (feat. 캐시 스택킹 제거)
Spring Boot 프로젝트를 하나의 monolithic 프로젝트로써 MVC 패턴을 적용하여 구현하려고 했습니다.이 때 View 부분은 Thymeleaf 로 구성하였고 정상적으로 페이지가 구현되고 완성되었습니다.하지만 운영 서버에 배포할 때, 초기에 배포한 프로젝트 다음에 js나 css와 같은 Resource 를 수정한 version 2 프로젝트를 다시 재배포하게 되었을 때 업데이트한 Resource들이 정상적으로 반영되지 않고 계속 이전 Resource 내용으로 적용되어 문제가 발생되는 이슈가 있었습니다.이는 Resources들이 갱신되지 않기도 하거니와 서버 캐시 또한 새로고침(?) 되지 않아 발생된 이슈입니다.따라서 이를 해결해주지 않으면 서비스에 접속한 유저들이 일일히 직접 접속한 브라우저나 앱..
2024.11.19 -
[Javascript] canvas 캡쳐 후 다운로드
이전에 canvas 로 데이터들을 통합하여 만들었었는데, 그 때 만들었던 쿠폰 canvas의 경우 저장하기 기능이 존재했기 때문에 이 canvas로 만들어진 데이터를 캡쳐한 이후에 다운로드 되는 기능이 존재해야 했습니다.오늘은 이 기능을 javascript로 구현해보는 방법을 정리해보겠습니다. HTML 바코드 저장하기하나로 만들어진 canvas 영역과 해당 canvas 데이터를 다운로드 받을 button 을 만들어주었습니다. Javascript// 쿠폰 + 바코드 스크린샷 다운로드function capture() { html2canvas(document.getElementById('canvas'), { allowTaint: true, useCORS: ..
2024.11.12 -
[Javascript] 이미지 및 텍스트 데이터 (+ 바코드 생성 데이터) 를 통합하여 하나의 데이터로 canvas 화
개발 중인 프로젝트 내에서 특정 텍스트, 바코드를 포함한 쿠폰 이미지를 생성하여 노출시킨 후, 다운로드 할 수 있는 기능을 구현해야 했습니다.단, 바코드와 쿠폰 이미지, 특정 텍스트 모두 각자 별개의 데이터로 이루어져있기 때문에 이것들을 적절하게 배치하여 하나의 이미지로 만든 뒤 이것을 다운로드 처리하는 것이 필수 과정이기 때문에 우선 이 요소들을 하나의 데이터로 합친 뒤 다운로드 하게끔 하는 방법에 대해서 정리해보도록 하겠습니다. # 타임리프를 사용했기 때문에 th 문법이 적용되어있습니다. HTML 우선 최종 쿠폰 이미지가 생성되어 노출될 canvas 영역을 만들어줍니다.아래의 input 타입 데이터들은 이 canvas 영역에서 하나로 ..
2024.11.12 -
[MySQL] dump 데이터로 데이터 import (복원)
이전에 MySQL 워크벤치에서 데이터를 dump 시키는 방법에 대해서 정리해보았습니다.이번에는 dump 시킨 데이터를 가지고 import 복원시키는 방법에 대해서 정리해보겠습니다. https://jindevelopetravel0919.tistory.com/420 [MySQL] 워크벤치 데이터 dump개발을 하고 운영하는 도중 결제 관련 데이터를 담아둔 데이터가 통째로 드랍되어 식은 땀이 났던 경험이 있습니다.개발 일정이 워낙 타이트하고 바쁘다는 핑계로 데이터들을 백업하지도 않았jindevelopetravel0919.tistory.com지난 dump 과정을 정리한 글에서 이어서 dump 시킨 SQL문 파일을 기준으로 정리해보겠습니다. import 시키고자 하는 데이터베이스에 접속해서 Server 메뉴의 ..
2024.10.15 -
[MySQL] 워크벤치 데이터 dump
개발을 하고 운영하는 도중 결제 관련 데이터를 담아둔 데이터가 통째로 드랍되어 식은 땀이 났던 경험이 있습니다.개발 일정이 워낙 타이트하고 바쁘다는 핑계로 데이터들을 백업하지도 않았기 때문에 새벽 4시까지 해당 데이터들을 일일히 수기로 다시 생성해줘야 했습니다.... ㅠㅠ이러한 사태를 다시는 발생시키지 않기 위해 오늘은 MySQL 워크벤치에서 이때까지 쌓아온 데이터들을 백업용으로 dump 시켜 추출하는 방법에 대해서 정리해보겠습니다. 이 때까지 쌓아온 데이터 테이블들 목록을 우선 확인해줍니다.이 테이블들을 통째로 dump 시킬 생각입니다. 워크벤치 Server 메뉴에 Data Export 항목을 눌러줍니다. Data Export 구성 화면에서 추출할 데이터베이스 schema를 선택 후, 오른쪽 항목..
2024.10.15