designer DK의 블로그

프로젝트 진행 전에 컴포넌트를 활용할 확률이 많을 것으로 판단되어서 미리 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..