175 lines (85 loc) · 5.79 KB

JavaScript Asynchronous

I. AJAX

AJAX (Asynchronous JavaScript And XML)

비동기식 JavaScript와 XML
서버와 통신하기 위해 XMLHttpRequest 객체를 활용
JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음

I - 1. AJAX 특징

페이지 전체를 reload(새로고침)를 하지 않고서도 수행되는 비동기성
- 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음
AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌
- 페이지 새로고침 없이 서버에 요청
- 서버로부터 데이터를 받고 작업을 수행

I - 2. XMLHttpRequest 객체

서버와 상호작용하기 위해 사용되며 전체 페이지의 새로고침 없이 데이터를 받아올 수 있음
사용자의 작업을 방해하지 않으면서 페이지 일부를 업데이트 할 수 있음
주로 AJAX 프로그래밍에 사용
이름과 달리 XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있음
생성자
- XMLHttpRequest()

예시

II. Asynchronous JavaScript

II - 1. 동기식

순차적, 직렬적 Task 수행
요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐(blocking)

예시

버튼 클릭 후 alert 메시지의 확인 버튼을 누를 때까지 문장이 만들어지지 않음
즉, alert 이후의 코드는 alert의 처리가 끝날 때까지 실행되지 않음
왜 이런 현상이 발생할까?
JavaScript는 single threaded

II - 2. 비동기식

병렬적 Task 수행
요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐(non-blocking)

예시

요청을 보내고 응답을 기다리지 않고 다음 코드가 실행됨
결과적으로 변수 todo에는 응답 데이터가 할당되지 않고 빈 문자열이 출력
그렇다면 JS는 왜 기다려주지 않는 방식으로 동작하는가?
JavaScript는 single threaded

II - 3. 왜 비동기(Asynchronous)를 사용하는가?

"사용자 경험"
- 매우 큰 데이터를 동반하는 앱이 있다고 가정
- 동기식 코드라면 데이터를 모두 불러온 뒤 앱이 실행됨
  - 즉, 데이터를 모두 불러올 때 까지는 앱이 모두 멈춘 것처럼 보임
  - 코드 실행을 차단하여 화면이 멈추고 응답하지 않는 것 같은 사용자 경험을 제공
- 비동기식 코드라면 데이터를 요청하고 응답 받는 동안, 앱 실행을 함께 진행함
  - 데이터를 불러오는 동안 지속적으로 응답하는 화면을 보여줌으로써 더욱 쾌적한 사용자 경험을 제공
- 때문에 많은 웹 API 기능은 현재 비동기 코드를 사용하여 실행됨

※ Threads(스레드)

프로그램이 작업을 완료하기 위해 사용할 수 있는 단일 프로세스
각 thread(스레드)는 한 번에 하나의 작업만 수행할 수 있음
ex) Task A -> Task B -> Task C
- 다음 작업을 시작하려면 반드시 앞의 작업이 완료되어야함
- 컴퓨터 CPU는 여러 코어를 가지고 있기 때문에 한 번에 여러 가지 일을 처리할 수 있음

II - 4. Blocking VS Non-Blocking

"JavaScript는 single threaded 이다."

컴퓨터가 여러 개의 CPU를 가지고 있어도 main thread라 불리는 단일 스레드에서만 작업 수행
즉, 이벤트를 처리하는 Call Stack이 하나인 언어라는 의미
이 문제를 해결하기 위해 JavaScript는
- 즉시 처리하지 못하는 이벤트들을 다른 곳(Web API)으로 보내서 처리하도록 하고,
- 처리된 이벤트들은 처리된 순서대로 대기실(Task queue)에 줄을 세워 놓고
- Call Stack이 비면 담당자(Event Loop)가 대기 줄에서 가장 오래된(제일 앞의) 이벤트를 Call Stack으로 보냄

III . Concurrency model

Event loop를 기반으로 하는 동시성 모델(Concurrency model)

III - 1. CallStack

요청이 들어올 때마다 해당 요청을 순차적으로 처리하는 Stack(LIFO) 형태의 자료 구조

III - 2. WebAPI(Browser API)

JavaScript 엔진이 아닌 브라우저 영역에서 제공하는 API
setTimeout(), DOM events 그리고 AJAX로 데이터를 가져오는 시간이 소요되는 일들을 처리

III - 3. Task Queue (Event Queue, Message Queue)

비동기 처리된 callback 함수가 대기하는 Queue(FIFO) 형태의 자료 구조
main thread가 끝난 후 실행되어 후속 JavaScript 코드가 차단되는 것을 방지

III - 4. Event Loop

Call Stack이 비어 있는지 확인
비어 있는 경우 Task Queue에서 실행 대기 중인 callback 함수가 있는지 확인
Task Queue에 대기 중인 callback 함수가 있다면 가장 앞에 있는 callback 함수를 Call Stack으로 push

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all \u003cpre\u003e\u003ccode\u003e blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks"); } } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); } })(); (function(){ try { var __m = "github.com"; var __re = new RegExp('^' + "github\\.com" + '

History

175 lines (85 loc) · 5.79 KB

Raw

JavaScript Asynchronous

I. AJAX

AJAX (Asynchronous JavaScript And XML)

비동기식 JavaScript와 XML
서버와 통신하기 위해 XMLHttpRequest 객체를 활용
JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음

I - 1. AJAX 특징

페이지 전체를 reload(새로고침)를 하지 않고서도 수행되는 비동기성
- 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음
AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌
- 페이지 새로고침 없이 서버에 요청
- 서버로부터 데이터를 받고 작업을 수행

I - 2. XMLHttpRequest 객체

서버와 상호작용하기 위해 사용되며 전체 페이지의 새로고침 없이 데이터를 받아올 수 있음
사용자의 작업을 방해하지 않으면서 페이지 일부를 업데이트 할 수 있음
주로 AJAX 프로그래밍에 사용
이름과 달리 XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있음
생성자
- XMLHttpRequest()

예시

II. Asynchronous JavaScript

II - 1. 동기식

순차적, 직렬적 Task 수행
요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐(blocking)

예시

버튼 클릭 후 alert 메시지의 확인 버튼을 누를 때까지 문장이 만들어지지 않음
즉, alert 이후의 코드는 alert의 처리가 끝날 때까지 실행되지 않음
왜 이런 현상이 발생할까?
JavaScript는 single threaded

II - 2. 비동기식

병렬적 Task 수행
요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐(non-blocking)

예시

요청을 보내고 응답을 기다리지 않고 다음 코드가 실행됨
결과적으로 변수 todo에는 응답 데이터가 할당되지 않고 빈 문자열이 출력
그렇다면 JS는 왜 기다려주지 않는 방식으로 동작하는가?
JavaScript는 single threaded

II - 3. 왜 비동기(Asynchronous)를 사용하는가?

"사용자 경험"
- 매우 큰 데이터를 동반하는 앱이 있다고 가정
- 동기식 코드라면 데이터를 모두 불러온 뒤 앱이 실행됨
  - 즉, 데이터를 모두 불러올 때 까지는 앱이 모두 멈춘 것처럼 보임
  - 코드 실행을 차단하여 화면이 멈추고 응답하지 않는 것 같은 사용자 경험을 제공
- 비동기식 코드라면 데이터를 요청하고 응답 받는 동안, 앱 실행을 함께 진행함
  - 데이터를 불러오는 동안 지속적으로 응답하는 화면을 보여줌으로써 더욱 쾌적한 사용자 경험을 제공
- 때문에 많은 웹 API 기능은 현재 비동기 코드를 사용하여 실행됨

※ Threads(스레드)

프로그램이 작업을 완료하기 위해 사용할 수 있는 단일 프로세스
각 thread(스레드)는 한 번에 하나의 작업만 수행할 수 있음
ex) Task A -> Task B -> Task C
- 다음 작업을 시작하려면 반드시 앞의 작업이 완료되어야함
- 컴퓨터 CPU는 여러 코어를 가지고 있기 때문에 한 번에 여러 가지 일을 처리할 수 있음

II - 4. Blocking VS Non-Blocking

"JavaScript는 single threaded 이다."

컴퓨터가 여러 개의 CPU를 가지고 있어도 main thread라 불리는 단일 스레드에서만 작업 수행
즉, 이벤트를 처리하는 Call Stack이 하나인 언어라는 의미
이 문제를 해결하기 위해 JavaScript는
- 즉시 처리하지 못하는 이벤트들을 다른 곳(Web API)으로 보내서 처리하도록 하고,
- 처리된 이벤트들은 처리된 순서대로 대기실(Task queue)에 줄을 세워 놓고
- Call Stack이 비면 담당자(Event Loop)가 대기 줄에서 가장 오래된(제일 앞의) 이벤트를 Call Stack으로 보냄

III . Concurrency model

Event loop를 기반으로 하는 동시성 모델(Concurrency model)

III - 1. CallStack

요청이 들어올 때마다 해당 요청을 순차적으로 처리하는 Stack(LIFO) 형태의 자료 구조

III - 2. WebAPI(Browser API)

JavaScript 엔진이 아닌 브라우저 영역에서 제공하는 API
setTimeout(), DOM events 그리고 AJAX로 데이터를 가져오는 시간이 소요되는 일들을 처리

III - 3. Task Queue (Event Queue, Message Queue)

비동기 처리된 callback 함수가 대기하는 Queue(FIFO) 형태의 자료 구조
main thread가 끝난 후 실행되어 후속 JavaScript 코드가 차단되는 것을 방지

III - 4. Event Loop

Call Stack이 비어 있는지 확인
비어 있는 경우 Task Queue에서 실행 대기 중인 callback 함수가 있는지 확인
Task Queue에 대기 중인 callback 함수가 있다면 가장 앞에 있는 callback 함수를 Call Stack으로 push

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '

History

175 lines (85 loc) · 5.79 KB

Raw

JavaScript Asynchronous

I. AJAX

AJAX (Asynchronous JavaScript And XML)

비동기식 JavaScript와 XML
서버와 통신하기 위해 XMLHttpRequest 객체를 활용
JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음

I - 1. AJAX 특징

페이지 전체를 reload(새로고침)를 하지 않고서도 수행되는 비동기성
- 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음
AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌
- 페이지 새로고침 없이 서버에 요청
- 서버로부터 데이터를 받고 작업을 수행

I - 2. XMLHttpRequest 객체

서버와 상호작용하기 위해 사용되며 전체 페이지의 새로고침 없이 데이터를 받아올 수 있음
사용자의 작업을 방해하지 않으면서 페이지 일부를 업데이트 할 수 있음
주로 AJAX 프로그래밍에 사용
이름과 달리 XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있음
생성자
- XMLHttpRequest()

예시

II. Asynchronous JavaScript

II - 1. 동기식

순차적, 직렬적 Task 수행
요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐(blocking)

예시

버튼 클릭 후 alert 메시지의 확인 버튼을 누를 때까지 문장이 만들어지지 않음
즉, alert 이후의 코드는 alert의 처리가 끝날 때까지 실행되지 않음
왜 이런 현상이 발생할까?
JavaScript는 single threaded

II - 2. 비동기식

병렬적 Task 수행
요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐(non-blocking)

예시

요청을 보내고 응답을 기다리지 않고 다음 코드가 실행됨
결과적으로 변수 todo에는 응답 데이터가 할당되지 않고 빈 문자열이 출력
그렇다면 JS는 왜 기다려주지 않는 방식으로 동작하는가?
JavaScript는 single threaded

II - 3. 왜 비동기(Asynchronous)를 사용하는가?

"사용자 경험"
- 매우 큰 데이터를 동반하는 앱이 있다고 가정
- 동기식 코드라면 데이터를 모두 불러온 뒤 앱이 실행됨
  - 즉, 데이터를 모두 불러올 때 까지는 앱이 모두 멈춘 것처럼 보임
  - 코드 실행을 차단하여 화면이 멈추고 응답하지 않는 것 같은 사용자 경험을 제공
- 비동기식 코드라면 데이터를 요청하고 응답 받는 동안, 앱 실행을 함께 진행함
  - 데이터를 불러오는 동안 지속적으로 응답하는 화면을 보여줌으로써 더욱 쾌적한 사용자 경험을 제공
- 때문에 많은 웹 API 기능은 현재 비동기 코드를 사용하여 실행됨

※ Threads(스레드)

프로그램이 작업을 완료하기 위해 사용할 수 있는 단일 프로세스
각 thread(스레드)는 한 번에 하나의 작업만 수행할 수 있음
ex) Task A -> Task B -> Task C
- 다음 작업을 시작하려면 반드시 앞의 작업이 완료되어야함
- 컴퓨터 CPU는 여러 코어를 가지고 있기 때문에 한 번에 여러 가지 일을 처리할 수 있음

II - 4. Blocking VS Non-Blocking

"JavaScript는 single threaded 이다."

컴퓨터가 여러 개의 CPU를 가지고 있어도 main thread라 불리는 단일 스레드에서만 작업 수행
즉, 이벤트를 처리하는 Call Stack이 하나인 언어라는 의미
이 문제를 해결하기 위해 JavaScript는
- 즉시 처리하지 못하는 이벤트들을 다른 곳(Web API)으로 보내서 처리하도록 하고,
- 처리된 이벤트들은 처리된 순서대로 대기실(Task queue)에 줄을 세워 놓고
- Call Stack이 비면 담당자(Event Loop)가 대기 줄에서 가장 오래된(제일 앞의) 이벤트를 Call Stack으로 보냄

III . Concurrency model

Event loop를 기반으로 하는 동시성 모델(Concurrency model)

III - 1. CallStack

요청이 들어올 때마다 해당 요청을 순차적으로 처리하는 Stack(LIFO) 형태의 자료 구조

III - 2. WebAPI(Browser API)

JavaScript 엔진이 아닌 브라우저 영역에서 제공하는 API
setTimeout(), DOM events 그리고 AJAX로 데이터를 가져오는 시간이 소요되는 일들을 처리

III - 3. Task Queue (Event Queue, Message Queue)

비동기 처리된 callback 함수가 대기하는 Queue(FIFO) 형태의 자료 구조
main thread가 끝난 후 실행되어 후속 JavaScript 코드가 차단되는 것을 방지

III - 4. Event Loop

Call Stack이 비어 있는지 확인
비어 있는 경우 Task Queue에서 실행 대기 중인 callback 함수가 있는지 확인
Task Queue에 대기 중인 callback 함수가 있다면 가장 앞에 있는 callback 함수를 Call Stack으로 push

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length \u003e 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '

History

175 lines (85 loc) · 5.79 KB

Raw

JavaScript Asynchronous

I. AJAX

AJAX (Asynchronous JavaScript And XML)

비동기식 JavaScript와 XML
서버와 통신하기 위해 XMLHttpRequest 객체를 활용
JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음

I - 1. AJAX 특징

페이지 전체를 reload(새로고침)를 하지 않고서도 수행되는 비동기성
- 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음
AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌
- 페이지 새로고침 없이 서버에 요청
- 서버로부터 데이터를 받고 작업을 수행

I - 2. XMLHttpRequest 객체

서버와 상호작용하기 위해 사용되며 전체 페이지의 새로고침 없이 데이터를 받아올 수 있음
사용자의 작업을 방해하지 않으면서 페이지 일부를 업데이트 할 수 있음
주로 AJAX 프로그래밍에 사용
이름과 달리 XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있음
생성자
- XMLHttpRequest()

예시

II. Asynchronous JavaScript

II - 1. 동기식

순차적, 직렬적 Task 수행
요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐(blocking)

예시

버튼 클릭 후 alert 메시지의 확인 버튼을 누를 때까지 문장이 만들어지지 않음
즉, alert 이후의 코드는 alert의 처리가 끝날 때까지 실행되지 않음
왜 이런 현상이 발생할까?
JavaScript는 single threaded

II - 2. 비동기식

병렬적 Task 수행
요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐(non-blocking)

예시

요청을 보내고 응답을 기다리지 않고 다음 코드가 실행됨
결과적으로 변수 todo에는 응답 데이터가 할당되지 않고 빈 문자열이 출력
그렇다면 JS는 왜 기다려주지 않는 방식으로 동작하는가?
JavaScript는 single threaded

II - 3. 왜 비동기(Asynchronous)를 사용하는가?

"사용자 경험"
- 매우 큰 데이터를 동반하는 앱이 있다고 가정
- 동기식 코드라면 데이터를 모두 불러온 뒤 앱이 실행됨
  - 즉, 데이터를 모두 불러올 때 까지는 앱이 모두 멈춘 것처럼 보임
  - 코드 실행을 차단하여 화면이 멈추고 응답하지 않는 것 같은 사용자 경험을 제공
- 비동기식 코드라면 데이터를 요청하고 응답 받는 동안, 앱 실행을 함께 진행함
  - 데이터를 불러오는 동안 지속적으로 응답하는 화면을 보여줌으로써 더욱 쾌적한 사용자 경험을 제공
- 때문에 많은 웹 API 기능은 현재 비동기 코드를 사용하여 실행됨

※ Threads(스레드)

프로그램이 작업을 완료하기 위해 사용할 수 있는 단일 프로세스
각 thread(스레드)는 한 번에 하나의 작업만 수행할 수 있음
ex) Task A -> Task B -> Task C
- 다음 작업을 시작하려면 반드시 앞의 작업이 완료되어야함
- 컴퓨터 CPU는 여러 코어를 가지고 있기 때문에 한 번에 여러 가지 일을 처리할 수 있음

II - 4. Blocking VS Non-Blocking

"JavaScript는 single threaded 이다."

컴퓨터가 여러 개의 CPU를 가지고 있어도 main thread라 불리는 단일 스레드에서만 작업 수행
즉, 이벤트를 처리하는 Call Stack이 하나인 언어라는 의미
이 문제를 해결하기 위해 JavaScript는
- 즉시 처리하지 못하는 이벤트들을 다른 곳(Web API)으로 보내서 처리하도록 하고,
- 처리된 이벤트들은 처리된 순서대로 대기실(Task queue)에 줄을 세워 놓고
- Call Stack이 비면 담당자(Event Loop)가 대기 줄에서 가장 오래된(제일 앞의) 이벤트를 Call Stack으로 보냄

III . Concurrency model

Event loop를 기반으로 하는 동시성 모델(Concurrency model)

III - 1. CallStack

요청이 들어올 때마다 해당 요청을 순차적으로 처리하는 Stack(LIFO) 형태의 자료 구조

III - 2. WebAPI(Browser API)

JavaScript 엔진이 아닌 브라우저 영역에서 제공하는 API
setTimeout(), DOM events 그리고 AJAX로 데이터를 가져오는 시간이 소요되는 일들을 처리

III - 3. Task Queue (Event Queue, Message Queue)

비동기 처리된 callback 함수가 대기하는 Queue(FIFO) 형태의 자료 구조
main thread가 끝난 후 실행되어 후속 JavaScript 코드가 차단되는 것을 방지

III - 4. Event Loop

Call Stack이 비어 있는지 확인
비어 있는 경우 Task Queue에서 실행 대기 중인 callback 함수가 있는지 확인
Task Queue에 대기 중인 callback 함수가 있다면 가장 앞에 있는 callback 함수를 Call Stack으로 push

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '

History

175 lines (85 loc) · 5.79 KB

Raw

JavaScript Asynchronous

I. AJAX

AJAX (Asynchronous JavaScript And XML)

비동기식 JavaScript와 XML
서버와 통신하기 위해 XMLHttpRequest 객체를 활용
JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음

I - 1. AJAX 특징

페이지 전체를 reload(새로고침)를 하지 않고서도 수행되는 비동기성
- 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음
AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌
- 페이지 새로고침 없이 서버에 요청
- 서버로부터 데이터를 받고 작업을 수행

I - 2. XMLHttpRequest 객체

서버와 상호작용하기 위해 사용되며 전체 페이지의 새로고침 없이 데이터를 받아올 수 있음
사용자의 작업을 방해하지 않으면서 페이지 일부를 업데이트 할 수 있음
주로 AJAX 프로그래밍에 사용
이름과 달리 XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있음
생성자
- XMLHttpRequest()

예시

II. Asynchronous JavaScript

II - 1. 동기식

순차적, 직렬적 Task 수행
요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐(blocking)

예시

버튼 클릭 후 alert 메시지의 확인 버튼을 누를 때까지 문장이 만들어지지 않음
즉, alert 이후의 코드는 alert의 처리가 끝날 때까지 실행되지 않음
왜 이런 현상이 발생할까?
JavaScript는 single threaded

II - 2. 비동기식

병렬적 Task 수행
요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐(non-blocking)

예시

요청을 보내고 응답을 기다리지 않고 다음 코드가 실행됨
결과적으로 변수 todo에는 응답 데이터가 할당되지 않고 빈 문자열이 출력
그렇다면 JS는 왜 기다려주지 않는 방식으로 동작하는가?
JavaScript는 single threaded

II - 3. 왜 비동기(Asynchronous)를 사용하는가?

"사용자 경험"
- 매우 큰 데이터를 동반하는 앱이 있다고 가정
- 동기식 코드라면 데이터를 모두 불러온 뒤 앱이 실행됨
  - 즉, 데이터를 모두 불러올 때 까지는 앱이 모두 멈춘 것처럼 보임
  - 코드 실행을 차단하여 화면이 멈추고 응답하지 않는 것 같은 사용자 경험을 제공
- 비동기식 코드라면 데이터를 요청하고 응답 받는 동안, 앱 실행을 함께 진행함
  - 데이터를 불러오는 동안 지속적으로 응답하는 화면을 보여줌으로써 더욱 쾌적한 사용자 경험을 제공
- 때문에 많은 웹 API 기능은 현재 비동기 코드를 사용하여 실행됨

※ Threads(스레드)

프로그램이 작업을 완료하기 위해 사용할 수 있는 단일 프로세스
각 thread(스레드)는 한 번에 하나의 작업만 수행할 수 있음
ex) Task A -> Task B -> Task C
- 다음 작업을 시작하려면 반드시 앞의 작업이 완료되어야함
- 컴퓨터 CPU는 여러 코어를 가지고 있기 때문에 한 번에 여러 가지 일을 처리할 수 있음

II - 4. Blocking VS Non-Blocking

"JavaScript는 single threaded 이다."

컴퓨터가 여러 개의 CPU를 가지고 있어도 main thread라 불리는 단일 스레드에서만 작업 수행
즉, 이벤트를 처리하는 Call Stack이 하나인 언어라는 의미
이 문제를 해결하기 위해 JavaScript는
- 즉시 처리하지 못하는 이벤트들을 다른 곳(Web API)으로 보내서 처리하도록 하고,
- 처리된 이벤트들은 처리된 순서대로 대기실(Task queue)에 줄을 세워 놓고
- Call Stack이 비면 담당자(Event Loop)가 대기 줄에서 가장 오래된(제일 앞의) 이벤트를 Call Stack으로 보냄

III . Concurrency model

Event loop를 기반으로 하는 동시성 모델(Concurrency model)

III - 1. CallStack

요청이 들어올 때마다 해당 요청을 순차적으로 처리하는 Stack(LIFO) 형태의 자료 구조

III - 2. WebAPI(Browser API)

JavaScript 엔진이 아닌 브라우저 영역에서 제공하는 API
setTimeout(), DOM events 그리고 AJAX로 데이터를 가져오는 시간이 소요되는 일들을 처리

III - 3. Task Queue (Event Queue, Message Queue)

비동기 처리된 callback 함수가 대기하는 Queue(FIFO) 형태의 자료 구조
main thread가 끝난 후 실행되어 후속 JavaScript 코드가 차단되는 것을 방지

III - 4. Event Loop

Call Stack이 비어 있는지 확인
비어 있는 경우 Task Queue에서 실행 대기 중인 callback 함수가 있는지 확인
Task Queue에 대기 중인 callback 함수가 있다면 가장 앞에 있는 callback 함수를 Call Stack으로 push

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '

History

175 lines (85 loc) · 5.79 KB

Raw

JavaScript Asynchronous

I. AJAX

AJAX (Asynchronous JavaScript And XML)

비동기식 JavaScript와 XML
서버와 통신하기 위해 XMLHttpRequest 객체를 활용
JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음

I - 1. AJAX 특징

페이지 전체를 reload(새로고침)를 하지 않고서도 수행되는 비동기성
- 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음
AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌
- 페이지 새로고침 없이 서버에 요청
- 서버로부터 데이터를 받고 작업을 수행

I - 2. XMLHttpRequest 객체

서버와 상호작용하기 위해 사용되며 전체 페이지의 새로고침 없이 데이터를 받아올 수 있음
사용자의 작업을 방해하지 않으면서 페이지 일부를 업데이트 할 수 있음
주로 AJAX 프로그래밍에 사용
이름과 달리 XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있음
생성자
- XMLHttpRequest()

예시

II. Asynchronous JavaScript

II - 1. 동기식

순차적, 직렬적 Task 수행
요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐(blocking)

예시

버튼 클릭 후 alert 메시지의 확인 버튼을 누를 때까지 문장이 만들어지지 않음
즉, alert 이후의 코드는 alert의 처리가 끝날 때까지 실행되지 않음
왜 이런 현상이 발생할까?
JavaScript는 single threaded

II - 2. 비동기식

병렬적 Task 수행
요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐(non-blocking)

예시

요청을 보내고 응답을 기다리지 않고 다음 코드가 실행됨
결과적으로 변수 todo에는 응답 데이터가 할당되지 않고 빈 문자열이 출력
그렇다면 JS는 왜 기다려주지 않는 방식으로 동작하는가?
JavaScript는 single threaded

II - 3. 왜 비동기(Asynchronous)를 사용하는가?

"사용자 경험"
- 매우 큰 데이터를 동반하는 앱이 있다고 가정
- 동기식 코드라면 데이터를 모두 불러온 뒤 앱이 실행됨
  - 즉, 데이터를 모두 불러올 때 까지는 앱이 모두 멈춘 것처럼 보임
  - 코드 실행을 차단하여 화면이 멈추고 응답하지 않는 것 같은 사용자 경험을 제공
- 비동기식 코드라면 데이터를 요청하고 응답 받는 동안, 앱 실행을 함께 진행함
  - 데이터를 불러오는 동안 지속적으로 응답하는 화면을 보여줌으로써 더욱 쾌적한 사용자 경험을 제공
- 때문에 많은 웹 API 기능은 현재 비동기 코드를 사용하여 실행됨

※ Threads(스레드)

프로그램이 작업을 완료하기 위해 사용할 수 있는 단일 프로세스
각 thread(스레드)는 한 번에 하나의 작업만 수행할 수 있음
ex) Task A -> Task B -> Task C
- 다음 작업을 시작하려면 반드시 앞의 작업이 완료되어야함
- 컴퓨터 CPU는 여러 코어를 가지고 있기 때문에 한 번에 여러 가지 일을 처리할 수 있음

II - 4. Blocking VS Non-Blocking

"JavaScript는 single threaded 이다."

컴퓨터가 여러 개의 CPU를 가지고 있어도 main thread라 불리는 단일 스레드에서만 작업 수행
즉, 이벤트를 처리하는 Call Stack이 하나인 언어라는 의미
이 문제를 해결하기 위해 JavaScript는
- 즉시 처리하지 못하는 이벤트들을 다른 곳(Web API)으로 보내서 처리하도록 하고,
- 처리된 이벤트들은 처리된 순서대로 대기실(Task queue)에 줄을 세워 놓고
- Call Stack이 비면 담당자(Event Loop)가 대기 줄에서 가장 오래된(제일 앞의) 이벤트를 Call Stack으로 보냄

III . Concurrency model

Event loop를 기반으로 하는 동시성 모델(Concurrency model)

III - 1. CallStack

요청이 들어올 때마다 해당 요청을 순차적으로 처리하는 Stack(LIFO) 형태의 자료 구조

III - 2. WebAPI(Browser API)

JavaScript 엔진이 아닌 브라우저 영역에서 제공하는 API
setTimeout(), DOM events 그리고 AJAX로 데이터를 가져오는 시간이 소요되는 일들을 처리

III - 3. Task Queue (Event Queue, Message Queue)

비동기 처리된 callback 함수가 대기하는 Queue(FIFO) 형태의 자료 구조
main thread가 끝난 후 실행되어 후속 JavaScript 코드가 차단되는 것을 방지

III - 4. Event Loop

Call Stack이 비어 있는지 확인
비어 있는 경우 Task Queue에서 실행 대기 중인 callback 함수가 있는지 확인
Task Queue에 대기 중인 callback 함수가 있다면 가장 앞에 있는 callback 함수를 Call Stack으로 push

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '

History

175 lines (85 loc) · 5.79 KB

Raw

JavaScript Asynchronous

I. AJAX

AJAX (Asynchronous JavaScript And XML)

비동기식 JavaScript와 XML
서버와 통신하기 위해 XMLHttpRequest 객체를 활용
JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음

I - 1. AJAX 특징

페이지 전체를 reload(새로고침)를 하지 않고서도 수행되는 비동기성
- 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음
AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌
- 페이지 새로고침 없이 서버에 요청
- 서버로부터 데이터를 받고 작업을 수행

I - 2. XMLHttpRequest 객체

서버와 상호작용하기 위해 사용되며 전체 페이지의 새로고침 없이 데이터를 받아올 수 있음
사용자의 작업을 방해하지 않으면서 페이지 일부를 업데이트 할 수 있음
주로 AJAX 프로그래밍에 사용
이름과 달리 XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있음
생성자
- XMLHttpRequest()

예시

II. Asynchronous JavaScript

II - 1. 동기식

순차적, 직렬적 Task 수행
요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐(blocking)

예시

버튼 클릭 후 alert 메시지의 확인 버튼을 누를 때까지 문장이 만들어지지 않음
즉, alert 이후의 코드는 alert의 처리가 끝날 때까지 실행되지 않음
왜 이런 현상이 발생할까?
JavaScript는 single threaded

II - 2. 비동기식

병렬적 Task 수행
요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐(non-blocking)

예시

요청을 보내고 응답을 기다리지 않고 다음 코드가 실행됨
결과적으로 변수 todo에는 응답 데이터가 할당되지 않고 빈 문자열이 출력
그렇다면 JS는 왜 기다려주지 않는 방식으로 동작하는가?
JavaScript는 single threaded

II - 3. 왜 비동기(Asynchronous)를 사용하는가?

"사용자 경험"
- 매우 큰 데이터를 동반하는 앱이 있다고 가정
- 동기식 코드라면 데이터를 모두 불러온 뒤 앱이 실행됨
  - 즉, 데이터를 모두 불러올 때 까지는 앱이 모두 멈춘 것처럼 보임
  - 코드 실행을 차단하여 화면이 멈추고 응답하지 않는 것 같은 사용자 경험을 제공
- 비동기식 코드라면 데이터를 요청하고 응답 받는 동안, 앱 실행을 함께 진행함
  - 데이터를 불러오는 동안 지속적으로 응답하는 화면을 보여줌으로써 더욱 쾌적한 사용자 경험을 제공
- 때문에 많은 웹 API 기능은 현재 비동기 코드를 사용하여 실행됨

※ Threads(스레드)

프로그램이 작업을 완료하기 위해 사용할 수 있는 단일 프로세스
각 thread(스레드)는 한 번에 하나의 작업만 수행할 수 있음
ex) Task A -> Task B -> Task C
- 다음 작업을 시작하려면 반드시 앞의 작업이 완료되어야함
- 컴퓨터 CPU는 여러 코어를 가지고 있기 때문에 한 번에 여러 가지 일을 처리할 수 있음

II - 4. Blocking VS Non-Blocking

"JavaScript는 single threaded 이다."

컴퓨터가 여러 개의 CPU를 가지고 있어도 main thread라 불리는 단일 스레드에서만 작업 수행
즉, 이벤트를 처리하는 Call Stack이 하나인 언어라는 의미
이 문제를 해결하기 위해 JavaScript는
- 즉시 처리하지 못하는 이벤트들을 다른 곳(Web API)으로 보내서 처리하도록 하고,
- 처리된 이벤트들은 처리된 순서대로 대기실(Task queue)에 줄을 세워 놓고
- Call Stack이 비면 담당자(Event Loop)가 대기 줄에서 가장 오래된(제일 앞의) 이벤트를 Call Stack으로 보냄

III . Concurrency model

Event loop를 기반으로 하는 동시성 모델(Concurrency model)

III - 1. CallStack

요청이 들어올 때마다 해당 요청을 순차적으로 처리하는 Stack(LIFO) 형태의 자료 구조

III - 2. WebAPI(Browser API)

JavaScript 엔진이 아닌 브라우저 영역에서 제공하는 API
setTimeout(), DOM events 그리고 AJAX로 데이터를 가져오는 시간이 소요되는 일들을 처리

III - 3. Task Queue (Event Queue, Message Queue)

비동기 처리된 callback 함수가 대기하는 Queue(FIFO) 형태의 자료 구조
main thread가 끝난 후 실행되어 후속 JavaScript 코드가 차단되는 것을 방지

III - 4. Event Loop

Call Stack이 비어 있는지 확인
비어 있는 경우 Task Queue에서 실행 대기 중인 callback 함수가 있는지 확인
Task Queue에 대기 중인 callback 함수가 있다면 가장 앞에 있는 callback 함수를 Call Stack으로 push

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();

History

175 lines (85 loc) · 5.79 KB

Raw

JavaScript Asynchronous

I. AJAX

AJAX (Asynchronous JavaScript And XML)

비동기식 JavaScript와 XML
서버와 통신하기 위해 XMLHttpRequest 객체를 활용
JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음

I - 1. AJAX 특징

페이지 전체를 reload(새로고침)를 하지 않고서도 수행되는 비동기성
- 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음
AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌
- 페이지 새로고침 없이 서버에 요청
- 서버로부터 데이터를 받고 작업을 수행

I - 2. XMLHttpRequest 객체

서버와 상호작용하기 위해 사용되며 전체 페이지의 새로고침 없이 데이터를 받아올 수 있음
사용자의 작업을 방해하지 않으면서 페이지 일부를 업데이트 할 수 있음
주로 AJAX 프로그래밍에 사용
이름과 달리 XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있음
생성자
- XMLHttpRequest()

예시

II. Asynchronous JavaScript

II - 1. 동기식

순차적, 직렬적 Task 수행
요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐(blocking)

예시

버튼 클릭 후 alert 메시지의 확인 버튼을 누를 때까지 문장이 만들어지지 않음
즉, alert 이후의 코드는 alert의 처리가 끝날 때까지 실행되지 않음
왜 이런 현상이 발생할까?
JavaScript는 single threaded

II - 2. 비동기식

병렬적 Task 수행
요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐(non-blocking)

예시

요청을 보내고 응답을 기다리지 않고 다음 코드가 실행됨
결과적으로 변수 todo에는 응답 데이터가 할당되지 않고 빈 문자열이 출력
그렇다면 JS는 왜 기다려주지 않는 방식으로 동작하는가?
JavaScript는 single threaded

II - 3. 왜 비동기(Asynchronous)를 사용하는가?

"사용자 경험"
- 매우 큰 데이터를 동반하는 앱이 있다고 가정
- 동기식 코드라면 데이터를 모두 불러온 뒤 앱이 실행됨
  - 즉, 데이터를 모두 불러올 때 까지는 앱이 모두 멈춘 것처럼 보임
  - 코드 실행을 차단하여 화면이 멈추고 응답하지 않는 것 같은 사용자 경험을 제공
- 비동기식 코드라면 데이터를 요청하고 응답 받는 동안, 앱 실행을 함께 진행함
  - 데이터를 불러오는 동안 지속적으로 응답하는 화면을 보여줌으로써 더욱 쾌적한 사용자 경험을 제공
- 때문에 많은 웹 API 기능은 현재 비동기 코드를 사용하여 실행됨

※ Threads(스레드)

프로그램이 작업을 완료하기 위해 사용할 수 있는 단일 프로세스
각 thread(스레드)는 한 번에 하나의 작업만 수행할 수 있음
ex) Task A -> Task B -> Task C
- 다음 작업을 시작하려면 반드시 앞의 작업이 완료되어야함
- 컴퓨터 CPU는 여러 코어를 가지고 있기 때문에 한 번에 여러 가지 일을 처리할 수 있음

II - 4. Blocking VS Non-Blocking

"JavaScript는 single threaded 이다."

컴퓨터가 여러 개의 CPU를 가지고 있어도 main thread라 불리는 단일 스레드에서만 작업 수행
즉, 이벤트를 처리하는 Call Stack이 하나인 언어라는 의미
이 문제를 해결하기 위해 JavaScript는
- 즉시 처리하지 못하는 이벤트들을 다른 곳(Web API)으로 보내서 처리하도록 하고,
- 처리된 이벤트들은 처리된 순서대로 대기실(Task queue)에 줄을 세워 놓고
- Call Stack이 비면 담당자(Event Loop)가 대기 줄에서 가장 오래된(제일 앞의) 이벤트를 Call Stack으로 보냄

III . Concurrency model

Event loop를 기반으로 하는 동시성 모델(Concurrency model)

III - 1. CallStack

요청이 들어올 때마다 해당 요청을 순차적으로 처리하는 Stack(LIFO) 형태의 자료 구조

III - 2. WebAPI(Browser API)

JavaScript 엔진이 아닌 브라우저 영역에서 제공하는 API
setTimeout(), DOM events 그리고 AJAX로 데이터를 가져오는 시간이 소요되는 일들을 처리

III - 3. Task Queue (Event Queue, Message Queue)

비동기 처리된 callback 함수가 대기하는 Queue(FIFO) 형태의 자료 구조
main thread가 끝난 후 실행되어 후속 JavaScript 코드가 차단되는 것을 방지

III - 4. Event Loop

Call Stack이 비어 있는지 확인
비어 있는 경우 Task Queue에서 실행 대기 중인 callback 함수가 있는지 확인
Task Queue에 대기 중인 callback 함수가 있다면 가장 앞에 있는 callback 함수를 Call Stack으로 push

FilesExpand file tree

JavaScript_Asynchronous.md

Latest commit

History

JavaScript_Asynchronous.md

File metadata and controls

JavaScript Asynchronous

I. AJAX

I - 1. AJAX 특징

I - 2. XMLHttpRequest 객체

II. Asynchronous JavaScript

II - 1. 동기식

II - 2. 비동기식

II - 3. 왜 비동기(Asynchronous)를 사용하는가?

※ Threads(스레드)

II - 4. Blocking VS Non-Blocking

III . Concurrency model

III - 1. CallStack

III - 2. WebAPI(Browser API)

III - 3. Task Queue (Event Queue, Message Queue)

III - 4. Event Loop

FilesExpand file tree

JavaScript_Asynchronous.md

Latest commit

History

JavaScript_Asynchronous.md

File metadata and controls

JavaScript Asynchronous

I. AJAX

I - 1. AJAX 특징

I - 2. XMLHttpRequest 객체

II. Asynchronous JavaScript

II - 1. 동기식

II - 2. 비동기식

II - 3. 왜 비동기(Asynchronous)를 사용하는가?

※ Threads(스레드)

II - 4. Blocking VS Non-Blocking

III . Concurrency model

III - 1. CallStack

III - 2. WebAPI(Browser API)

III - 3. Task Queue (Event Queue, Message Queue)

III - 4. Event Loop

FilesExpand file tree

JavaScript_Asynchronous.md

Latest commit

History

JavaScript_Asynchronous.md

File metadata and controls

JavaScript Asynchronous

I. AJAX

I - 1. AJAX 특징

I - 2. XMLHttpRequest 객체

II. Asynchronous JavaScript

II - 1. 동기식

II - 2. 비동기식

II - 3. 왜 비동기(Asynchronous)를 사용하는가?

※ Threads(스레드)

II - 4. Blocking VS Non-Blocking

III . Concurrency model

III - 1. CallStack

III - 2. WebAPI(Browser API)

III - 3. Task Queue (Event Queue, Message Queue)

III - 4. Event Loop

FilesExpand file tree

JavaScript_Asynchronous.md

Latest commit

History

JavaScript_Asynchronous.md

File metadata and controls

JavaScript Asynchronous

I. AJAX

I - 1. AJAX 특징

I - 2. XMLHttpRequest 객체

II. Asynchronous JavaScript

II - 1. 동기식

II - 2. 비동기식

II - 3. 왜 비동기(Asynchronous)를 사용하는가?

※ Threads(스레드)

II - 4. Blocking VS Non-Blocking

III . Concurrency model