document.addEventListener("DOMContentLoaded", (e) => { ... ... }) Javascript를 처음 배울 때 HTML 내 body의 특정 요소를 조작하기 위해 "DOMContentLoaded" 이벤트 핸들러를 추가하고 그 안에 콜백함수로 원하는 코드를 넣는 식으로 배움. 하지만 body 내에 조작할 요소가 많아지고 코드가 길어지면 "DOMContentLoaded" 이벤트 핸들러가 길어져서 보기가 안 좋음. 이러한 문제를 해결하기 위한 방법으로... 1. 로 작성된 코드가 아닌 defer 속성은 HTML에서 나중에 입력된 스크립트가 항상 먼저 입력된 스크립트를 기다리고, 이전 스크립트가 실행되고 나서 실행됨. ② async 스크립트가 여러 개 있을 때 async..
2022.03.29 - [Javascript] - Call Stack, Queue, Event Loop javascript는 기본적으로 동기적으로 코드를 실행하기 때문에 코드 한 줄의 실행이 끝나야 다음 줄로 넘어가는 방식으로 작동함. 하지만 서버에서 대용량의 데이터를 받아오는 코드가 있을 경우, 해당 코드가 끝나기 전에는 프로그램 사용이 불가한 문제가 있으므로 하나의 일을 하면서 동시에 다른 일도 할 수 있도록 비동기적으로 코드를 실행할 필요가 생김. javascript에서 비동기적으로 작동하는 대표적인 함수에는 setTimeout(), setInterval()이 있음. 서버에서 데이터를 받아오는 fetch()나 타이머 API setTimeout(), setInterval() 등의 함수는 기본적으로 비..
JavaScript 2022. 4. 15. 21:10
document.addEventListener("DOMContentLoaded", (e) => { ... ... }) Javascript를 처음 배울 때 HTML 내 body의 특정 요소를 조작하기 위해 "DOMContentLoaded" 이벤트 핸들러를 추가하고 그 안에 콜백함수로 원하는 코드를 넣는 식으로 배움. 하지만 body 내에 조작할 요소가 많아지고 코드가 길어지면 "DOMContentLoaded" 이벤트 핸들러가 길어져서 보기가 안 좋음. 이러한 문제를 해결하기 위한 방법으로... 1. 로 작성된 코드가 아닌 defer 속성은 HTML에서 나중에 입력된 스크립트가 항상 먼저 입력된 스크립트를 기다리고, 이전 스크립트가 실행되고 나서 실행됨. ② async 스크립트가 여러 개 있을 때 async..
JavaScript 2022. 3. 29. 22:10
2022.03.29 - [Javascript] - Call Stack, Queue, Event Loop javascript는 기본적으로 동기적으로 코드를 실행하기 때문에 코드 한 줄의 실행이 끝나야 다음 줄로 넘어가는 방식으로 작동함. 하지만 서버에서 대용량의 데이터를 받아오는 코드가 있을 경우, 해당 코드가 끝나기 전에는 프로그램 사용이 불가한 문제가 있으므로 하나의 일을 하면서 동시에 다른 일도 할 수 있도록 비동기적으로 코드를 실행할 필요가 생김. javascript에서 비동기적으로 작동하는 대표적인 함수에는 setTimeout(), setInterval()이 있음. 서버에서 데이터를 받아오는 fetch()나 타이머 API setTimeout(), setInterval() 등의 함수는 기본적으로 비..