비동기 처리 # 04-cat-api-ad.html 더보기 냥냥펀치 # 결과

# 03-cat-api.html 더보기 # 출력

# 02-axios.html 더보기 Document const URL = 'https://api.thecatapi.com/v1/images/search' // 1. const promiseObj = axios({ method: 'get', url: URL }) // console.log(promiseObj) promiseObj.then((response) => { console.log(response) console.log(response.data) console.log(response.data[0].url) }) // ca..

▶ Ajax를 활용한 클라이언트 서버 간 동작

▶ Axios JavaScript에서 사용되는 HTTP 클라이언트 라이브러리 ▶ Axios 정의 클라이언트 및 서버 사이의 HTTP 요청을 만들고 응답을 처리하는 데 사용되는 자바스크립트 라이브러리 서버의 HTTP 요청과 응답을 간편하게 처리할 수 있도록 도와주는 도구 브라우저를 위한 XHR 객체 생성 간편한 API를 제공하며, Promise 기반의 비동기 요청을 처리한다 주로 웹 어플리케이션에서, 서버와 통신할 때 사용한다

▶ Ajax Asynchronous JavaScript and XML XMLHttpRequest 기술을 사용해서, 복잡하고 동적인 웹 페이지를 구성하는 프로그래밍 방식 ▶ Ajax의 정의 비동기적인 웹 어플리케이션 개발을 위한 기술 브라우저와 서버 간의 데이터를 비동기적으로 교환하는 기술 Ajax를 사용하면, 페이지 전체를 새로고침 하지 않고도 동적으로 데이터를 불러와 화면을 갱신할 수 있다. Ajax의 'x'는 XML이라는 데이터 타입을 의미하긴 한다. 하지만, 요즘에는 더 가벼운 용량과 JavaScript의 일부라는 장점 때문에 'JSON'을 많이 사용한다. ▶ Ajax의 목적 전체 페이지가 다시 로드되지 않고, HTML 페이지의 일부 DOM만 업데이트 된다 웹 페이지의 일부가 다시 로드되는 동안에도..

▶ 브라우저 환경에서의 JavaScript 비동기 처리 동작 방식 1. 모든 작업은 Call Stack (LIFO)으로 들어간 후 처리된다. 2. 오래 걸리는 작업이 Call Stack으로 들어오면 Web API로 보내 별도로 처리하도록 한다. 3. Web API에서 처리가 끝난 작업들은 곧바로 Call Stack으로 들어가지 못하고 Task Queue(FIFO)에 순서대로 들어간다. 4. Event Loop가 Call Stack이 비어있는 것을 계속 체크하고 Call Stack이 빈다면, Task Queue에서 가장 오래된 (가장 먼저 처리되어 돌아온) 작업을 Call Stack으로 보낸다. ▶ 비동기 처리 동작 요소 1. Call Stack 요청이 들어올 때마다 순차적으로 처리하는 Stack (LIF..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

▶ Single Thread 언어, JavaScript Thread란?작업을 처리할 때 실제로 작업을 수행하는 주체multi-thread라면, 업무를 수행할 수 있는 주체가 여러 개라는 의미이다. ▶ JavaScript는 한번에 여러 일을 수행할 수 없다 JavaScript는 1번에 1가지 일만 수행할 수 있는 Single Thread 언어이다. 동시에 여러 작업을 처리할 수 없다. 즉, JavaScript는 하나의 작업을 요청한 순서대로 처리할 수 밖에 없다  Q. 그러면 어떻게 Single Thread인 JavaScript가 비동기 처리를 할 수 있을까? => JavaScript Runtime ▶ JavaScript RuntimeJavaScript가 동작할 수 있는 환경 (R..

▶ Synchronous 동기 ▶ Asynchronous 비동기 프로그램의 실행 흐름이 순차적으로 진행된다. 하나의 작업이 완료된 후에 다음 작업이 실행되는 방식이다. (동시에 진행될 수 없다) 프로그램의 실행 흐름이 순차적이지 않으며, 작업이 완료되기를 기다리지 않고 다음 작업이 실행되는 방식 작업의 완료 여부를 신경쓰지 않고 동시에 다른 작업들을 수행할 수 있다. 2. 메인 작업이 모두 수행되어야 마지막 작업이 수행된다 2. Gmail에서 메일 전송을 누르면 목록 화면으로 전환되지만 실제로 메일을 보내는 작업은 병렬적으로 별도로 처리된다. 3. 함수의 작업이 완료될 때까지 기다렸다가 값을 반환해야 계속 진행할 수 있다 3. 브라우저는 먼저 처리되는 요소부터 웹페이지를 그려 나가며 처리가 오래 걸리는 ..