Task Queue는 Web APIs에서 특정한 이벤트가 발생했을때, 우리가 등록한 콜백 함수를 넣어두는 영역이다. 그럼 Microtask Queue는 무엇일까? 🤔 Microtask Queue는 흔히 쓰는 promise에 등록된 콜백함수가 쌓이는 영역이다. 즉 promise가 다 수행이...
Continue reading...JavaScript
브라우저 런타임 환경 – Event Loop
자바스크립트로 할 수 있는건 너무 한정적이다. 하지만 웹 APIs 를 이용하여 다양한 것들을 할 수 있다 ! 웹 APIs 는 브라우저에서 제공하는 API이기 때문에 브라우저의 멀티쓰레딩을 이용해서 다양한 일들을 동시에 실행할...
Continue reading...Process / Thread
✏️ Process 운영체제 위에서 연속적으로 실행되고 있는 프로그램 사진 뷰어 프로그램 / 음악 프로그램 등 각각이 프로세스 메모리 위에서 서로 독립적으로 실행 독립적으로 실행되기때문에 프로세스 하나에 문제가 생긴다고해서, 다른 프로세스에 영향이...
Continue reading...Class & Callback
위의 기본적인 클래서 생성 코드에서 counter 가 5가 될때마다 알려주고싶으면 어떻게 처리를 할까 ? 위와 같이 처리하면 Counter 클래스 자체에서 리턴하는 값을 조절하기 때문에, coolCounter (Object)를 쓰는사람은 다른 문구를 출력하거나 다른...
Continue reading...this 바인딩
this 라는 것은 어떤 클래스 안에 있는 함수를 다른 함수의 콜백으로 전달할때는 그 함수가 포함되어져있는 클래스의 정보가 사라지기 때문에 바인딩이 필요하다. arrow function이 없었을 때는 bind 를 많이 썼다. arrow function을...
Continue reading...Event Prevent & Event delegation
Event Prevent Event Delegation 버블링업 되는 것을 이용하여 delegation(이벤트 위임)을 해보자 ✏️ 클릭되었을때 노란으로 바뀌는 코드를 작성해보자. 보통 li태그들을 다 querySelectorAll()로 가져와서 각 엘리멘트에 이벤트 리스너를 붙이는데, bubbling을 이용하여 ul 하나에만...
Continue reading...Capturing & Bubbling
Capturing 과 Bubbling 상기 코드에서 버튼을 클릭하면, 부모의 이벤트까지 모두 호출되는걸 확인할 수 있다. 이는 bubbling up이 되는 것이다. 버블링을 막는 방법 ? 🚫 위와 같이 버블링이 일어나지않도록 처리할 수 있다....
Continue reading...Events & Break point
Events 개념 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events 기본적으로 이벤트 핸들러를 등록할 수 있는 요소는 EventTarget 를 상속하는 모든 요소이다. 즉 모든 엘리멘트에 이벤트를 등록할 수 있다. Events 종류 https://developer.mozilla.org/en-US/docs/Web/Events 강제 이벤트 발생 특정 이벤트가 가지고...
Continue reading...ES6 Arrow function, 함수 선언 & 네이밍 룰
들어가기전에 잠깐! 🤔 함수도 역시 Object 중 하나 이기 때문에, 함수가 생성되면 그 함수의 이름 자체는 그 함수 로직이 담겨있는 주소를 가리키고 있다. 즉 함수에 이름에는 reference가 들어있고, 그 주소에 함수의...
Continue reading...‘use strict’ 를 쓰는 이유
일반적으로 js 파일을 작성시, 맨 위에 ‘use strict’ 를 선언한다. 타입스크립트를 쓸때는 전혀 고려할 필요가 없지만, 순수 바닐라 자바스크립트를 이용할때는 꼭 쓰는게 좋다. Why? 브랜든이 자바스크립트 언어를 만들때 굉장히 빨리 만들어야...
Continue reading...