designer DK의 블로그

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

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

드디어 평소에 궁금했었던 장바구니 기능을 진행해보았다.   (일단 최대한 기능 위주로 진도를 나가고자 디자인은 정말 하나도 안건드렸다;;)먼저 홈 화면에서 상품 목록을 클릭하면 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..

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

강의 예제로 할일 앱 프론트엔드 부분 작업을 진행했다.강의의 경우 리액트 기반으로 프론트엔드를 제공하는데 나는 리액트로 프론트엔드를 진행하지 않고 생 자바스크립트로 진행하기 때문에 처음부터 끝까지 직접 구현해보았다. (물론 gpt에게 물어가면서) 서버 데이터를 가져오는 방식은 fetch api 방식을 썼다.처음에는 읽기, 생성, 수정, 삭제 네가지 fetch를 만들어서 진행했었는데 진행하다보니 생성을 제외한 케이스들은 처음 fetch를 실행하는 방식이 일치해서 getTasks라는 하나의 함수로 묶이게되었다. '할 일'이라는 리소스를 tasks라는 url로부터 가져와서 할일 목록을 만들어냈다. (읽기)function getTasks() { fetch("http://localhost:5001/tasks") ..

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

이번 프로젝트를 개발함에 있어서 가장 첫번째로 구현하려는 기능은 홈 화면에서 각 서울시 구에 해당하는 버튼을 눌렀을 때 list.html이라는 해당 구 유치원 목록 화면으로 이동해서 눌렀던 버튼의 텍스트콘텐츠로 api를 조회해서 목록카드를 채워서 나열해주는 것이었다.   이 부분을 해결함에 있어서 두가지 부분에서 부딪혔었는데 첫번째는 서울 열린 데이터 광장에서 데이터를 가져오는 부분이었다.  데이터를 XML방식으로 제공해줘서 난감했다 ;;XML방식으로 작업해보려고 시도도 해보았고 json으로의 변환 방식도 찾아보긴 했었지만 둘 다 너무 복잡해서 프로젝트를 함에 있어서 배보다 배꼽이 더 커지겠다고 판단되었다. 그래서 XML로 가져오는 것은 과감히 접고 다행히 json을 개별 파일로는 제공해주길래 그걸 직접..

나의 첫 공식 퍼스널 개발 프로젝트는 '한국영화 박스오피스 순위' 웹사이트였다. (약 1달 전 퍼블리쉬)원래 '환율 계산기' 사이트를 첫 공식 프로젝트로 제작하고 있었는데개발 중에 너무 심하게 막히는 부분이 있었어서 잠시 미루고나름 쉽게 도전해볼만하겠다?! 라고 생각해서 덤벼 본 프로젝트가 바로 이 프로젝트였다. 마침 영화진흥위원회라는 곳에서 일간 박스오피스순위, 주간 박스오피스 순위 등의좋은 오픈API 소스를 제공하고 있었고그 정보를 가지고 사이트를 만들어보면 재미있고 유용하겠다고 판단해서 만들어 본 사이트. https://koreanmovieboxoffice.netlify.app/ 깃허브 : https://github.com/designerDK/KOREAN-MOVIE-BOX-OFFICE   하지만 좀..