내가 만든 webcomponent 사이에, 사용자 html tag가 customizing 되어 적용되게 하는 방법을 알아보자. 2021.08.15 - [Web] - Web Component publish 공개 하기 Web Component publish 공개 하기 2021.08.14 - [Web] - Web component (Custom Elements, Shadow DOM, Template) 2021.08.14 - [Web] - Web Components Callback Methods & lifecycle 앞서서 Web Component를 만드는 방법에 대해서 알아 보았다... enumclass.tistory.com Slot이 필요한 이유는? 앞서 작성한 html의 Component 사용 형상은 아래..

2021.08.14 - [Web] - Web component (Custom Elements, Shadow DOM, Template) 2021.08.14 - [Web] - Web Components Callback Methods & lifecycle 앞서서 Web Component를 만드는 방법에 대해서 알아 보았다. 간단한 Web Component를 만들고 공개하는 방법에 대해서 알아보자. Profile information Component Design Component 명은 profile-info이고 이름, 소속, 사번, 이미지, 그리고 고용형태를 표현한다. 고용형태는 ft = fulltime, pt = parttime, ct ? 로 나누어서 색을 바꿈으로써 표현을 달리한다. web componen..

web component에 대해서는 아래 내용을 먼저 읽고 오자. 2021.08.14 - [Web] - Web component (Custom Elements, Shadow DOM, Template) connectedCallback() component가 DOM에 추가 되면 가장먼저 불리워지는 method이다. 해당 Component에 event가 bind 되어야 한다면 가급적 여기에서 모든 event를 bind 해줘야 한다. 앞서 만들어 놓은 helloworld 컴포넌트에 아래와 같이 callback method를 override 해보자. class HelloWorld extends HTMLElement { constructor(){ super(); const $template = document.qu..

html의 Web component 사용은 이미 몇년이 지난 이야기이긴 하지만, 정리를 위해서 이곳에 관련 이야기를 담고자 한다. 여기 나오는 내용은 "Getting Started with Components"를 공부하면서 정리한 내용 들이다. https://www.packtpub.com/product/getting-started-with-web-components/9781838649234 해당 서적의 주요 코드는 다음에 위치해 있다. https://github.com/PacktPublishing/Getting-Started-with-Web-Components Custom elements html tag 자체를 만들고 browser 사용할 수 있도록 만들어 주는 것 1. HTMLElement를 상속하는 ..

Spring 프로젝트 진행 중에 다음과 같은 오류가 발생 하였다. Unable to find method 'org.gradle.api.tasks.SourceSet.getCompileConfigurationName()Ljava/lang/String;'. Possible causes for this unexpected error include: Gradle's dependency cache may be corrupt (this sometimes occurs after a network connection timeout.) Re-download dependencies and sync project (requires network) The state of a Gradle build process (daemon)..

webstorm 프로젝트 생성 File > New > Project > Empty 프로젝트 생성이후 아래 위치로 들어가서 settings>Language&Frameworks>Node.js and NPM 아래와 같은 node 설정을 해준다 사용 node version 정보 nodejs version : 6.16.0 npm version : 3.10.10 npm module install webpack webpack-cli lodash 상위 세팅이 완료된 이후 npm init 실행을 통해서 package.json을 생성해 준다 이후 기본 webpack 구조를 다음과 같이 만들어 준다 webpack project 기본 구조 webpack-demo |- package.json + |- /src + |- inde..

전제 nodejs 설치 완료 npm 설치 완료 Npm module Vue-lib : sudo npm install -g @vue/cli Nvm install vue를 써야하는데 nodejs 버전 때문에 문제가 된다면 아래 nvm을 사용 하는게 좋다(?). https://github.com/nvm-sh/nvm 아래는 mac을 기준으로 처리한 내용인데, 주의 할 것은 .bash_profile이 존재하는 곳에서 아래 행위를 해야한다. 시작하기전에 cd ~ 로 홈으로 오자. 만약에 .bash_profile이 없다면 touch .bash_profile로 만들어 주기만 해도 된다. stevenucBookPro:~ steven$ curl -o- https://raw.githubusercontent.com/nvm-sh..

Object.assign Javascript의 Object를 Merge 하는 방법 중에 가장 많이 사용되는 것은 Object.assign을 사용하는 것이다. 기본 사용법은 다음과 같다. Object.assign(target, ...sources) target : Merge 당할 대상 객체 source : Merge의 대상 객체에게 주입을 할 오브젝트 기본 사용법 var obj1 = {name : 'hi', val: 1}; var obj2 = {name : 'hello', val: 2}; var newObj = Object.assign(obj1, obj2); console.log(obj1); console.log(newObj); obj1.name = 'modified&#..