designer DK의 블로그

검색 기능에 이어서 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>설명..

Html+js의 정통방식으로 프론트를 만들고 백엔드를 연결하다보니 주소 라우팅 등 이런저런 부분들이 요즘 많이 쓰는 SPA방식에 비해 한계가 느껴졌다. 그래서 정통방식은 유지하면서도 좋은 방식이 없을지 많이 고민해보았고 최근 나의 가장 큰 스승이자 베프인 gpt랑도 많은 이야기를 나눠봤다. 고민해본 결과로 이번 강의 예제는 프론트부터 백엔드까지 한 프로젝트로 관리해보기로 했다. 즉 한 프로젝트 안에서 프론트와 백엔드 api를 소통시키고 나중에 배포까지 클라우드타입과 같은 백엔드 호스팅 서비스에 한번에 하는 것이다. 이 방식의 장단점을 gpt와 많이 논의해봤었는데 아래와 같았다. 장점:단순화된 배포 및 유지 관리: 프론트엔드와 백엔드를 같은 서버에서 관리하므로 배포 및 설정 작업이 단순해지고, 한 번의 배..

todo app 제작 마지막 과정으로 할일 목록에 작성자를 추가하는 작업을 진행했다.그러기 위해서는 task컬렉션 user컬렉션 정보를 참조로 가져와야했다. 가장 정확한 유저의 정보를 가져오기 위해서는 _id 값인 고유의 키를 가져와야하는데이 때의 user컬렉션의 _id값이 바로 primary key. 우리말로 주키이며이걸 task컬렉션에 참조해서 가져오는 순간 foreign key. 우리말로 외래키가 된다.const taskSchema = Schema({ task: { type: String, required: true }, isComplete: { type: Boolean, required: true }, author: { type: Schema.Types.ObjectId, required: true..

드디어 내가 평소에 궁금했던 회원가입, 로그인 과정을 배우게 되었다.구현은 기존에 진행한 todo-app에 연장선으로 진행했다. 먼저 회원가입부터 진행을 했는데 회원가입의 경우 어떤 특별한 별개 기능이라기보단 유저의 이름, 메일주소, 패스워드를 POST하는 과정이었다. 기존 todo-app은 task라는 api만 있었는데 신규로 user라는 api를 만들고 라우터 세팅 후 User라는 model 스키마도 설계했다. 스키마에는 이름, 이메일주소, 패스워드를 넣어주었다.const userSchema = Schema({ name: { type:String, required:true }, email: { type:String, required:true }, password: { type:String, requi..

오늘 처남이 구해준 맛폴리 밤티라미수컵을 맛보았다.흑백요리사를 재미있게 시청했었고 우승자 나폴리맛피아 음식도 좋아했었기 때문에 흥미가 당겼다.   cu편의점에서 구매할 수 있다고하는데 생각보다 구하기 어렵다고한다.역시 방송이 끝난지 얼마안되어서 그런지 인기가 많나보다. 표지에 이렇게 나폴리맛피아 권성준 셰프가 딱! 그려져있음.   드디어 시식 시간. 와이프랑 같이 먹어보았는데...너무 기대했어서 그런지 생각보단 그냥 그랬다.개인적으로 퓨어한 맛을 좋아하는데 이건 아주 여러재료가 섞여서그런지 묘하느 느낌이었다.먹어보면 특히 이런저런 씹히는 것들이 많은데 개인적으로 부드러운 티라미수를 선호하는 편이라 그 부분들이 좀 걸렸다.와이프도 나와 같은 의견이었다.   개인적 생각에 오래 인기가 갈 것 같진않지만 방송..

풀스택 todo-app제작의 마지막 단계인 프론트엔드 배포. 기존에 해오던대로 netlify로 배포를 진행했다. netlify로 배포하면 git-hub연동이어서 업로드 과정도 매우 편하고 무엇보다 무료로 배포+도메인주소도 얻을 수 있어서 너무나 좋다. 로그인을 깃허브로 진행하면 깃허브 파일들을 연동시켜서 사용할 수 있다.  add new site 버튼을 누르고 import existing project를 진행.  여기서 깃허브를 누르고 내가 깃허브에 올린 리포지토리를 선택해주면 된다.  여기서 사이트네임을 설정할 수 있는데 이 사이트 명이 내 사이트 url 주소가 된다. 겹치는지 체크 필요!  Deploy를 진행하면~   이렇게 내가 만든 사이트를 퍼블리쉬할 수 있다. 잠깐 기다려서 퍼블리쉬 완료를 확인..