JS Essential (3)

안녕하세요! 공대남입니다!

오늘도 이어 JS 을 배워 볼게요

• 이벤트 버블링과 이벤트 캡처링
  • 버블링은 하위 요소를 클릭했을 때 하위 요소부터 상위 요소까지 이벤트가 전파되는 것을 말했다면, 캡처링은 하위 요소를 클릭했을 때 상위 요소부터 하위 요소까지 이벤트가 전파되는 것을 말합니다.
• 트랜지션

서서히 색 변함

#color {
    transition-property: background-color;
    transition-duration: 3s;
}

• 콜백

콜백 함수 (Callback Function) 란 함수 안에서 실행되는 함수

콜백은 비동기 동작에서 매우 유용하게 사용됩니다.

function appendHello(callback) {
	let hello = document.createElement('p');
	hello.innerText = '안녕하세요'
	setTimeout(() => {
		document.body.append(hello);
		callback(); // 위 비동기 동작을 하고 나면 내가 원하는 콜백함수를 수행
	}, 2000);
}

appendHello(function() {
  console.log(document.getElementsByTagName('p'));
});

• Promise

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000);
});

promise.then(result => {
  alert(`${result} 가공 중..`);
	throw new Error('에러 발생');
}).catch(error => {
  alert(error);
});

// async , await
async function getPosts() {
    let response = await fetch('<https://jsonplaceholder.typicode.com/posts>');
    let data = await response.json();
    console.log(data)
    return data
}

💡 async 만 단독으로 사용하는 경우는 많지 않고, await 와 함께 사용해서 함수 내부에서 프로미스 객체를 처리하고자 할때 이 문법을 사용하게 됩니다. (ex. 백엔드 혹은 API 서버와의 통신을 처리할 때)