DSC Ewha 모.같.코 2회 Web 주제 발표

1. DSC Ewha
김민정
Image Styling with
Web Components

2. #DeveloperStudentClubs
Custom Elements(codelab-dragdrop)와 shadow DOM(codelab-effects)을 사용해서
WebComponent를 만든다.
이것들을 결합하여 페이지로 드래그된 이미지를 조작 할 수있는 웹 사이트를 만든다.
참고 한글 사이트 https://jyami.tistory.com/37

3. #DeveloperStudentClubs
• Custom Elements를 선언하는 방법
• Component에 리스너와 핸들러를 추가하는 방법
• Custom Design을 캡슐화하기위한 Shadow Root를 만드는 방법
• 여러 응용 프로그램을 구성하여 작은 응용 프로그램을 만드는 방법
참고 한글 사이트 https://jyami.tistory.com/37

4. #DeveloperStudentClubs
1. Custom Element 만들기
Custom Element HTMLElement라는 ES6의 클래스를 상속받은 것
connectedCallback() : document의 DOM에 정의한 custom element가 맨 처음 호출되었을 때 실행
문법 > customElements.defind(DOMString, class, { extends: '[tag-name]' })

5. #DeveloperStudentClubs
1. Custom Element 만들기
<codelab-dragdrop></codelab-dragdrop>

6. #DeveloperStudentClubs
2. Drag And Drop
[이벤트를 부착하려는 element].addEventListener( ‘event 이름’ , (ev) => {
[해당 이벤트가 발생할 때 실행할 동작들]
console.log(ev);
});
const ev = new CustomEvent('image', params);

7. #DeveloperStudentClubs
<codelab-dragdrop></codelab-dragdrop>
2. Drag And Drop
eventListener : dragover
eventListener : drop -> _getfile()
_getfile() : ’image’ event emit

8. #DeveloperStudentClubs
3. Connecting Element
https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_shadow_DOM
Shadow DOM: DOM안에 있는 새로운 DOM

9. #DeveloperStudentClubs
<codelab-dragdrop id=“dragdrop” />
3. Connecting Element
<codelab-effects id =“effects”/>
ㄴ<canvas>
ㄴ<table>
ㄴ<tr><td><input>
eventListener : dragover
eventListener : drop -> _getfile()
_getfile() : ’image’ event emit
set image(image) -> draw()
draw()

10. #DeveloperStudentClubs
<codelab-dragdrop id=“dragdrop” /> <codelab-effects id =“effects”/>
ㄴ<canvas>
ㄴ<a>download</a>
ㄴ<table>
ㄴ<tr><td><input>
4. Saving Images
eventListener : dragover
eventListener : drop -> _getfile()
_getfile() : ’image’ event emit
set image(image) -> draw()
draw()
<a> : eventListener : click -> download

11. #DeveloperStudentClubs
<codelab-dragdrop id=“dragdrop” />
eventListener : dragover
eventListener : drop -> _getfile()
_getfile() : ’image’ event emit
<codelab-effects id =“effects”/>
set image(image) -> draw()
draw()
<a> : eventListener : click -> download
eventListener : change -> draw()
eventListener : input -> draw()
ㄴ<canvas>
ㄴ<a>download</a>
ㄴ<table>
ㄴ<tr><td><input>
5. Control 추가