# microtask
[CS] Event Loop
✅ 스레드 Javascript는 Single Thread 메인스레드인 이벤트 루프가 싱글 스레드(일꾼 한 명 - 순차실행)이다. Node는 Multi Thread 멀티쓰레드(일꾼 여러명 - 병행실행) 환경에서 실행된다. 스레드 >✌️ 스레드(Thread)는 쉽게 말해 CPU의 일꾼! => 하지만, 실제로는 CPU가 일을 하여 결과는 CPU혼자 일한다. 차이점 >✌️ 멀티스레드 => 동시에 처리하는 것으로 보이지만, 하나씩 조금씩 일을 하고 다른 스레드로 넘어가는 것이다. => 컨텍스트 스위칭(Context Switching)한다고 한다. ✌️ 싱글스레드 => 싱글 스레드는 각개격파로 하나 잘 못 걸리면 뒤에 것이 중단이 된다. => 싱글 스레드는 적은양의 함수들을 많이 반복하는 것이 좋다. ✅ 이벤트 루프 Memory Heap & Call Stack >✌️ Memory Heap에 있는 사용자가 작성한 코드들은 Call S
Nodejs: process.nextTick:: microtask
node 내장 함수 실행 순서 > process.nextTick && Promise 마이크로 태스트(microtask) 부름 마이크로태스크 큐가 별도로 존재함 process.nextTick 콜백 도는 resolve된 Promise 콜백은 다른 이벤트 루프에서 대기하는 태스크 큐 콜백함수 보다도 먼저 실행됩니다. setImmediate보다 process.nextTick을 더 선호하기도 함. 마이크로태스크를 재귀 호출하게되면 이벤트 루프는 태스크 큐의 다른 콜백함수보다 마이크로태스크를 우선해 처리하므로 다른 콜백함수들이 실행되지 않을 수 있음. 
TIL: Asynchronous, MicroTask, Race Condition, Dead-Lock
Synchronous & Asynchronous 이름 때문에 매번 헷갈리는 동기와 비동기. 대체 어떤게 동시에 일어난다는 걸까? '요청과 결과가 동시에 일어나는 것'이 바로 동기(Synchronous)이다. 그렇다면 비동기는? 요청과 결과가 동시에 일어나지 않는 것이다. 'call setTimeout' 이 실행하자마자 'after setTimeout'이 호출되지 않았다. 이것이 바로 비동기이다. 그런데 이상한 점을 발견했다. pending 상태의 Promise는 즉각적으로 실행되어야 할 것 같은데 그렇지 않았다. 이는 마이크로태스크라는 개념과 연관된다. MicroTask 비동기 작업을 처리하려면 적절한 관리가 필요한데, 이를 위해 ECMA에선 PromiseJobs 라는 내부 큐가 별도로 존재한다. V8에서는 이를 '마이크로태스크 큐(microtask queue)' 라는 용어로 부른다. 큐.. 큐라니? 내가 아는 건 스택이랑 힙 뿐이었는데 마이크로태스크 큐란 건
Promise 및 (Micro)Task 등의 비동기는 만능이 아니다
오늘은 프론트엔드 초보들이 주로 실수하는 패턴을 통해 왜 비동기에서 이렇게 하면 안되는지 설명하는 시간을 갖도록 하겠다. 길게 설명하기 귀찮으니 자세히 알고싶으면 용어를 검색해서 찾아서 배우도록. 흔한 예시 가장 많이 하는 실수로, 비동기로 대량 반복문 처리 시 비동기에 맡기는 게 아닌, 그냥 이런 식으로 단순한 반복문을 짜기도 한다. 자, 예시에서는 대량의 CSV 파일을 단순히 테이블에다 넣는데, 만약 CSV 라인 수가 십만줄을 넘는다 치자. 과연 이게 부드럽게 작동할까? 결론부터 말하겠다. 브라우저 뻗는다. 즉, 아무리 비동기라 해도 지금 반복해서 CSV 나누는 것부터가 이미 비동기는 아니게 되어 멈칫하는 브라우저를 볼 수 있다. 초보들은 Promise 나 그 떨거지들 안에다가 for loop을 많이 걸어도 비동기가 돌아갈 것이라는 실수를 저지르는데, 절대 그러지 말도록 하자. 이는 MicroTask 를 공부했다면 충분히 이해갈 설명인데, Mic
코드캠프 FE 29일차 - TIL(카카오지도,싱글페이지어플리케이션,콜백함수,프로미스,태스크큐의 종류)
📔 학습목표 지도 연동 >> Map 싱글 페이지 어플리케이션? >> SPA-CSR /MPA-SSR 콜백함수? >> callback/callback-Hell 프로미스? >> Promise / Promise-Chain 태스크큐의 종류 >> MacroTask/MicroTask Map 구글 네이버 카카오 각각 비용이 다르다 서비스 기획에 따라 다르다 네이버, 카카오, 구굴, 페북 개발자 사이트 -> 자사 서비스들을 api로 제공 { {} } 중괄호 안에 중괄호 넣는 이유? 변수로 넣ㄴ을 수 있는데 변수를 선언하기 귀찮으니까! 
29) 벌써 한달이 됐다구요
React 카카오 맵 API 그런데 버튼을 클릭해서 페이지를 이동한 뒤 카카오맵이 출력되도록 하면 오류가 나게 된다 Router를 사용하지 않고 html의 a 태그를 사용하면 오류가 안나고 잘 작동됨 어떤 차이가 있는거지???? router를 이용하는 경우 SPA(single page application) > spa에서는 서비스에 처음 접속할 때 모든 페이지의 데이터를 다 받아온다 그리고 router를 통해 페이지를 이동할 때, 실제로는 페이지의 일부에 해당하는 컴포넌트만 교체한 뒤 페이지를 다시 그려오게 된다
Event loop 와 Task queue 동작 이해하기
본 글에서는, event loop 와 task queue 의 내부적인 동작과 순서에 대해서 설명합니다. event loop 와 task queue 에 대해서 기본적인 지식을 어느정도 익힌 뒤, 읽는것을 추천합니다. > 이해가 덜된 부분에, 개인적인 의견이 포함된 추측이 일부 포함되어 있습니다. 실제 동작이 아닌 부분이 포함되어 있을 수 있으니, 유의하여 필터링해서 보시기를 바랍니다. JS의 실행 환경 - Node.js / Browser Node.js 는 libuv 로 이벤트 루프 기반 비동기 I/O 를 처리한다. (단일 스레드 기반의 이벤트 루프) Browser 도 마찬가지로, 이벤트 루프 기반 비동기 I/O 를 처리한다. (뭐 쓰는지는 안찾아봄) Node.js/Browser 는 V8 자바스크립트 엔진을 사용한다. (콜스택, 힙) JS 코드 실행 중, setTimeout 같은 친구들은 이벤트 루프를 통해서 스케쥴링 및 실행된