designer DK의 블로그

디자인 마켓플레이스 프로젝트를 진행하면서 유저가 파일을 받을 수 있는 시스템이 필요했다.그러기 위해서는 필연적으로 파일서버가 필요하고 그 방법으로 아마존 AWS의 S3를 사용해보기로 했다. 과정이 꽤 복잡해서 나도 이렇게 블로그로 정리해둔다. 최초 가입 과정은 생략한다. (국적 및 카드정보가 필요하다는 것이 특이사항!) 가입을 하고나서 콘솔에 로그인을 한다.AWS의 경우 제공하는 서비스가 너무나 방대하기 때문에 검색하는게 일일이 찾는것 보다 훨씬 낫다.검색창에 I AM을 검색하면 그 이후부터는 이렇게 최근 방문 서비스에 필요한 서비스가 뜬다.  I AM에 들어가서 좌측메뉴 사용자를 선택하면 이렇게 사용자 생성을 할 수 있다.   여기서 사용자 이름 설정  권한 설정 부분인데 여기는 직접 정책 연결을 선택..

디자인 마켓플레이스 프로젝트를 드디어 시작했다. 노션에서 러프하게 기획을 진행하고  DB 구성요소들을 대략 짜보았다.   그리고 피그마에서 각 화면에 대한 대략적인 설계들도 진행했다.  디테일한 기획은 개발을 진행해가면서 계속해서 추가 보완을 해나갈 생각이다.이전에 몇몇 프로젝트를 진행해보니 나름 아무리 기획을 꼼꼼하게 잡더라도 결국 실질적인 개발이 이루어지다보면계속해서 기획이 틀어지고 변경되는 경우를 많이 목격했다. 그래서 너무 완벽한 기획을 하고 프로젝트에 들어가는 것 보다는큰 뼈대는 제대로 잡고 디테일 한 부분은 개발을 해가면서 추가 보완 해나가는 것이 좋다고 생각한다.그게 일반적인 스타트업들에서 이야기하는 애자일 방식이 아닐까. 다음주부터 개발 시작!

듣고 있는 강의가 쇼핑몰 구축 쪽으로 들어갔는데 프론트엔드쪽에서 모달 창을 띄우는 부분이 나왔다. 강의는 리액트 기반으로 진행되었는데 나는 기본 자바스크립트로 구축하고 있기 때문에 기본 자바스크립트로 모달창을 구현해보았다. 구현은 챗 지피티 도움을 많이 받았다.  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제작의 마지막 단계인 프론트엔드 배포. 기존에 해오던대로 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주소 패스워드 쪽에 넣어준다. 그러고 연결을 해주고 프로젝트 명 생성. (백엔드 연결을 먼저 진행해도 됨..

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

서울시 유치원 정보 사이트 프로젝트 개발의 디테일 페이지에서  학급수와 유아수 데이터를 그래프화하는 작업을 진행하였다. 구글로 서치해본 결과 chart.js라는 것을 쓰면 효과적으로 구현할 수 있을 것 같아서 그걸 이용해서 제작해 보았다. 홈페이지 가보면 매우 다양한 그래프 타입을 사용 가능한 것, 그리고 생각보다 굉장히 디테일한 설정까지 가능한 것을 확인할 수 있었다.  일단 html 쪽에 스크립트 태그안에 소스를 cdn 방식으로 불러와서 chart.js 사용할 준비.script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js">script> 그리고 그래프를 넣어줄 html쪽에  캔버스라는 태그를 만들어주었다. 여기..

지난주에 와이어프레임으로 구성해본 기획안을 간단하게 html+css를 통해 화면 구획을 진행해보았다. 내 본업이 디자이너이긴 하지만 나의 개발 프로젝트들의 경우 개발 능력 향상과 기능 구현에 좀 더 큰 목적을 두고 있기 때문에 먼저 이런식으로 html+css로 러프하게 구획 설정으로 대략적인 구조를 잡고 기능 기발을 진행한 후에 그에 맞는 ui 디자인을 하는게 훨씬 더 효율적이었다. (아직 초보이다보니 디자인 열심히 다듬어놓고 기능구현이 안되면 다시 갈아엎어야 하기에…ㅜㅜ)   화면 구획은 css의 flex로 거의 진행하는 편이다. 반응형 디자인이나 간격조정에 가장 효과적이기 때문이다. (뭔가 div로 계속 감싸줘야한다는 단점은 있는듯하다;)div class="detail-basic"> div class..