13.1 Modules, instroductionexport 지시자는 변수나 함수 앞에 붙이면 다른 외부 모듈에서 접근할 수 있다.import 지시자를 사용하면 외부 모듈의 기능을 가져온다.// 📁 sayHi.jsexport function sayHi(user) { alert(`Hello, ${user}!`);}// -------------// 📁 main.jsimport {sayHi} from './sayHi.js';alert(sayHi); // 함수sayHi('John'); // Hello, John! 같은 속성을 설정해 해당 스크립트가 모듈임을 브라우저가 알 수 있도록 해야 한다.Core module features모듈은 항상 엄격모드로 실행된다.모듈은 자신만의 스코프가 존재, 모듈 내부에서 ..
11.8 Async/awaitAsync functionsfunctions 앞에 async를 붙이면 항상 프라미스를 반환한다. 프라미스가 아닌 값이 반환되더라도, 이행 상태의 프라미스로 값을 감싸서 이행된 프라미스가 반환되도록 한다.async function f() { return 1;}f().then(alert); // 1Awaitawait는 async 함수 안에서만 동작한다. 프라미스가 처리될 때까지 함수 실행을 기다리고, 프라미스가 모두 수행되면 결과를 반환한다.async function f() { let promise = new Promise((resolve, reject) => { setTimeout(() => resolve("완료!"), 1000) }); let result = a..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/3YmF8/btsHDWBDPUw/PvNTgJUk0C3HGNckJXm4ik/img.png)
11.6 Promisification콜백을 받는 함수를 프라미스 반환 함수로 바꾸는 것을 프라미스화라 한다. function loadScript(src, callback) { let script = document.createElement('script'); script.src = src; script.onload = () => callback(null, script); script.onerror = () => callback(new Error(`${src}를 불러오는 도중에 에러가 발생함`)); document.head.append(script);}// 사용법:// loadScript('path/script.js', (err, script) => {...})// -----------------..
11.5 Promise APIPromise.all여러 개의 URL에 동시에 요청을 보내고, 모두 완료된 후 콘텐츠를 처리하고 싶을 때 Promise.all을 사용할 수 있다.Promise.all([ new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1 new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2 new Promise(resolve => setTimeout(() => resolve(3), 1000)) // 3]).then(alert); // 프라미스 전체가 처리되면 1, 2, 3이 반환됩니다. 각 프라미스는 배열을 구성하는 요소가 됩니다.만약 Promise.all로 ..
11.4 Error handling with promisescatch는 .then 뒤에 오더라도 상관없다. fetch('/article/promise-chaining/user.json') .then(response => response.json()) .then(user => fetch(`https://api.github.com/users/${user.name}`)) .then(response => response.json()) .then(githubUser => new Promise((resolve, reject) => { let img = document.createElement('img'); img.src = githubUser.avatar_url; img.className =..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/qoLhf/btsHDd4N5PN/g1vai9CK3S9ZDfpBsXKVz1/img.png)
11.3 Promises chaining프라미스는 주로 체이닝을 해서 사용한다. 아래와 같이 말이다. 프라미스의 .then은 프라미스를 반환한다. 따라서 체이닝이 가능하다. 이 때 반환되는 result 값이 다음 then으로 전달 되므로 결과도 그에 맞게 반환된다.new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // (*)}).then(function(result) { // (**) alert(result); // 1 return result * 2;}).then(function(result) { // (***) alert(result); // 2 return result * 2;}).then(function..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dLzpsA/btsHEmUaFE8/dpjPMjWOqkc36Yj1Yex5yK/img.png)
11.2 Promise제작 코드(producing code)'는 원격에서 스크립트를 불러오는 것 같은 시간이 걸리는 일을 한다.'소비 코드(consuming code)'는 '제작 코드’의 결과를 기다렸다가 이를 소비한다. 소비 주체(함수)는 여럿이 될 수 있다.프라미스(promise) 는 '제작 코드’와 '소비 코드’를 연결해 주는 특별한 자바스크립트 객체다. '프라미스’는 시간이 얼마나 걸리든 상관없이 약속한 결과를 만들어 내는 '제작 코드’가 준비되었을 때, 모든 소비 코드가 결과를 사용할 수 있도록 해준다.promise는 아래 예시처럼 만들 수 있다. 전달되는 함수는 executor 함수라고 부른다. let promise = new Promise(function(resolve, reject) { ..
11.1 Introduction: callbacksunction loadScript(src) { // 태그를 만들고 페이지에 태그를 추가합니다. // 태그가 페이지에 추가되면 src에 있는 스크립트를 로딩하고 실행합니다. let script = document.createElement('script'); script.src = src; document.head.append(script);}// ------------loadScript('/my/script.js');// loadScript 아래의 코드는// 스크립트 로딩이 끝날 때까지 기다리지 않습니다.// ...// ------------oadScript('/my/script.js'); // script.js엔 "function newFunc..