designer DK의 블로그

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

기존 진행하던 예제에 간편한 카드결제를 위해Stripe, Paypal을 붙여보았다.  이런저런 디테일한 우여곡절은 있었지만막연히 결제 시스템 구현에 대해 두려웠던 것에 비해서는 생각보다 순조롭게 진행했다. 이번에 결제 시스템 구현을 하게 되면서 알게된 부분인데페이팔의 경우 한국계정에서 한국계정으로는 결제 요청이 안된다고 한다.(한국-해외 or 해외-한국은 가능) 반면 스트라이프의 경우는 한국 계정끼리도 가능하다.그래서 일단 스트라이프로 최종 구축해 보았다. 먼저 스트라이프 계정생성을 해야한다. 계정생성 시 국가 선택에 한국이 없어서 당황스러웠는데;;ai에게 물어보니 일단 미국이나 다른나라로 했다가 나중에 바꿀 수 있다고 한다. 스트라이프든 페이팔이든 모두 실제 결제 시스템 안정성을 위해Sandbox라는 ..

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

이어서 상품의 수정 및 삭제 기능 작업을 진행했는데 상품의 경우 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..

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

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

강의를 통해 배우는 첫 백엔드 설정 예제를 진행해보았다. mongoDB와 node.js를 연결하고 백엔드 설정을해서 프론트엔드와 소통하는 할일 앱을 만드는 과제. 사실 한번에 너무 방대한 양을 배우는 데다가 페이지가 잘게 쪼개져 있어서 아직도 좀 아리송한 부분들은 있지만 대략적으로는 백엔드와 프론트엔드가 어떻게 돌아가는지 알게 된 것 같다. 시작 전에 npm을 이용해서 express, mongoose, body-parser를 설치. (바디파서는 이제 설치 필요 없음)express를 이용해서는 서버를 간편하게 열 수 있었고 mongoose를 이용해서 mongoDB 스키마를 설계할 수 있었다.const express = require('express');const mongoose = require('mong..

최근 만들어본 ‘킨더서울’ 사이트를 비롯해서 기존에 오픈 되어있는 api 정보들을 가져와서 만드는 사이트들을 여러번 만들다보니 자연스럽게 내가 자체적으로 서버와 데이터베이스를 구축해보고싶은 욕심이 생겼다. 지금까지 자바스크립트 위주로 공부해왔었는데 조사해보니 같은 자바스크립트 베이스의 백엔드 툴로 node.js가 괜찮아보였고 나의 코딩 바이블인 ‘생활코딩’사이트를 통해 node.js를 전반적으로 접해보니 너무 넘사벽 느낌이라기보다 한번 해 볼만 하겠다고 느껴졌다. 좀 더 깊숙하게 공부하면서 실용적인 기능들을 익혀가고 싶었고 (db사용법, 로그인, 주문, 결제 등)이리저리 서치해보니 ‘코딩알려주는누나’의 node.js 강의가 커리큘럼 상 실용적인 부분이 많아보였다. 할일앱부터 쇼핑몰까지 실전예제들을 다루는..