designer DK의 블로그

듣고 있는 강의 내용이 쇼핑몰 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>설명..

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

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

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

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

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

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

원래 내 첫번째 개발 도전 프로젝트였으나 중간에 한번 큰 벽에 막혀서 잠시 멈추고 다른 프로젝트 (한국 영화 박스오피스 순위)를 먼저 진행해보고 다시 재도전해서 완성한 프로젝트. https://currencyex.netlify.app  개발 독학 공부를 시작하면서 참고했던 유튜브 채널인 '코딩알려주는누나' 채널에서 알려준 환율계산기를 한번 만들어보고서 조금만 더 보강하면 제대로된 환율계산기를 만들 수 있겠구나~라고 생각했었지만 그건 큰 착각이었었다.막상 실제 api를 가져와서 진행해보니 여러가지로 예상치못했던 변수나 힘든 부분들도 많았다.  무료로 환율정보를 가져올 수 있는 api 를 열심히 찾다가 이 곳이 가장 적절해보여서 여기서 당겨왔었다.https://currencyapi.com/ Currency ..

개발 공부를 시작한 디자이너로써개인 프로젝트 개발물들을 만들어보며기록으로 남기고픈 부분들을 블로그에 기록해두려고 한다. 이 작은 시도들이 뜻깊은 성취로 돌아오길 기대하며.  p.s. 나의 개발 스터디는 23년 10월,html css 스터디로 시작했고 현재 자바스크립트를 공부 중에 있다.(javaScript, React, NextJS 등)현재 2.5개의 스몰 웹 프로젝트를 진행하고 퍼블리싱했다.이전 프로젝트들 그리고 앞으로 진행할 프로젝트들을이 공간에 차곡차곡 정리해나갈 계획이다.