designer DK의 블로그

쇼핑몰 어드민 쪽 상품 추가 기능을 만들면서 재고추가 기능이 들어갔다.기능을 간단하게 풀어보면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를 진행하면~   이렇게 내가 만든 사이트를 퍼블리쉬할 수 있다. 잠깐 기다려서 퍼블리쉬 완료를 확인..

강의에서는 백엔드 배포 방법으로 Heroku, Cloudtype, AWS를 제안해주었고 그중에 실 강의로는 Heroku와 AWS를 진행해주었다. 각기 장단점이 존재했는데 Heroku는 배포가 매우 간단한데 월 5000원이 들어간다는 단점이 있었다.클라우드타입(Cloudtype)은 배포가 편리하고 무료플랜이 있는데 무료플랜 시 하루에 한번 서버가 잠깐 꺼진다고 한다 ㄷㄷㄷAWS는 aws elastic beanstalk라는 서비스로 무료 배포가 가능한데 배포과정이 번거롭고 배포 중 에러발생률이 높다. 처음엔 무료이기도하고 그래도 개발 배우는데 aws 한번 써봐야지~라는 생각으로 aws 배포를 시도했으나 계속해서 발생하는 에러로 결국 포기하게 되었다. 그렇게 차선책으로 선택하게 된 Cloudtype. 하루 한..

강의를 통해 풀스택으로 '할일 앱'을 만들었고 배포하는 과정으로 들어갔다.가장 먼저 DB 배포를 진행했다. mongoDB atlas를 가입하고 클러스터라는 걸 만들어준다. (shared가 클러스터 1개까지 무료)     커넥트를 진행. compass와 연결시켜주면 된다. 콤파스를 누르면 URI주소를 제공해주는데 그걸 복사해서 콤파스를 실행했을 때 URI주소 인풋에 넣어주면 된다. 주소에서 패스워드부분을 입력해줘야하는데 기억이 안날 때에는 Database Access라는 메뉴로들어가면 패스워드 재설정을 할 수 있다.패스워드를 재설정 후 꼭! '업데이트 유저' 버튼을 눌러주고 해당 패스워드를 콤파스 uri주소 패스워드 쪽에 넣어준다. 그러고 연결을 해주고 프로젝트 명 생성. (백엔드 연결을 먼저 진행해도 됨..