<div id="readability-page-1" class="page"><div><p><img src="https://media.vlpt.us/images/2taesung/post/772ae22d-7981-46b7-979f-649396fe1c85/image.png"></p>
<p><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing</a></p>
<h2 id="비동기-자바스크립트-소개">비동기 자바스크립트 소개</h2>
<h2 id="동기-자바스크립트">동기 자바스크립트</h2>
<p>비동기 자바스크립트가 무엇인지 이해하려면 먼저 동기 자바스크립트가 무엇인지 이해해야 합니다 . 이 섹션에서는 이전 기사에서 본 정보 중 일부를 요약합니다.</p>
<p>=&gt; 동기 자바스크립트 문서를 보면 제대로 표현이 있었다. 마치 전화통화. 전화 통화는 여러 사람이랑 한번에 할 수 없다. 부재중 전화가 찍혀서 한통화가 끝나면 다음 통화를 한다.</p>
<p><img src="https://media.vlpt.us/images/2taesung/post/eecd015f-d03c-4108-8b5a-0c27c3a03284/image.png"></p>
<p>=&gt; 자바 스크립트는 단일 스크립트. 작업 처리가 되는 동안 렌더링이 일시 중지됨.</p>
<p>=&gt; 그러므로 처음부터 아래의 코드들이 실행되지는 않는 상태</p>
<h2 id="비동기-자바스크립트">비동기 자바스크립트</h2>
<p>비동기 코드를 사용하여 작업하기가 왜 어려운가요?</p>
<p>간단한 예를 살펴보겠습니다. 서버에서 이미지를 가져올 때 결과를 즉시 반환할 수 없습니다. 즉, 다음(의사 코드)이 작동하지 않습니다.</p>
<pre><code><span>let</span> response <span>=</span> <span>fetch</span><span>(</span><span>'myImage.png'</span><span>)</span><span>;</span> <span>// fetch is asynchronous</span>
<span>let</span> blob <span>=</span> response<span>.</span><span>blob</span><span>(</span><span>)</span><span>;</span>
<span>// display your image blob in the UI somehow</span></code></pre>
<p>이는 이미지를 다운로드하는 데 얼마나 걸릴지 모르기 때문에 두 번째 줄을 실행하려고 할 때 response아직 사용할 수 없기 때문에 오류(간헐적으로, 아마도 매번) 가 발생합니다.</p>
<p>대신, response다른 작업을 시도하기 전에 코드 가 반환 될 때까지 기다려야 합니다.</p>
<p>=&gt; response 작동을 기다린 후에는 오류가 생기지는 않음</p>
<p>=&gt; 여기서 해결할 수 있는게 이전에 콜백과 최신 기술은 promise 스타일 코드.</p>
<h2 id="비동기-콜백">비동기 콜백</h2>
<p>비동기 콜백은 백그라운드에서 코드 실행을 시작할 함수를 호출할 때 인수로 지정되는 함수입니다.</p>
<p>=&gt; 안에 담겨져 있으니 반드시 작동이 된 후에 작동되겠네</p>
<p>=&gt; 아니 정확히 말하면 콜백 함수는 밑에 있는 코드도 끌고 와서 비동기적으로 만들어준다는 느낌.</p>
<p><a href="https://www.youtube.com/watch?v=U42qWURR6Gw">https://www.youtube.com/watch?v=U42qWURR6Gw</a></p>
<p>=&gt; 이 설명 영상에서 정확히 알게 되었다.</p>
<p>=&gt; 비동기로 작동을 하면서 그 값을 정확히 호출해 이용할때, 콜백함수를 활용.</p>
<p>콜백 함수가 즉시 실행 되지 않습니다 . 포함하는 함수의 본문 내부 어딘가에서 비동기적으로 "콜백"(따라서 이름)됩니다. 포함하는 함수는 때가 되면 콜백 함수를 실행할 책임이 있습니다.</p>
<h2 id="약속">약속</h2>
<p>여기서 우리 fetch()는 단일 매개변수(네트워크에서 가져오려는 리소스의 URL)를 취하고 Promise를 반환하는 것을 봅니다.</p>
<p>Promise는 비동기 작업의 완료 또는 실패를 나타내는 개체입니다. 말 그대로 중간 상태를 나타냅니다. 본질적으로 "가능한 한 빨리 답변을 드릴 것을 약속합니다"라고 말하는 브라우저의 방식이므로 "약속"이라는 이름이 붙었습니다.</p>
<p>=&gt; Promise라는 이름이 붙은 이유를 생각해보질 못했었다.</p>
<p>=&gt; 아! 이런 이유로 이 명칭을 붙였군</p>
<h2 id="이벤트-대기열">이벤트 대기열</h2>
<h2 id="약속-대-콜백">약속 대 콜백</h2>
<p>오류 처리가 훨씬 더 좋습니다. 모든 오류는 .catch()"피라미드"의 각 수준에서 개별적으로 처리되지 않고 블록 끝의 단일 블록에서 처리됩니다.<br>
=&gt; 그러네 만약 콜백으로 썼다면 일일히 이걸 안에 넣어야했을텐데 단일 블록에서 해결됨.</p>
<h2 id="비동기-코드의-특성">비동기 코드의 특성</h2>
<p>코드 실행 순서와 비동기 코드를 동기 코드처럼 취급하려고 할 때 발생하는 문제를 완전히 알지 못할 때 어떤 일이 발생</p>
<p>=&gt; 비동기의 장점들과 활용에 대해 생각해볼 수 있었다.</p>
<h2 id="결론">결론</h2>
<p>비동기식 코드를 만든 이유가 있다!!!!!<br>
적절하게 잘 사용해라</p></div></div>

2taesung.log

Taesung Lee

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing
비동기 자바스크립트 소개
동기 자바스크립트
비동기 자바스크립트가 무엇인지 이해하려면 먼저 동기 자바스크립트가 무엇인지 이해해야 합니다 . 이 섹션에서는 이전 기사에서 본 정보 중 일부를 요약합니다.
=> 동기 자바스크립트 문서를 보면 제대로 표현이 있었다. 마치 전화통화. 전화 통화는 여러 사람이랑 한번에 할 수 없다. 부재중 전화가 찍혀서 한통화가 끝나면 다음 통화를 한다.
=> 자바 스크립트는 단일 스크립트. 작업 처리가 되는 동안 렌더링이 일시 중지됨.
=> 그러므로 처음부터 아래의 코드들이 실행되지는 않는 상태
비동기 자바스크립트
비동기 코드를 사용하여 작업하기가 왜 어려운가요?
간단한 예를 살펴보겠습니다. 서버에서 이미지를 가져올 때 결과를 즉시 반환할 수 없습니다. 즉, 다음(의사 코드)이 작동하지 않습니다.
let response = fetch('myImage.png'); // fetch is asynchronous
let blob = response.blob();
// display your image blob in the UI somehow
이는 이미지를 다운로드하는 데 얼마나 걸릴지 모르기 때문에 두 번째 줄을 실행하려고 할 때 response아직 사용할 수 없기 때문에 오류(간헐적으로, 아마도 매번) 가 발생합니다.
대신, response다른 작업을 시도하기 전에 코드 가 반환 될 때까지 기다려야 합니다.
=> response 작동을 기다린 후에는 오류가 생기지는 않음
=> 여기서 해결할 수 있는게 이전에 콜백과 최신 기술은 promise 스타일 코드.
비동기 콜백
비동기 콜백은 백그라운드에서 코드 실행을 시작할 함수를 호출할 때 인수로 지정되는 함수입니다.
=> 안에 담겨져 있으니 반드시 작동이 된 후에 작동되겠네
=> 아니 정확히 말하면 콜백 함수는 밑에 있는 코드도 끌고 와서 비동기적으로 만들어준다는 느낌.
https://www.youtube.com/watch?v=U42qWURR6Gw
=> 이 설명 영상에서 정확히 알게 되었다.
=> 비동기로 작동을 하면서 그 값을 정확히 호출해 이용할때, 콜백함수를 활용.
콜백 함수가 즉시 실행 되지 않습니다 . 포함하는 함수의 본문 내부 어딘가에서 비동기적으로 "콜백"(따라서 이름)됩니다. 포함하는 함수는 때가 되면 콜백 함수를 실행할 책임이 있습니다.
약속
여기서 우리 fetch()는 단일 매개변수(네트워크에서 가져오려는 리소스의 URL)를 취하고 Promise를 반환하는 것을 봅니다.
Promise는 비동기 작업의 완료 또는 실패를 나타내는 개체입니다. 말 그대로 중간 상태를 나타냅니다. 본질적으로 "가능한 한 빨리 답변을 드릴 것을 약속합니다"라고 말하는 브라우저의 방식이므로 "약속"이라는 이름이 붙었습니다.
=> Promise라는 이름이 붙은 이유를 생각해보질 못했었다.
=> 아! 이런 이유로 이 명칭을 붙였군
이벤트 대기열
약속 대 콜백
오류 처리가 훨씬 더 좋습니다. 모든 오류는 .catch()"피라미드"의 각 수준에서 개별적으로 처리되지 않고 블록 끝의 단일 블록에서 처리됩니다.
=> 그러네 만약 콜백으로 썼다면 일일히 이걸 안에 넣어야했을텐데 단일 블록에서 해결됨.
비동기 코드의 특성
코드 실행 순서와 비동기 코드를 동기 코드처럼 취급하려고 할 때 발생하는 문제를 완전히 알지 못할 때 어떤 일이 발생
=> 비동기의 장점들과 활용에 대해 생각해볼 수 있었다.
결론
비동기식 코드를 만든 이유가 있다!!!!!
적절하게 잘 사용해라

[1일1js] 비동기 자바스크립트 소개

댓글