Javascript 런타임 환경에서 Event Loop는 Call Stack의 상태를 계속 확인해 Call Stack이 비었을 경우 Microtask Queue, Macrotask Queue를 확인해 가장 처음에 들어왔던 Microtask Queue의 작업부터 Call Stack으로 보냄. 1. PromisePromise 생성자에 전달된 콜백 함수인 Promise Executor는 동기적으로 실행됨. 한편, Promise Executor가 종료되고 나서 then(), catch() 메서드의 콜백함수가 바로 Microtask Queue에 추가되는 게 아님에 주의해야 함. resolve(), reject() 함수가 Promise의 상태를 바꾸고 해당 Promise에 할당된 then, catch 메서드를 실행..
2022.04.25 - [Front-End 학습/Javascript] - IndexedDB 1. IndexedDB는 비동기적으로 작동 Todo 앱에서 각 할일을 완료 체크하면 해당 할일 HTML Element를 이용해, indexedDB에서 해당 데이터를 검색한 결과를 얻으려고 함. 그렇게 하기 위해 아래와 같이 두 함수를 만듦. // 1. index Key로 DB를 탐색해 결과를 반환하는 함수 function findTaskDB(indexKey, indexValue) { let transaction = db.transaction(["task"], "readwrite"); let taskObjectStore = transaction.objectStore("task"); let indexSearchRequ..
.modal-bg {/* modal 반투명 배경 */ display: none; } .modal {/* modal 창 */ display: none; } modal 창을 만들 때 평상시에는 modal창과 반투명 배경이 보이지 않도록 하기 위해 CSS 속성으로 display: none을 넣는 게 일반적. 하지만 나타남, 사라짐 애니메이션을 넣으려고 하면 display 속성은 애니메이션이 가능한 속성이 아닌데다가, display: none는 transition의 처음 상태가 없으므로 transition으로 애니메이션 효과를 줄 수 없음. ※ display: none이 transition이 안 먹히는 이유 요소가 화면에 출력되기 위해 무슨 과정을 거치는지부터 생각을 해보자. 일단 HTML과 CSS를 파싱 후에..
2022.03.29 - [Javascript] - Call Stack, Queue, Event Loop javascript는 기본적으로 동기적으로 코드를 실행하기 때문에 코드 한 줄의 실행이 끝나야 다음 줄로 넘어가는 방식으로 작동함. 하지만 서버에서 대용량의 데이터를 받아오는 코드가 있을 경우, 해당 코드가 끝나기 전에는 프로그램 사용이 불가한 문제가 있으므로 하나의 일을 하면서 동시에 다른 일도 할 수 있도록 비동기적으로 코드를 실행할 필요가 생김. javascript에서 비동기적으로 작동하는 대표적인 함수에는 setTimeout(), setInterval()이 있음. 서버에서 데이터를 받아오는 fetch()나 타이머 API setTimeout(), setInterval() 등의 함수는 기본적으로 비..
JavaScript 2022. 10. 22. 17:13
Javascript 런타임 환경에서 Event Loop는 Call Stack의 상태를 계속 확인해 Call Stack이 비었을 경우 Microtask Queue, Macrotask Queue를 확인해 가장 처음에 들어왔던 Microtask Queue의 작업부터 Call Stack으로 보냄. 1. PromisePromise 생성자에 전달된 콜백 함수인 Promise Executor는 동기적으로 실행됨. 한편, Promise Executor가 종료되고 나서 then(), catch() 메서드의 콜백함수가 바로 Microtask Queue에 추가되는 게 아님에 주의해야 함. resolve(), reject() 함수가 Promise의 상태를 바꾸고 해당 Promise에 할당된 then, catch 메서드를 실행..
JavaScript 2022. 5. 1. 19:53
2022.04.25 - [Front-End 학습/Javascript] - IndexedDB 1. IndexedDB는 비동기적으로 작동 Todo 앱에서 각 할일을 완료 체크하면 해당 할일 HTML Element를 이용해, indexedDB에서 해당 데이터를 검색한 결과를 얻으려고 함. 그렇게 하기 위해 아래와 같이 두 함수를 만듦. // 1. index Key로 DB를 탐색해 결과를 반환하는 함수 function findTaskDB(indexKey, indexValue) { let transaction = db.transaction(["task"], "readwrite"); let taskObjectStore = transaction.objectStore("task"); let indexSearchRequ..
웹페이지 예제 2022. 4. 11. 21:09
.modal-bg {/* modal 반투명 배경 */ display: none; } .modal {/* modal 창 */ display: none; } modal 창을 만들 때 평상시에는 modal창과 반투명 배경이 보이지 않도록 하기 위해 CSS 속성으로 display: none을 넣는 게 일반적. 하지만 나타남, 사라짐 애니메이션을 넣으려고 하면 display 속성은 애니메이션이 가능한 속성이 아닌데다가, display: none는 transition의 처음 상태가 없으므로 transition으로 애니메이션 효과를 줄 수 없음. ※ display: none이 transition이 안 먹히는 이유 요소가 화면에 출력되기 위해 무슨 과정을 거치는지부터 생각을 해보자. 일단 HTML과 CSS를 파싱 후에..
JavaScript 2022. 3. 29. 22:10
2022.03.29 - [Javascript] - Call Stack, Queue, Event Loop javascript는 기본적으로 동기적으로 코드를 실행하기 때문에 코드 한 줄의 실행이 끝나야 다음 줄로 넘어가는 방식으로 작동함. 하지만 서버에서 대용량의 데이터를 받아오는 코드가 있을 경우, 해당 코드가 끝나기 전에는 프로그램 사용이 불가한 문제가 있으므로 하나의 일을 하면서 동시에 다른 일도 할 수 있도록 비동기적으로 코드를 실행할 필요가 생김. javascript에서 비동기적으로 작동하는 대표적인 함수에는 setTimeout(), setInterval()이 있음. 서버에서 데이터를 받아오는 fetch()나 타이머 API setTimeout(), setInterval() 등의 함수는 기본적으로 비..