Hoo_Dev

위 사진은 자바스크립트의 이벤트루프의 동작 원리를 보여주는 사진이다. 이 때 Callback Queue는 하나의 큐 처럼 보이지만 실제로는 여러 큐로 나눠져 있다. 그 중 매크로 태스크 큐와 마이크로 태스크 큐에 대해 알아보려고 한다. 콜백 큐는 위 사진과 같이 매크로 태스크 큐와 마이크로 태스크 큐로 나뉘게 되는데 나누는 기준은 함수의 종류에 따라 나뉘게 된다. Macro Task Quque setTimeoutm setInterval, setImmediate ... Micro Task Queue Primise callback, process, nextTick, queueMicrotask, await ... 함수 종류에 따라 콜백 함수들이 큐에 들어갔다면 이벤트 루프가 함수를 내보내는 우선순위는 (높음)..

클로저란? 두 개의 함수로 만들어진 환경으로 특별한 객체의 한 종류 -> 외부 함수 호출이 종료되더라도 외부 함수의 지역 변수 및 변수 스코프 객체의 체인 관계를 유지할 수 있는 구조를 클로저라고 한다. ++ 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수 https://www.youtube.com/watch?v=LL0DGc5pg7A (라매개발자 - 자바스크립트 클로저 실용적이고 쉬운 설명) 자바스크립트 클로저에 대한 이해를 하기위해 라매개발자님의 유튜브를 시청 후 정리해보았다. 우선 상황 하나를 가정하여 생각해보자 1. 어떤 변수 cnt가 있다. ..

ReduxToolKit 이란? 기존 Redux의 불편한 점을 개선하고 편하게 사용 할 수 있게 해주는 라이브러리. 흔히 RTK라고도 부른다. Redux 기본 용어 Store : 스토어는 컴포넌트의 상태를 관리하는 저장소. 프로젝트는 하나의 스토어만 가질 수 있다. Action : 스토어의 상태를 변경하기 위해서는, 액션을 생성해야 한다. 액션은 객체이며, 반드시 type을 가져야 한다. 액션 객체는 액션 생성 함수에 의해서 만들어진다. Reducer : Reducer는 현재 상태와 액션 객체를 받아 새로운 상태를 리턴하는 함수. Dispatch : Dispatch는 스토어의 내장 함수 중 하나이며, 액션 객체를 넘겨줘 상태를 업데이트 시켜주는 역할을 한다. Subscribe : 스토어의 내장 함수 중 하..

일급객체 (first class citizen) 변수에 할당(assignment)할 수 있다. 다른 함수를 인자(argument)로 전달 받는다. 다른 함수의 결과로서 리턴될 수 있다. 일급객체가 할 수 있는 것? 고차함수(Higher order function)를 만들 수 있다. 콜백(callback)을 사용할 수 있다. 그래서 고차함수(Higher order function)란? 함수를 전달인자 또는 매개변수로 받거나 함수를 리턴하는 함수 ex) Array.prototype.map, Array.prototype.filter, Array.prototype.reduce 그래서 콜백(callback)이란? 바로 실행되진 않지만 다른 함수의 입력 값으로 전달 되고, 다른 함수에 의해서 나중에 호출 되는 함수..

오늘은 항상 애매하게 알고있던 Javascript의 this에 대해 정확히 짚고 넘어가보려고 한다. 참고 - [코딩알려주는누나]개발자 면접 단골질문 자바스크립트 this this란? this는 함수가 호출될 때 결정이 된다. car라는 함수에서 this를 찍고 호출하여 값을 출력해보자. const car = { name: 'KIA', getName: function () { console.log("car get Name", this) } } car.getName() // 출력 결과 // car get Name { name: 'KIA', getName: [Function: getName] } car라는 객체가 getName 함수를 호출했기 때문에 car 객체가 this로 나타남 이번엔 car 함수를 담은 ..

JS 함수 사용 할 때 괄호가 있고 없고의 차이? 참고 - https://okky.kr/articles/408176 위 블로그의 내용을 읽어보면 ■ JavaScript ▶ 결과 : 5초 후 console창에 aaa가 5초마다 찍힙니다. ■ JavaScript ▶ 결과 : 시작과 동시에 aaa가 찍히며 더 이상 찍히지 않습니다. 라는 내용이 있다. 그에 대한 답변들을 살펴보면 setInterval(function, milliseconds, param1, param2, ...) 와 같이 setInterval은 첫번째 인자로는 함수 그 자체를 받아줘야 한다. console.log(infinite); 처럼 함수 이름 자체를 출력해보면 function infinite(){ colosle.log("aaa")} 와 ..

JavaScript 변수와 식별자 let 재할당 할 예정인 변수 선언 시 사용 변수 재선언 불가능 블록 스코프 const 재할당 할 예정이 없는 변수 선언 시 사용 변수 재선언 불가능 블록 스코프 블록 스코프 if, for, 함수 등의 중괄호 내부를 가리킴 블록 스코프를 가지는 변수는 블록 바깥에서 접근 불가능 let x = 1 if (x === 1) { let x = 2 console.log(x) // 2 } console.log(x) // 1 데이터 타입 자바스크립트의 모든 값은 특정한 데이터 타입을 가짐 (크게 원시타입, 참조타입으로 분류) 원시타입(Primitive type) 객체(object)가 아닌 기본 타입 변수에 해당 타입의 값이 담김 다른 변수에 복사할 때 실제 값이 복사됨 숫자, 문자열..