JPEG, PNG, SVG
차이점 사용 알아보기 :D
Lossless: 무손실 압축
Direct color: 다양한 색상 포함
Indexed Color: 지정된 색만
Losy: 손실 압축
1. JPEG (Lossy Direct)
손실이 있지만 육안으로 보는 차이는 거의 없고 , JPEG를 2차 3차 편집하면 뭉개지는 현상 발생할 수 있음 !
Lossy but small
2. PNG
PNG(Portable Network Graphics)
무손실 압축 포맷
투명 백그라운드
Lossless
3. SVG
확대 축소해도 깨지지 않고 선명 Vector 이기에
대부분의 경우 더 사이즈가 작은 편
선과 계산이 많아져서 경우에 따라서
속도저하 및 용량이 매우 커질 수 있음
로고나 플랫한 아이콘 같은데 제격 :D
Lossless / Vector
3. SVG
확대 축소해도 깨지지 않고 선명 Vector 이기에
대부분의 경우 더 사이즈가 작은 편
선과 계산이 많아져서 경우에 따라서
속도저하 및 용량이 매우 커질 수 있음
로고나 플랫한 아이콘 같은데 제격 :D
Lossless / Vector
How to
Text
1.Image 압축으로 줄일 수 있는 부분 찾아서 줄이기
Ref:
How to
Text
1.Image 압축으로 줄일 수 있는 부분 찾아서 줄이기
목차
0. What is WebComponent
1. Why? WebComponents
2. Web Components Spec
3. Example 살펴보기
What is WebComponents ?
"웹 컴포넌트는 웹 페이지와 웹 앱에 쓸 수 있는 새롭고 재사용 가능한데다, 캡슐화 할 수 있는 HTML 태그를 만들게 해주는 웹 플랫폼 API의 묶음입니다"
Why?
웹 컴포넌트 등장에 앞서
현재 프론트엔드 생태계 컴포넌트 중심 개발
FrameWork들?
이미 Components 중심 개발
WebComponents ???
56:~ 1:28
결국
date-picker/react , date-picker/vue
framework 별로 요런 것 찾지 말고
date-picker 로 만들어진애 쓰면 안되나?
어디서나 동작 가능하게 웹 표준인 웹 컴포넌트로 만듬으로써
상호운영성 을 높일 수 있다
Web Components Spec
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.
이름 규칙: -를 포함하자
주의할 점은 태그의 이름인데, Custom Elements는 특별한 이름 규칙을 필요로 한다. 쉽게 설명하면 글자 가운데 -를 하나 이상 포함해야 한다는 것이다.
W3C Custom Elements: 올바른 이름 규칙
MDN_CustomEl_example
2. shadow Dom
개발자들이 겪는 웹 어플리케이션 문제점 HTML, CSS의 Global
-
id / class 충돌
-
id가 있는 DOM은 window 객체에 할당된다
-
!important
Shdow Dom , Scope를 격리할 수 있다
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
LifeCycle 알아보기
React & Vue Life Cycle
LifeCycle Hooks
추가 정보 & 유의사항
네이티브 & 커스텀 엘리먼트 클래스를 상속하여 확장 가능
<template> 태그로도 생성 가능
`-` (Dash) 가 포함된 이름으로 지어야 하고
같은 이름의 엘리먼트를 한 번만 등록 가능하고
self-closing 엘리먼트는 허용되지 않는다
Title Text
