designer DK의 블로그

자바스크립트로 PDF 다운로드, 프린트 기능 구현하기

개인 프로젝트를 구축하면서 영수증 발행 기능을 구현했고그 과정에서 유저가 영수증을 보관할 수 있게 하기 위해 PDF다운로드와 프린트 기능을 추가했다. pdf다운로드의 경우 라이브러리 스크립트를 사용하면 매우 쉽게 구현할 수 있다.먼저 html에 이 스크립트를 추가. script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js">script>    // PDF 다운로드 이벤트 리스너 추가 const downloadButton = document.getElementById('download-receipt'); if (downloadButton) { downloadButton.addEventListener..

자바스크립트를 이용한 모달(Modal) 창 켜고 끄기

웹 서비스를 설계하다보면 자주 사용하게 되는게 바로 모달(modal) 창 기능이다. 유저가 라우팅에 의한 페이지 이동을 해서 처리하기에는 애매한...간단한 정보를 보거나 간단한 액션 처리를 하는데 유용하다. 모달창을 켜고 끄는 것은 새로운 기술을 사용하다기보다는그냥 기존 ui 위에 새로운 ui를 덧대서 보여주는 기능이라고 보면 된다. 덧대서 보여주는 것을 영어로 오버레이(overlay)라고 표현하기 때문에모달 오버레이라고 부르기도 한다.export async function getContactModal() { const existingModal = document.getElementById('contact-modal'); if (existingModal) { existingModal.remove(); }..

디자인 마켓플레이스 - 주요기능 1차 개발 + 스켈레톤 + 기본 예외처리 적용

디자인 마켓플레이스 프로젝트 1차 개발물에 기본적인 예외처리를 적용하고 코드들을 한번 점검하는 시간을 가졌다.// 에러 메시지 상수 정의export const SYSTEM_MESSAGES = { // 에러 general: "We're having trouble with our service", category: "Unable to load categories", asset: "Unable to load assets", collection: "Unable to load collection", cart: "Unable to load cart", orderSummary: "Unable to load order summary", api: "Server communication error", cartDuplica..