태스크 큐와 마이크로 태스크 큐

프로미스에 대해 공부하다가, 마이크로 태스크 큐에 대해 알게되었는데 우선순위가 궁금해져 자료들을 찾아보았다. 이벤트 루프 이벤트 루프란 태스크가 들어오길 기다렸다가 콜 스택이 비어 있는 것을 확인하면 이를 콜스택으로 옮기는 자바스크립트 엔진 내부에서 끊임 없이 돌아가는 루프이다. 태스크 큐와 마이크로 태스크 큐 2개의 큐 모두 콜백함수가 들어간다는 점에서 동일하지만, 어떤 함수를 실행하여 생성된 콜백함수냐에 따라 들어가는 방향이 달라진다. 콜백함수를 태스크 큐에 넣은 함수들 setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O , UI 렌더링, 이벤트 리스너 콜백함수를 마이크로태스크 큐에 넣는 함수들 Promise, Object.observ..

[카테캠 선택강의] 정규표현식

정규표현식(RegExp, Regular Expression) 문자 검색(Search) 문자 대체(Replace) 문자 추출(Extract) 문자 검색, 문자 대체, 문자 추출을 하는 패턴이다. 생성 방법 // 생성자 // new RegExp('표현', '옵션') // new RegExp('[a-z]', 'gi') // 리터럴 // /표현/옵션 // /[a-z]/gi const str = ` 010-1234-5678 thesecon@gmail.com Hello world! https://www.omdbapi.com/?apikey=7035c60c&s=frozen The quick brown fox jumps over the lazy dog. hello@naver.com http://localhost:1234..

[카테캠 7주차] JS 기초 Events

Events 이벤트 추가 및 제거 addEventListener 대상에 이벤트 청취(Listen)을 등록한다. 대상에 지정한 이벤트가 발생했을 때 지정한 함수(Handler)가 호출된다. removeEventListener 대상에 등록했던 이벤트 청취(Listen)을 제거한다. 메모리 관리를 위해 등록한 이벤트를 제거하는 과정이 필요할 수 있다. removeEventListener를 사용하기 위해서는 핸들러를 함수로 분리하여 사용해야한다. 이벤트 객체 이벤트 객체는 대상에서 발생한 이벤트 정보를 담고 있다. event.currentTarget 이벤트가 등록된 요소를 의미한다. event.target .이벤트가 발생한 요소를 의미한다 event 객체의 프로토타입을 살펴보면 mouseEvent로 부터 상속된..

[카테캠 7주차] JS 기초 DOM

DOM DOM 이란 HTML 문서를 객체로 표현한 것으로, JS 에서 HTML을 제어할 수 있게 해준다. DOM API 는 JS 로 HTML 를 제어할 때 사용하는 메서드이다. Node vs Element 노드(Node): HTML 요소, 텍스트, 주석 등 모든 것을 의미한다. 요소(Element): HTML 요소를 의미한다. HTML 코드는 다음과 같다. childNodes 를 사용하면 해당 요소의 자식 노드를 모두 얻을 수 있다. 참고로 text 의 data가 \n 되어 있는 것은 줄바꿈을 의미한다. children 을 사용하면 하위 HTML 요소만 얻을 수 있다. console.dir 를 사용하여 [[Prototype]] 을 따라가 보면 HTML 요소가 어떠한 상속관계가 있는지 알 수 있다. Nod..

[카테캠 7주차] JS 기초 비동기

비동기 동기: 순차적으로 코드 실행 된다. 비동기: 순차적으로 코드가 실행되지 않는다. 콜백 패턴 다음 코드를 보자. 출력된 결과값은 2, 1 의 순서일 것이다. 만약 1 , 2 의 순서로 출력을 하고싶다면 어떻게 해야할까? 콜백패턴을 사용하여 원하는대로 출력을 할 수 있다. const a = (callback) => { setTimeout(()=> { console.log(1) callback() },1000) } const b = () => console.log(2) a(b) 다음 코드에서 1 , 2 ,3, 4 의 순서대로 출력이 되게 하려면 어떻게 해야할까? 다음과 같은 콜백 패턴을 사용하면 된다. 콜백패턴을 사용하는 또 다른 예시를 살펴보자. getMovies 함수는 내부에 비동기 로직이 존재한다..

[카테캠 선택강의] JS 심화학습

Symbol 변경이 불가한 데이터로, 유일한 식별자를 만들어 데이터를 보호하는 용도로 사용할 수 있습니다. const sKey = Symbol("Hello"); const user = { key: "일반 정보", [sKey]: "민감한 정보", // 대괄호 표기법 }; console.log(user.key); // "일반 정보" console.log(user["key"]); // "일반 정보" console.log(user[sKey]); // "민감한 정보" // 심볼은 유일한 식별자를 만들어 낸다. // 따라서 sKey !== Symbol("Hello") 이다. console.log(user[Symbol("Hello")]); // undefined Symbol을 사용하는 예제 const birthKey..

[카테캠 선택강의] 기타 Web APIs

콘솔 메서드의 종류 console.log 일반적인 콘솔 메세지이다. HTML 트리구조를 볼 수 있다. console.dir 객체가 어떠한 속성으로 구성되어있는지 확인할 수 있다. console.count 콘솔이 몇번 호출되었는지 카운트한다. 함수에 적용하면 해당 함수가 몇번 호출되는지 확인이 가능하다. const f = () => { console.count('호출되었습니다.') } for(let i=0; i item.includes(name)); return cookie ? cookie.split("=")[1] : null; } Storage(스토리지) 도메인 단위로 저장 5MB 제한 세션 혹은 영구 저장 가능 세션 스토리지: 브라우저 세션이 유지되는 동안에만 데이터 저장 localStorage: 따로..

실행 컨텍스트

모던 자바스크립트 딥다이브를 공부한 내용입니다. 소스코드의 평가와 실행 자바스크립트 엔진은 소스코드를 평가와 실행 과정으로 나누어 처리한다. 소스코드 평가 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록한다. 스스코드 평가 과정이 끝난 후 런타임이 실행된다.(소스코드가 순차적으로 실행된다.) 이때 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득한다. 그리고 변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트의 스코프에 등록된다. 다음과 같은 소스코드가 있다. 먼저 소스코드 평가 과정에서 변수 선언문 var x; 가 실행된다. 이때 생성된 변수 식별자 x 는 실행 컨텍스트..

[카테캠 6주차] 자바스크립트 기초

함수 함수 선언문 function hello() {} 함수 표현식 const hello = function () {} 함수선언문에서 호이스팅 함수 선언이 호출 아래에 있음에도 콘솔이 출력된다. * 호이스팅이란? 함수(변수)의 선언이 유효한 범위내에서 최상위로 끌어올리지는 것을 의미한다. 함수 표현식에서 호이스팅 함수 표현식에서는 호출 아래 선언이 있는 경우 에러를 발생시킨다. 반환 및 종료 return 키워드 뒤에 값을 지정하지 않으면 undefined가 자동으로 반환된다. 매개 변수 패턴 매개 변수에 디폴트 value 를 설정할 수 있다. user 라는 객체를 매개변수로 받아서 구조분해 하는 방법도 있지만 매개변수에서 바로 구조분해 할당하는 방법도 있다. 또한 매개변수에서 바로 구조분해하는 것에도 de..

토스트 메세지 구현중에..

문제상황 토스트 메세지가 화면에 보이는 동안 다시 토스트 메세지를 발생시킬 이벤트 핸들러가 동작된다면 현재의 토스트 메세지가 아래로 이동하고 새로운 메세지가 화면에 출력되게 하고 싶었다. 아래 영상처럼 말이다. 하지만 실제 구현했을 때는 토스트 메세지는 변경되지만 아래로 내려가는 애니메이션이 제대로 보이지 않았다. 문제 원인 문제의 원인은 isShow 가 false 로 바뀌긴하지만 동시에 true 로 업데이트 되어버려 위와 같은 원하지 않는 UI 가 발생했다. if (timeout.current) { clearTimeout(timeout.current); timeout.current = null; setMessage((prev) => ({ ...prev, isShow: false })); setMessa..