일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 이벤트루프
- likelion
- 반복문
- for문
- 타입스크립트
- 개발자
- react
- 배열
- 제주코딩베이스캠프
- VAR
- 네트워크
- SS
- CSS
- 리액트
- 국비지원
- JavaScript
- 화살표함수
- frontend
- 자바스크립트
- 비동기
- 멋쟁이사자처럼
- 코딩
- 내일배움카드
- Let
- useState
- array
- 프론트엔드
- 멋사
- 메소드체이닝
- 웹개발
- Today
- Total
목록비동기 3
Ch.Covelope
호출 스택, 실행 프로세스 복습 하기 호출 스택(call stack), 콜백 큐(callback queue), 이벤트 루프(event loop) 자바스크립트 코드가 실행되고 자바스크립트 엔진은 각각의 함수 호출을 호출 스택에 추가, call stack 에 푸시(push) 되고 , 실행이 완료되면 stack 에서 팝(pop)된다. 호출스택(call stack) 함수의 호출을 기록 하는 자료 구조 만약 함수가 동기적일 경우 해당 연산이 완료될 때까지 다른 모든 작업은 대기하게 된다. JS 엔진은 단일 스레드로 동작하기 때문에 한 번에 하나의 작업만 처리한다. 만약 함수가 비동기적일 경우 예를 들어 setTimeout 또는 fetch,promise 등 해당 연산은 백그라운에서 처리되는데 해당 함수들의 결과를 ..
react-query 란 React Query는 React 에서 원격 및 비동기 데이터를 관리하기 위한 라이브러리이다. API와 같은 다양한 데이터 소스에서 데이터를 더 쉽게 가져오고, 캐시하고, 동기화하고, 업데이트할 수 있는 일련의 훅 및 유틸리티를 제공한다. 설치 및 설정 NPM $ npm i @tanstack/react-query # or $ pnpm add @tanstack/react-query # or $ yarn add @tanstack/react-query CDN 설치되면 다음과 같이 컴포넌트에서 react-query를 가져와서 사용할 수 있다. import { QueryClient, QueryClientProvider, useQuery } from 'react-query'; const q..
자바스크립트에는 동기식과 비동기식이 있다. 동기식(Synchronous) 이란 단순하게 순서대로 실행되는데 1번이 실행되고 1번이 끝이 나면 2번이 실행되고 끝나면 그다음 작업들이 이런 과정으로 처리되는 것이다. 실행 순서가 보장되자만 한 번에 하나씩 처리 되기 때문에 한번에 여러 개의 작업이 불가능하다. 비동기식(Asynchronous) 이란 동기식과 다르게 먼저 실행된 작업이 끝날 때까지 기다리지 않고 다음작업을 시작할 수 있다. 한 번에 여러 일을 처리 할수 있다. 한번에 여러 가지 작업을 처리할 수 있지만 작업 순서가 보장되지 않는다. JavaScript 는 동기식 언어이다? 자바스크립트는 단일 스레드(싱글) 이다 . 메인 스레드인 이벤트 루프가 싱글 스레드 이기 때문이다. 하지만 이벤트 루프만 ..