designer DK의 블로그

하고있는 프로젝트가 점점 복잡해짐에 따라 라우팅 처리, 앞으로가기/뒤로가기 처리도 점점 난이도가 높아져갔다.특히 앞으로가기뒤로가기 처리를 하는데 있어서 햇갈렸던 개념이바로 history.replaceState()와 history.pushState() 그리고 popstate 였다. 일단 history.replaceState()와 history.pushState() 이 두 가지 부터 살펴보면이 두 개는 브라우저 히스토리 api에서 제공하는 중요 메소드이다.페이지나 상태를 히스토리에 남기는 방식인데 그 방식을 푸쉬할 것이냐 리플레이스 할 것이냐의 차이이다. history.pushState(state, title, url) 파라미터에는 위 구조의 인자들이 들어가는데 주로 state와 url위주로 들어간다.his..

개인 프로젝트를 구축하면서 영수증 발행 기능을 구현했고그 과정에서 유저가 영수증을 보관할 수 있게 하기 위해 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..

쇼핑몰 프로젝트를 해보면서 서버 호출을 많이 함에 따라로딩 및 예외처리도 중요하겠다고 느껴졌다. 강의를 봤을 때도 Pending, Fulfilled, Failed 세 케이스를 체계적으로 관리하는 부분이 나왔는데나도 향후 프로젝트 부터는 이 부분을 체계적으로 관리해보고자 vanilla JS로 이 부분을 관리하는 방법을 gpt와 연구해보았다. fetchUtils.js라는 파일을 만들어주고그 파일 안에 있는 fetchWithStatus라는 함수를 통해 모든 fetch와 그에 따른 status를 관리하는 방식이다.(html에서 추가로 불러와야 함) async function fetchWithStatus(url) { const status = { pending: true, fulfilled: false, fail..

기존에 구현해 둔 이메일-패스워드 로그인 방식이 백엔드로부터 jwt 토큰을 받고 로컬 스토리지에 저장하는 방식으로 제작 되어있었는데, 이 방식을 유지하면서 구글 OAuth 로그인을 추가로 구현해보았다. 방식을 간단하게 설명하면, 구글 로그인 관련 프론트엔드 코드에서 credential 코드를 보내고 백엔드에서는 이걸 받아서 기존 방식과 같은 jwt로 토큰을 만들어서 응답 데이터로 반환해서 기존 로그인 방식과 구글 로그인 방식이 한 로직으로 다 구현되도록 만들어보았다. 참고로 이번에 구글 로그인 기능을 구현해보면서 알게 된 부분이지만 지금 설명하는 이 방식은 여러가지 구글 오어스 구현 방식 중 하나일 뿐이며, 실제로 개발 방식에 따라 여러 방식으로 구현할 수 있긴 했다. 구글 OAuth 로그인을 구현하기 ..

주문 완료 페이지를 만들면서 주문 성공 시 주문번호를 생성해야했다.그에 따라 랜덤한 번호 생성 함수 코드를 가져와서 사용.//orderNum 생성에 사용const randomStringGenerator = () => { const randomString = Array.from(Array(10), () => Math.floor(Math.random() * 36).toString(36) ).join(""); return randomString;};module.exports = { randomStringGenerator };  이 함수를 사용하면 랜덤한 스트링이 생성되는데 이걸 이용해서 order 컨트롤러에서 응답해야하는 값을 만들었다.const orderController = {};const Order = ..

쇼핑몰 예제를 진행하면서 헤더나 검색창 부분이 중복 사용되면서 이전에 연구해봤던 웹컴포넌트를 사용해보기로 했다. 이전에 포스팅했던 방식으로 진행을 해보았는데 막상 실전에서 사용해보니 shadow.root로 컴포넌트에 벽을 쳐 두니 생각보다 번거로운 부분이 너무 많았다. 그래서 그냥 모두 오픈시켜서 사용해보았고 이렇게 해도 큰 탈 없이 잘 진행되었다. class HeaderComponent extends HTMLElement { constructor() { super(); } connectedCallback() { this.innerHTML = `   home 로그인 로그아웃 admin `; // 버튼 이벤트 리스너 추가 this.querySelector('#home-btn').addEventList..

인덱스 페이지(메인 홈 화면) 한 html 안에서 여러 함수를 통해서 페이지 변화를 보여주는 SPA 방식을 구현하려다보니 그 페이지가 늘어남에 따라 url주소와 페이지 간의 매칭이 점점 엉키게 되었다. 예를들어 버튼으로 페이지는 띄울 수 있지만 url주소를 새로고침하면 전혀 다른 곳으로 간다거나, 뒤로가기나 앞으로가기 시 에러가 발생하는 등 여러모로 url주소와 페이지 간의 라우팅 처리가 필요했다. 이 부분은 생각보다 굉장히 난해했고gpt랑도 감정소모?를 많이 했다...그래도 씨름끝에 나름 내 방식 안에서 최적화 된 방법을 찾았고 일단 이 방식으로 구현해보았다.// 주소 정보에 맞게 페이지를 반영하는 함수function handleRoute() { const path = window.location.pa..