자바스크립트 19

재고 추가 기능 만들기. javaScript 프론트엔드

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

업로드 이미지를 쉽게 해주는 라이브러리 : Cloudinary

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

javaScript로 모달 창 구현하기

듣고 있는 강의가 쇼핑몰 구축 쪽으로 들어갔는데 프론트엔드쪽에서 모달 창을 띄우는 부분이 나왔다. 강의는 리액트 기반으로 진행되었는데 나는 기본 자바스크립트로 구축하고 있기 때문에 기본 자바스크립트로 모달창을 구현해보았다. 구현은 챗 지피티 도움을 많이 받았다.  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>설명..

[Node.js 스터디] 할일 앱 만들기 - 프론트엔드 부분 작업

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

웹컴포넌트 실전 사용기. 모든 페이지에 활용할 수 있는 컴포넌트로 만들기 (서울시 유치원 정보 사이트 프로젝트 ep.7)

프로젝트 진행 전에 컴포넌트를 활용할 확률이 많을 것으로 판단되어서 미리 R&D를 진행 했었고, 그 테스트를 통한 가정을 프로젝트 실전에 적용을 해보려고 시도했다. 일단 예상했던 부분은 카드 디자인들을 컴포넌트로 많이 사용하지않을까로 예측했었는데 막상 카드들의 생성 자체가 for문으로 반복 생성된 부분들이어서 이를 굳이 컴포넌트화 시킬 필요는 없겠다고 판단했다. 따라서 페이지별로 반복되게 사용되는 부분을 찾아보니 '헤더+타이틀'과 '푸터'였고 이 두 가지 부분만 컴포넌트화 해보기로 결정했다. 지난번에 미리 진행해 본 방법대로 진행을 해보았는데…(웹 컴포넌트 테스트 1 - https://designerdk.tistory.com/6)(웹 컴포넌트 테스트 2 - https://designerdk.tistory..

javascript로 페이지네이션(Pagination) 만들기 (서울시 유치원 정보 사이트 프로젝트 ep.5)

이번 서울시 유치원 정보 사이트 프로젝트 대망의 마지막 기능 구현은 페이지네이션이었다. 페이지네이션은 목록의 양이 많아졌을 때 페이지로 정리해서 나눠담는 기능인데 이 기능의 경우 개발 초보인 나에겐 너무 어려운 기능이어서 이번 구현은 사실상 거의 gpt에게 맡겼었다. 하지만 이번 프로젝트는 단순히 기능 구현 보다는 개발 공부에 더 큰 의미가 있기 때문에 비록 gpt를 이용해서 만든 코드이지만 내가 이해할 수 있는 선까지는 최대한 분석해보기로 했다. list.js 페이지에서 몇가지 전역변수를 지정하고 시작했다.let currentPage = 1; // 현재 페이지 번호const itemsPerPage = 10; // 페이지당 표시할 항목 수let currentList = []; // 현재 목록을 저장할 배..

javascript로 검색 기능 구현 (서울시 유치원 정보 사이트 프로젝트 ep.3)

이번 서울시 유치원 정보 사이트 프로젝트를 설계할 때 서울시 구 이름 버튼으로 유치원을 찾을 수 있으면서도 홈 화면에서 직접 검색 기능을 넣으면 ux가 더 좋을 것 같다고 판단되었다.   검색 인풋에 유치원 명을 넣으면 리스트 페이지에서 검색된 유치원 목록 나오게 구현되도록 계획하였다.   인풋에 밸류를 입력하고 검색버튼을 누르면 searchedKeyword 변수에 검색어를 localStorage로 저장 후 리스트 페이지로 이동된다.// 검색창 인풋값으로 검색해주는 버튼document.querySelector(".search-btn") .addEventListener("click", function () { // 인풋 값 가져오기 searchedKeyword = searchInput.value.trim(..

javascript filter를 이용해서 일치하는 이름 배열 형태로 가져오기 (서울시 유치원 정보 사이트 프로젝트 ep.3)

이번엔 디테일 페이지에 대한 작업이었다. 이전에 버튼 텍스트 콘텐츠로 서울시 구 이름을 전역변수로 저장, 리스트 페이지에서 그 저장된 값을 가져왔었는데 같은 방식으로 리스트페이지에서 클릭한 목록의 유치원 명을 clickedKinderName이라는 전역변수에 저장하고 그 값을 디테일 페이지에서 localStorage를 이용해서 로드하였다.document.addEventListener("DOMContentLoaded", function() { let clickedKinderName = localStorage.getItem('clickedKinderName');  if (clickedKinderName) { searchDetail(clickedKinderName); } else { console.error("..

생 javascript 기반 웹컴포넌트 만들어보기 테스트

디자이너로써 디자인을 하면서도 컴포넌트는 굉장히 유용하게 쓰는 편인데 개발 공부를하면서도 컴포넌트 개념을 꼭 활용하고 싶었고 그러기 위해 리액트도 맛뵈기로 조금 공부를 해봤었다. 리액트에서의 컴포넌트는 정말 사용성이 편리했었는데 다만 다른 부분에서 아직 개발 초보가 접근하기 힘든 개념이 많았었다. (스테이츠 등등...) 그래서 좀 더 기본기를 다지면서 컴포넌트를 활용할 수 없을까 고민해봤었다. 즉 생 자바스크립트 기반으로 개발하면서 컴포넌트를 자유자재로 사용하고 싶었고 그것에 대한 좋은 솔루션이 바로 '웹 컴포넌트' 개념이었다. 요즘 최애하는 개발 유튜브 채널인 코딩애플 영상 중 - 깃헙 개발자들이 React 안쓰는 이유 : Web Component https://www.youtube.com/watch?..