designer DK의 블로그

약 두 달 전에 시작한 개인 프로젝트인 ‘킨더서울’ 웹사이트를 드디어 오늘 배포하였다. 아직 몇가지 아쉬운 부분이 있지만 그런 부분들은 일단 배포 후 조금씩 다듬어나가보려고한다. https://kinderseoul.netlify.app/   깃허브에 올라간 파일을 넷틀리파이(netlify)로 연결해서 간단하게 배포를 진행했다. 넷틀리파이는 깃허브 데이터를 그대로 연동 배포 가능해서 굉장히 사용이 편리하다.    마지막 작업은 디자인을 css로 옮기는 작업이 대부분이었고 자잘하게 막힌 부분들도 있었지만 큰 어려움 없이 완수할 수 있었다. 사이트는 데스트탑, 태블릿, 모바일 모두 커버할 수 있는 반응형 웹사이트로 구축했다. /* ----------------미디엄 레이아웃 : 태블릿--------------..

이번 서울시 유치원 정보 사이트 프로젝트 대망의 마지막 기능 구현은 페이지네이션이었다. 페이지네이션은 목록의 양이 많아졌을 때 페이지로 정리해서 나눠담는 기능인데 이 기능의 경우 개발 초보인 나에겐 너무 어려운 기능이어서 이번 구현은 사실상 거의 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쪽에  캔버스라는 태그를 만들어주었다. 여기..

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

최근 바쁜 일들로 인해 개발프로젝트를 잠깐 못하고 있었는데 다시 슬슬 해보고싶어져서 하나 또 해보기로 결심했다. 서울시에서 운영하는 서울열린데이터광장에는 생각보다 굉장히 디테일한 오픈api정보들이 많은데 어떤 주제로 사이트를 만들어볼까~고민하면서 둘러보다보니 서울시 유치원 현황 데이터가 눈에 띄었다. 아무래도 유치원 다니는 자녀를 둔 부모 입장이어서 더 그랬을 수도... 어쨌든 이런 좋은 데이터들이 있음에도 그냥 일반적으로 검색해봤을 때 이 정보를 활용해서 서울시 유치원 정보를 쉽고 보기 편하게 정리해놓은 사이트를 찾지 못했다. 그래서 내가 한번 그런 사이트를 만들어본다면 의미가 크지 않을까 싶어서 이번 프로젝트 주제로 잡아보았다. 이번엔 사이트의 비주얼을 엄청 신경쓰거나, 특별한 기능을 돋보이게 넣어보..