Who AM I???
지금까지 한 것
그 과정을 통해 배운 것
앞으로 할 것
지금까지 한 것
... 한 게 뭘까요
지금까지 한 것
... 한 게 뭘까요
늦깎이 개발자 이래 저래 방황
제가 개발자의 길을 가게 된 계기
점수 맞춰서 간 전자과
너무 재미 없다...
디자인공학 -> 인강공학, UX ->
프로젝트 위주의
창업 -> 만들 ????
프론트엔드 개발
공학 기초 +
이제 고도화 되고 있음 +
UX +
재밌겠다.
3개월 빠르게 패캠 프론트엔드 과정
나름 웹 프론트엔드 개발
화면 단 구성 , 공부는 재밌다.
물론 현실은...크로스브라우징, IE, 자잘한 수정....
인턴 취업 :ㅇ ---------->
프로그래밍의 대한 기본기가 없으니까
한계를 많이 느낌
서비스 없는 스타트업의 ... 아쉬운 스타트업에 전형중 하나를 겪음
우선 스케이트 보드를 만들어야 되는데->
자동차를 바로 만들려고 한다던지
기획이-> 산으로 계속 간다던지...
월급이 밀린다든지월급이 안나온다든지
코드스쿼드 프론트엔드 개발 과정 (7+2)
멘토링 신청 이유
프론트엔드 개발자 신입
(수습 이제 끝났네용 ㅎㅅㅎ)
과정을 통해 배운 것...
"웹 컴포넌트는 웹 페이지와 웹 앱에 쓸 수 있는
새롭고 재사용 가능한데다, 캡슐화 할 수 있는HTML 태그를 만들게 해주는
웹 플랫폼 API의 묶음입니다"
Why? Components
웹 컴포넌트 등장에 앞서
현재 프론트엔드 생태계 컴포넌트 중심 개발
FrameWork들?
이미 Components 중심 개발
결론
date-picker/react , date-picker/vue 등
framework 별로 찾지 말고
date-picker로 만들어진 애 쓰면 안되나?
framework 종속 적인 기능 없애고 -> 표준 코드로 만들어보자
어디서나 동작 가능하게 웹 표준인 웹 컴포넌트로 만듬으로써
상호운영성 을 높일 수 있다
1. Custom Elements
2. Shadow Dom
3. ES Modules
4. HTML Template
1. Custom Elements
The Custom Elements specification lays the foundation for designing and using new types of DOM elements.
1. Custom Elements
등록
1. Custom Elements
class HelloElement extends HTMLElement {
// 'name' 이라는 속성의 변화를 감시한다.
static get observedAttributes() {
return ["name"];
}
// 속성의 변화에 반응한다.
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == "name") {
this.textContent = `Hello, ${newValue}`;
}
}
}
// 새로운 엘리멘트들 정의한다.
customElements.define("hello-element", HelloElement);1. class 이름-> html element 확장하는 구조로 작성
2. 등록 customElements.define(name, consturctor, option)
1. Custom Elements
class FancyDrawer extends AppDrawer {
constructor() {
super(); // always call super() first in the constructor. This also calls the extended class' constructor.
...
}
toggleDrawer() {
// Possibly different toggle implementation?
// Use ES2015 if you need to call the parent method.
// super.toggleDrawer()
}
anotherMethod() {
...
}
}
customElements.define('fancy-app-drawer', FancyDrawer);2. 기존에 만들어논 custom-el 확장 가능
LifeCycle 알아보기
React & Vue Life Cycle
LifeCycle Hooks
class Square extends HTMLElement {
// Specify observed attributes so that
// attributeChangedCallback will work
static get observedAttributes() {
return ['c', 'l'];
}
constructor() {
// Always call super first in constructor
super();
}
connectedCallback() {
console.log('Custom square element added to page.');
updateStyle(this);
}
disconnectedCallback() {
console.log('Custom square element removed from page.');
}
adoptedCallback() {
console.log('Custom square element moved to new page.');
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('Custom square element attributes changed.');
updateStyle(this);
}
}Example 살펴보기
2. shadow Dom
개발자들이 겪는 웹 어플리케이션 문제점 HTML, CSS의 Global
-
id / class 충돌
-
id가 있는 DOM은 window 객체에 할당된다
-
!important
document.body.appendChild(document.createElement('span')).innerHTML =
"<style>div {background-color: green}</style>"
document.body.appendChild(document.createElement('span'))
.attachShadow({mode: 'open'})
.innerHTML = '<style>div { background-color: #82b74b; }</style><div>야호!</div>';
기존의 iframe으로 비슷하게 가능은 했지만 문제가 많았다.
http 요청 더 일어나고 별도의 페이지로 소비되는 리소스 , 같은 domain이 아닌 경우 접근 불가능한 이슈
Shadow DOM
Shdow Dom , Scope를 격리할 수 있다
Slot 끼워넣기
Example :D
3. ES Modules
The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way.
ES6 이전까지는, 브라우저 환경에서 사용 가능한
표준 모듈 시스템은 없었습니다
ES6부터 import, export 형태로 ESModule를 지원합니다
4. HTML Template
The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.
Example
3.정리 및 참고
개인적으로 느낀 부분은 WebComponent가
가상 Dom을 흡수하는 방향?
혹은 프레임워크들이 또 웹 컴포넌트의 좋은점들을 차용 (shadow-dom같은)
하지 않을까 싶습니다.
이제 v1인데 -> v3쯤 되면
표준인 웹 컴포넌트가 또 프레임워크들과 경쟁을 하지 않을까도 싶습니다.
FrameWork +WebCOmponents
가상DOM + ShadowDom+ CustomEl 범용성
