Web APIs

element.attachShadow({ mode: 'open' });

constructor(){
	super()
	const shadowRoot = this.attachShadow({ mode: 'open' });
	shadowRoot.innerHTML = `
		<style>
			:host{color:#000}
			:host(.class){color:#000}
		</style>
	`
}

class myPopup extends HTMLElement{
	connectedCallback(){
		this.innerHTML = `<div>팝업!</div>`
	}
}
customElements.define('my-popup', myPopup);

// Or 익명 클래스 (anonymous class)
customElements.define('my-popup', class extends HTMLElement {
	connectedCallback(){
		this.innerHTML = `<div>팝업!</div>`
	}
});

// Or Shadow DOM 사용자 정의 요소
customElements.define('my-popup', class extends HTMLElement {
	constructor(){
		super();
		
		const shadowRoot = this.attachShadow({ mode: 'open' });
		shadowRoot.innerHTML = `<div>팝업!</div>`
	}
})

<my-popup></my-popup>

define(name, constructor, options) // CustomElementRegistry method

constructor(){
	super();
}
// Or Shadow DOM 생성
constructor(){
	super();
	this.attachShadow({ mode: 'open' });
}

const isMobile = /iPhone|iPad|iPod|Android|BlackBerry|Windows CE/i.test(navigator.userAgent)

const reqAni = () => {
	const currentLeft = parseFloat(~.style.left) || 0
	~.style.left = currentLeft + 10 + 'px'

	if (currentLeft < 300) {
		requestAnimationFrame(reqAni)
		// return 시에도 멈춤
	}
}
reqAni()

const setInt = setInterval(()=>{
	const currentLeft = parseFloat(~.style.left) || 0;
	~.style.left = currentLeft + 10 + 'px';

	if(currentLeft > 300){
		clearInterval(setInt);
	}
}, 16) // 16ms씩 무조건 실행

function setCookie(name, value, setExpires) {
	const numericDays = Number(setExpires) || 0;
	const expireDate = new Date();
	expireDate.setDate(expireDate.getDate() + numericDays);
	document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; expires=${expireDate.toUTCString()}; path=/; SameSite=Lax; Secure`;
}
setCookie('cookieName', 'cookieValue', 7)

function getCookie(name){
	const escapedName = encodeURIComponent(name).replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1');
  const nameMatche = document.cookie.match(new RegExp(
    "(?:^|; )" + escapedName + "=([^;]*)"
  ));
  return nameMatche ? decodeURIComponent(nameMatche[1]) : null;
}

function deleteCookie(name){
	const initDate = "Thu, 01 Jan 1970 00:00:00 GMT"
	document.cookie = `${encodeURIComponent(name)}=; expires=${initDate}; path=/; SameSite=Lax; Secure`
}

function succeess(coords) {
	coords.latitude     //위도
	coords.longitude    //경도
}
navigator.geolocation.getCurrentPosition(success, error, [options]);

element.getAnimations()

element.getAnimations().map(ani => ani.playbackRate = 0.5)

const resizeObserver = new ResizeObserver(entries => {
	entries.forEach(entry => {
		...entry.contentRect.width
	});
});
resizeObserver.observe(Observe Element);

const observers = []; // new IntersectionObserver 들 저장 관리, 해제(disconnect) 안할 시 메모리 누수
const observeContent = ()=>{
	const options = {
		root: null,
		rootMargin: `0px 0px 0px 0px`,
		threshold: 0.5
	}
	const observer = new IntersectionObserver(entries =>{
		entries.forEach(entry =>{
			if(entry.isIntersecting){
				...
			}
		})
	}, options)
	observer.observe(Observe Element)
	observers.push(observer)
}
const disconnectObserveContent = ()=>{
	observers.forEach(observer => observer.disconnect());
	observers.length = 0; // 기존 배열 (const observers) 유지하면서 내용만 삭제하고 싶을 때
}

new Promise(executor)

const myPromise = new Promise((resolve, reject) =>{
	resolve(value)
	//or
	reject("에러")
})

myPromise
	.then(data => data)
	.catch(error => console.error(error))
	.finally(()=> 작업종료)

async function handlePromise(){
	try{
		const data = await myPromise;

	}catch(error){
		console.error(error)

	}finally{
		작업종료
	}
}

//Promise 중 reject 있을 때
//Promise.all(Promise array)
PromiseState: "rejected"
PromiseResult: 거부 사유

//Promise.allSettled(Promise array)
PromiseState: "fulfilled",
PromiseResult: [{status: 'fulfilled', value: Array...}, {status: 'rejected', reason: 거부 사유}]