반응형 javascript3 [JavaScript] 비동기 처리를 위한 Promise 이번에는 데이터베이스에서 요청한 데이터를 받아 화면에 표시할 때 사용하는 Promise에 대해 공부해보겠습니다. 🔶 Promise란? Promise는 JS 비동기 처리에 사용되는 객체입니다. 주로 Get 방식을 요청할 때 사용합니다. 그렇다면 왜 사용하는 것일까요? 만약 내가 데이터를 보내달라고 요청했는데 데이터를 모두 받아오기 전에 화면에 데이터를 표시하려고 하면 오류가 발생합니다. 이때 이를 해결하기 위해 사용하는 것이 바로 Promise입니다. function getData() { // new Promise() 객체 추가 return new Promise(function(resolve, reject) { $.get('url', function(response) { // 데이터를 받으면 resolve.. 2021. 7. 29. [Web] LifeCycle of an Html Page (Html의 생명주기) 🔶 Intro html 페이지의 lifecycle은 3개의 중요한 event를 가지고 있습니다. DOMContentLoaded : Browser에서 HTML이 완전히 로드되고 DOM tree가 만들어 질 때 발생하는 이벤트 load : 문서의 모든 콘텐츠(images,script,css, etc)가 로드된 후 발생하는 이벤트 beforeunload / unload : 사용자가 페이지를 벗어날 때 일어나는 이벤트 🔶 DOMContentLoaded 위 이벤트는 onload 이벤트보다 먼저 발생합니다. 즉, DOM tree가 완성되면 바로 발생하므로 빠른 실행 속도가 필요할 때 적합합니다. 다음은 DOMContentLoaded를 이벤트를 다루는 방법들입니다. //vanilla js window.addEvent.. 2021. 7. 24. [JavaScript] 이벤트(Event) 관리 이번에는 Vanilla JS에서 Event를 어떻게 등록하고 감지하여 그 이벤트를 어떻게 다른 화면 요소에 전파하는지를 공부하여 정리하였습니다. Vanilla JS에서 이벤트를 전달하는 방식은 Event Bubbling , Event Capture, Event Delegation로 크게 3가지가 있습니다. 🔶 Vanilla JS에서 Event 사용법 Vanilla JS에서 Event를 등록하여 사용하는 방법은 아래와 같습니다. item button const btn = document.querySelector(".btn"); btn.addEventListener("click" , event=>{ console.log("doing something"); }); //addEventListener(A , B).. 2021. 7. 20. 이전 1 다음 반응형
