designer DK의 블로그

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

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

회사 업무나 개인 개발 프로젝트를 장소에 구애받지않고 진행해보고자 맥북에어를 질렀다. 아주 오래전 2006년쯤? 흰둥이 맥북을 산 이후 거의 18년만에 다시 사보는 맥북이다. (흰둥이는 골동품으로 아직도 보관 중) 원래 윈도우즈 신봉자이고 아직도 더 좋아하긴하지만 최근 회사에서 맥을 사용해보면서 안정성과 좋은 면모들을 많이 발견해서 한번 다시 써봐도 좋겠다~라고 판단되었다. 애플 제품들은 사용해보면 묘하게 기분좋은 면들을 발견하게 되는데 곰곰히 생각해보면 소프트웨어 ui ux보단 하드웨어의 매력이 훨씬 큰 것 같다. 개인적으로 애플의 소프트웨어 ui ux는 사용자를 많이 배려한다고 생각하진 않는다. os전반적으로 글자도 매우 작은 편이며 아이콘도 누르기 힘들정도로 작다. 그 외에도 불친절한 면들이 많다...

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

웹컴포넌트 활용 테스트를 마치고 본 프로젝트인 '서울시 유치원 정보 사이트 프로젝트'에 착수하려고한다. 기획에 앞서 혹시 내가 해보려고하는 유치원 정보 조회 사이트가 있는지 검색해보았는데 역시나 있었다... 이 방대한 api 자료를 가지고도 그걸 활용한 사이트가 없는게 이상하다고 생각되긴 했다만;; 내가 최초를 못찍었다는 부분에서 좀 아쉽긴 했다. 더군다나 거의 같은 api 정보를 활용해서 만들어서 그런지 내가 구상했던 사이트 구조와 거의 일치했다 ㅜㅜ  이런 부분들이 아쉽긴 했지만 그래도 만들어보는게 의미있다고 판단해서 실행해보기로 했다. 어차피 지금 제작의 목적은 반짝이는 기획력을 보여주려는 목적이라기보단 나의 개발력을 향상하려는 목적이 가장 크기 때문에 유사한 사이트가 하나 더 나온다고해서 크게 문..

어제 자바스크립트로 웹컴포넌트 만들어보기 테스트를 진행하고 블로그 포스팅도 올렸었는데 유튜브 채널 드림코딩의 이 영상을 보고나니 자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object)https://www.youtube.com/watch?v=_DLhUBWsRtw머릿속에 아주 어렴풋하게만 떠오르던 class의 개념이 좀 더 명확하게 정립되었고 그게 정립된 후에 어제 테스트해보았던 이 코드를 보니까 class CustomInput extends HTMLElement {    constructor() {        super();        this.attachShadow({ mode: 'open' });                const template = document.getEl..

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

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

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

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