designer DK의 블로그

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

카트 가격 합산리듀스 어큐뮬레이트 합산법포맷커런시 적용 카트에 담았으니 이제 카트에 있는 리스트의 가격 총합을 이용해서 주문 내역을 만들고 결제를 해야한다.카트 페이지를 가져오기 위해서 장바구니 버튼을 누르면 이렇게 getCartPage라는 함수를 실행시키게 했다.//장바구니 버튼const cartBTN = document.getElementById('cart-btn');cartBTN.addEventListener('click', () => { getCartPage();});  getCartPage라는 함수는 이렇게 길게 구성되었는데 이는 주문내역까지 한번에 구성하느라 길어진 것도 있고 가격들의 합산을 위해서 코드가 좀 복잡해졌다.function getCartPage() { history.pushStat..

상품 상세나 카트가 추가되면서 경로가 꽤 많아졌다.효과적인 js파일들 관리를 위해 index.html이라는 하나의 html파일의 콘텐츠 컨네이너 안에서 상품 콘텐츠나 카트 콘텐츠 같은 것들이 바뀌도록 구성을 했는데, 이렇게하다보니 문제가 해당 경로로 갔을 때 새로고침을 하면 에러가 발생했다. 경로를 다시 불러들이면서 발생한 에러인듯했다. 따라서 해당 경로를 다시 불러들일 때 거기에 맞는 해당 경로에 맞는 함수를 실행시켜서 문제가 안생기도록 세팅을 했다. 일단 public파일들의 라우팅 처리를 해주는 코드 경로 설정을 추가해주었다.여기서 product/* 라고 설정되어있으면 product 다음에 어떤 경로가 더 있든 index.html로 보내준다는 뜻이다.//상품 페이지apiRouter.get('/pro..

드디어 평소에 궁금했었던 장바구니 기능을 진행해보았다.   (일단 최대한 기능 위주로 진도를 나가고자 디자인은 정말 하나도 안건드렸다;;)먼저 홈 화면에서 상품 목록을 클릭하면 getProductDetail(item._id)를 실행시키도록 했다.이 함수에 인자로 선택한 상품 아이디를 넣어서 실행하면 해당 아이디를 가지고 get요청을 해서 상품 상세페이지를 가져오게된다.  상세페이지에서는 사이즈를 선택해서 장바구니에 추가를 할 수 있다.사이즈 정보를 선택하는 방법으로 라디오버튼 방식을 해보았다.원래 드랍다운으로 하는게 일반적이나 당장은 이러한 컴포넌트 구현이 공부 주제는 아닌지라;;최대한 간단하게 할 수 있는 라디오 방식으로 했다.//사이즈 선택 라디오 Object.keys(data.data.stock)...

이어서 상품의 수정 및 삭제 기능 작업을 진행했는데 상품의 경우 api로 주고받는 값들이 많아보니 CRUD를 구현했을 때 코드가 상당히 복잡하고 길어졌다. 그에따라 JS파일을 기능별로 페이지를 분할하는 작업도 병행했다. 모달관련 페이지, 일반 페이지, 겟, 포스트, 업데이트, 딜리트 이렇게 6개 페이지로 나누어보았다. 각 페이지에 대한 js소스는 html에서 하나로 통합된다. script src="/adminProductModal.js">script> script src="/adminProductPost.js">script> script src="/adminProductPut.js">script> script src="/adminProductDelete.js">script> script src="/adm..

검색 기능에 이어서 queryString으로 페이지 정보를 api로 주고 받아서 페이지네이션 기능을 구현하는 작업을 진행해보았다.지난번에 페이지네이션 구현을 한번 해보았는데 너무 복잡하고 어렵게 구축이 되어서 좀 더 편한 방법을 찾아보려고 페이지네이션 라이브러리들을 많이 찾아보았는데 나만 그런건지 뭐가 문제인진 몰라도 계속해서 에러가 발생했다 ㅜㅜ;; (시간만 엄청 날림)결국 우여곡절 끝에 그냥 기본 자바스크립트로 구현되었는데  그래도 페이지네이션 치고? 생각보다 많이 복잡한 로직은 아니게 구현되었다. 일단 페이지네이션을 위한 프론트엔드 코드이다. currentPage라는 변수는 최초 1로 설정되어있으며 이따가 나오는 changePage라는 함수에 의해 값이 변한다.원래 구성되어있었던 getProduct..

상품 목록에 대해 원하는 상품 목록만 나오도록 할 수 있는 검색 기능을 진행해보았다.특히 url 주소에 검색어를 넣어서 get 요청을하고 거기에 대한 응답을 할 수 있도록 만들어서 프론트엔드 백엔드 간 api를 통해 검색결과가 보여지도록 구현해보았다. 이번에도 gpt와 함께 코드를 짜서 모르는 개념들도 많이 나왔는데 새롭게 알게 된 개념들 위주로 정리해본다.아래 코드가 url을 통한 검색을 구현한 프론트엔드 코드이다. // 검색 기능을 수행하는 함수function searchProducts(searchQuery) { if (searchQuery) { // 검색어가 있을 경우 해당 검색어로 검색 요청 fetch(`${URI}/api/product?name=${encodeURIComponent(searchQ..

쇼핑몰 어드민 쪽 상품 추가 기능을 만들면서 재고추가 기능이 들어갔다.기능을 간단하게 풀어보면1. 재고 추가 버튼을 누른다.2. 한 쌍의 인풋이 추가된다. (각각 사이즈 : 수량)3. 버튼을 더 누르면 재고 인풋이 추가된다.4. 인풋에 값을 입력하면 stockValues라는 변수에 객체 형태로 값이 담긴다. 예 : { S:2, M:2, L:1 } 이런저런 우여곡절 끝에 아래와 같은 코드로 구현할 수 있었다. //재고 정보 추가 및 삭제 기능let stockValues = {}; // 객체로 재고 정보를 저장let stockCount = 0; // 고유한 ID를 관리하는 변수addStock.addEventListener('click', () => { const currentId = stockCount; /..

듣고 있는 강의 내용이 쇼핑몰 admin 부분으로 넘어왔는데 상품 생성에 있어서 중요한 이미지 업로드 기능을 쉽게 구현시켜줄 수 있는 라이브러리를 알게되어서 글로 남긴다. 바로 Cloudinary라는 라이브러리인데 사용법이 매우 간단하다.  먼저 가입을 하고나면 두가지 정보를 알아내야하는데 하나는 Cloud name이고 하나는 upload preset name이다.  가입 후 대쉬보드를 가보면 Cloud name은 쉽게 찾을 수 있다. 업로드 프리셋 네임은 찾기가 좀 어려운데 좌측 하단 설정 아이콘을 눌러서 업로드 쪽을 가보면 '업로드 프리셋' 부분이 있다. 디폴트는 두고 애드 업로드 프리셋 버튼을 눌러서 Unsigned로 하나 새로 생성한다. 위 이미지에서 가려놓은 부분이 바로 upload preset..

듣고 있는 강의가 쇼핑몰 구축 쪽으로 들어갔는데 프론트엔드쪽에서 모달 창을 띄우는 부분이 나왔다. 강의는 리액트 기반으로 진행되었는데 나는 기본 자바스크립트로 구축하고 있기 때문에 기본 자바스크립트로 모달창을 구현해보았다. 구현은 챗 지피티 도움을 많이 받았다.  div id="item-modal" class="modal" style="display: none;"> div class="modal-content"> span class="close-btn">×span> h2>상품 추가h2> label>상품번호label> input type="text" id="item-sku"> br> label>상품명label> input type="text" id="item-name"> br> label>설명..