designer DK의 블로그

쇼핑몰 예제를 진행하면서 헤더나 검색창 부분이 중복 사용되면서 이전에 연구해봤던 웹컴포넌트를 사용해보기로 했다. 이전에 포스팅했던 방식으로 진행을 해보았는데 막상 실전에서 사용해보니 shadow.root로 컴포넌트에 벽을 쳐 두니 생각보다 번거로운 부분이 너무 많았다. 그래서 그냥 모두 오픈시켜서 사용해보았고 이렇게 해도 큰 탈 없이 잘 진행되었다. class HeaderComponent extends HTMLElement { constructor() { super(); } connectedCallback() { this.innerHTML = `   home 로그인 로그아웃 admin `; // 버튼 이벤트 리스너 추가 this.querySelector('#home-btn').addEventList..

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

어제 자바스크립트로 웹컴포넌트 만들어보기 테스트를 진행하고 블로그 포스팅도 올렸었는데 유튜브 채널 드림코딩의 이 영상을 보고나니 자바스크립트 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정보들이 많은데 어떤 주제로 사이트를 만들어볼까~고민하면서 둘러보다보니 서울시 유치원 현황 데이터가 눈에 띄었다. 아무래도 유치원 다니는 자녀를 둔 부모 입장이어서 더 그랬을 수도... 어쨌든 이런 좋은 데이터들이 있음에도 그냥 일반적으로 검색해봤을 때 이 정보를 활용해서 서울시 유치원 정보를 쉽고 보기 편하게 정리해놓은 사이트를 찾지 못했다. 그래서 내가 한번 그런 사이트를 만들어본다면 의미가 크지 않을까 싶어서 이번 프로젝트 주제로 잡아보았다. 이번엔 사이트의 비주얼을 엄청 신경쓰거나, 특별한 기능을 돋보이게 넣어보..