{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"5b18a954-0d65-545b-8f88-2e7b4978b633","excerpt":"Asynchronous call 비동기 호출 콜백 callback : 파라미터로 넘겨줘서 나중에 실행되는 함수. 다른 코드의 인수argument로서 넘겨주는 function을 말한다. 바로 실행되는 녀석이 아니다. ex) iterator(동기함수), event handler(비동기함수, 이벤트가 발생됐을 때, 실행되는 함수이기 때문에) EXECUTION AND return 자바 스크립트는 single thread 기반의 언어, 즉 하나의 call stack…","html":"

Asynchronous call 비동기 호출

\n

콜백 callback : 파라미터로 넘겨줘서 나중에 실행되는 함수.

\n
\n

다른 코드의 인수argument로서 넘겨주는 function을 말한다.

\n
\n

바로 실행되는 녀석이 아니다. ex) iterator(동기함수), event handler(비동기함수, 이벤트가 발생됐을 때, 실행되는 함수이기 때문에)

\n

EXECUTION AND return

\n
otherCode(executableCode) // 그저 함수를 넘겨주는 것이고\notehrCode(executableCode()) // 함수를 실행시킨 리턴값을 넘겨줌.
\n

자바 스크립트는 single thread 기반의 언어, 즉 하나의 call stack을 사용한다. 그렇다면 JavaScript는 어떻게 동시성을 지원하는가?

\n\n

task를 하나 하나 적어보는 연습이 중요하다.

\n

EVENT-DRIVEN TASKS

\n\n
haveLunch()\n- checkMenu()\n- order('김밥') // <- 이게 5분이 걸린다면? (return이 무의미해진다)\n- putSpoon();\n- bringKimchi();\n- if(isReady) {\n    eat()\n}\n\nfunction haveLunch()\n- checkMenu()\n- order('김밥') // <- order를 해놓고, 이게 ready 되면 먹자.\n- putSpoon();\n- bringKimchi();\n- if(isReady) {\n    eat()\n}\n\n-> 간단하게\norder('김밥', eat)\n//일단 실행하게 하고, 준비되면 (이벤트가 발생하면) 먹도록 하자\n\n비동기는 비동기의 패턴으로 몰아넣는다.
\n

setTimeout(callback, millisecond)

\n

일정 시간 후에 함수를 실행

\n
setTImeout(function() {\n  console.log('3초 후에 실행')\n}, 3000)\n\n// setTimeout에 대응되는 clearTimeout도 있으나 clearInterval를 더 많이 씀.
\n

clearInterval(timerId)

\n

반복 실행중인 타이머를 종료

\n
var timer = setInterval(function() {\n  console.log('1초마다 실행')\n}, 1000)\nclearInterval(timer)\n// 더 이상 반복 실행되지 않음
\n

setTimeout 자체는 동기 함수이나, setTimeout 내부 구현은 비동기이기 때문에, chrome은 0초라는 게 없어서 실제로는 4밀리 세컨즈. task queue에 콜백 함수들이 넘어간다는게 중요.

\n

ASYNCHRONOUS USE CASES

\n\n

ASYNCHRONOUS 패턴을 자주 쓸 때, callback을 넘기는 패턴이 굉장히 중요.

","frontmatter":{"title":"Asynchronous call","date":"August 31, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180831 Asynchronous call/","previous":{"fields":{"slug":"/til/20180828 poiemaweb.com 연산자/"},"frontmatter":{"title":"poiemaweb.com 연산자","category":"TIL"}},"next":{"fields":{"slug":"/til/20180901 poiemaweb 객체object와 변경불가성Immutability/"},"frontmatter":{"title":"poiemaweb 객체object와 변경불가성Immutability","category":"TIL"}}}}