designer DK의 블로그

개인 프로젝트를 구축하면서 영수증 발행 기능을 구현했고그 과정에서 유저가 영수증을 보관할 수 있게 하기 위해 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) 창 기능이다. 유저가 라우팅에 의한 페이지 이동을 해서 처리하기에는 애매한...간단한 정보를 보거나 간단한 액션 처리를 하는데 유용하다. 모달창을 켜고 끄는 것은 새로운 기술을 사용하다기보다는그냥 기존 ui 위에 새로운 ui를 덧대서 보여주는 기능이라고 보면 된다. 덧대서 보여주는 것을 영어로 오버레이(overlay)라고 표현하기 때문에모달 오버레이라고 부르기도 한다.export async function getContactModal() { const existingModal = document.getElementById('contact-modal'); if (existingModal) { existingModal.remove(); }..

디자인 마켓플레이스 프로젝트 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..

웹컴포넌트를 파라미터를 통해 콘텐츠 제어하는 예시를 기록해둔다.이렇게 하면 간단하게 파라미터 값으로 컴포넌트를 효과적으로 사용할 수 있다. class FooterComponent extends HTMLElement {    static get observedAttributes() {        return ['company-logo', 'copyright', 'reg-number1', 'reg-number2', 'ceo', 'width', 'visible'];    }    constructor() {        super();        this.companyLogo = '';        this.copyright = '';        this.regNumber1 = '';        thi..

디자인 마켓플레이스 - 주요기능 1차 개발 완료 자료

리액트와 같은 프레임워크를 안쓰고 사이트를 구축해보려고하니가장 부딪혔던 부분이 바로 주소창 URL과 내 화면 간의 일치 작업이 매우 힘들다는 부분이었다.그 작업이 복잡해지다보니 자꾸 뒤로가기를 눌렀을 때 두번 뒤로가기를 하면 인덱스로 가버리는 현상이 발생했다. 사실 이 부분의 경우 지난번 프로젝트때 Vanilla JS 기반으로 해결해보는걸 시도는 했었으나 그땐 실패했었다.결국 이번 프로젝트 어드민 구축에 있어서 그런 문제가 또 발생했고이번에 풀지 않으면 계속해서 발생하겠다고 판단이 되어서 커서와 함께 다시 이 문제를 해결해보았다. 화면에 맞는 주소반영, 원활한 뒤로가기, 페이지 관리 등이 중요했고이를 해결하는 방법으로 State와 Router 파일을 구축해서 사용하게 되었다.(리액트를 안썼지만 결국 작업..

지난번 포스팅에서 이어지는 포스팅인데 aws에서 I AM 사용자 생성과 S3 버킷 생성이 되었으면이제 실제로 파일을 올려보고 받는 연습이 필요했다. 제대로된 파일 다운로드 기능 구현은 유저 권한 및 상품과도 연계시켜야하는 복잡함이 있어서일단은 S3를 이용한 다운로드가 잘 되는지 안되는지만 테스트해보기 위해순전히 다운로드 테스트용 코드만 구성해서 테스트해보았다. 먼저 파일의 업로드가 필요한데 이것도 두가지로 나뉜다.1. 코드를 통한 업로드2. 직접 aws S3에서 업로드 1번의 경우 상당히 복잡한 과정을 거쳐야하기 때문에 나의 프로젝트 특성을 감안했을 때2번의 방법 편하고 좋을 것 같아서 2번의 방식으로 하기로 결정했다. 실제로 직접 업로드 방식은 굉장히 편했다. 먼저 s3에 접속한다. 지난번에 만들어 둔..

디자인 마켓플레이스 프로젝트를 진행하면서 유저가 파일을 받을 수 있는 시스템이 필요했다.그러기 위해서는 필연적으로 파일서버가 필요하고 그 방법으로 아마존 AWS의 S3를 사용해보기로 했다. 과정이 꽤 복잡해서 나도 이렇게 블로그로 정리해둔다. 최초 가입 과정은 생략한다. (국적 및 카드정보가 필요하다는 것이 특이사항!) 가입을 하고나서 콘솔에 로그인을 한다.AWS의 경우 제공하는 서비스가 너무나 방대하기 때문에 검색하는게 일일이 찾는것 보다 훨씬 낫다.검색창에 I AM을 검색하면 그 이후부터는 이렇게 최근 방문 서비스에 필요한 서비스가 뜬다.  I AM에 들어가서 좌측메뉴 사용자를 선택하면 이렇게 사용자 생성을 할 수 있다.   여기서 사용자 이름 설정  권한 설정 부분인데 여기는 직접 정책 연결을 선택..

새로운 프로젝트를 시작하며 (디자인 마켓프레이스)대부분 직전에 진행해보았던 쇼핑몰 프로젝트와 유사했고그 과정과 유사하게 많은 부분들을 진행 중이다. 하지만 기존 쇼핑몰에서 내가 패스하고 지나갔던 게 바로 카테고리 부분이었는데디자인 마켓플레이스 프로젝트의 경우 이 카테고리 부분이 매우 중요해서초기 설계부터 잘 해두고 진행하고 싶었다. 그래서 나의 새로운 코딩 선생님. Cursor와 함께 이 카테고리 설계를 체계적으로 진행해보았다.사실 이게 대략하려면 크게 안어려울 부분 같았으나, 나름 체계적으로 구축하려다보니 꽤 복잡하고 어려웠다. 내가 나에게 요청하는 카테고리 요구사항은 이러했다.- 메인카테고리가 있고 그 하위로 서브카테고리가 있다. (서브카테고리가 필터 역할도 할 것)- 메인카테고리는 하나만 선택 가능..

모든 문제는 결국 두가지로 귀결된다. 내가 통제할 수 있는 문제.내가 통제할 수 없는 문제. 내가 통제할 수 있는 문제에 집중하자.