<div id="readability-page-1" class="page"><section itemprop="articleBody"><h2 id="event-driven">Event Driven<a href="#event-driven" aria-label="event driven permalink"></a></h2>
<code>이벤트 기반</code>이란 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식인데, 이 이벤트 기반은 노드의 특성 중 하나이다.
이벤트 기반 시스템에서는 <code>특정 이벤트</code> 가 <code>발생</code>할 때, 무엇을 할 지 미리 등록해두어야 한다.
<blockquote>
이벤트 리스너에 콜백 함수를 등록한다.
</blockquote>
<h2 id="이벤트-루프">이벤트 루프<a href="#%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84" aria-label="이벤트 루프 permalink"></a></h2>
<ul>
<li>이벤트 발생 시 호출할 콜백함수를 관리하고, 호출된 콜백 함수의 실행 순서를 결정</li>
<li>노드가 종료될 때 까지 이벤트 처리를 위한 작업을 반복 -&gt; loop라고 부름</li>
</ul>
<h2 id="백그라운드">백그라운드<a href="#%EB%B0%B1%EA%B7%B8%EB%9D%BC%EC%9A%B4%EB%93%9C" aria-label="백그라운드 permalink"></a></h2>
<ul>
<li><code>setTimeout</code> 같은 타이머나 이벤트 리스너가 대기하는 곳이다.</li>
<li>여러 작업이 동시에 실행 가능</li>
</ul>
<h2 id="태스크-큐">태스크 큐<a href="#%ED%83%9C%EC%8A%A4%ED%81%AC-%ED%81%90" aria-label="태스크 큐 permalink"></a></h2>
<ul>
<li>이벤트 발생 후, <code>백그라운드</code>에서 <code>태스크 큐</code>로 이벤트 리스너의 콜백 함수를 보낸다.</li>
</ul>
<h2 id="논-블로킹-io">논 블로킹 I/O<a href="#%EB%85%BC-%EB%B8%94%EB%A1%9C%ED%82%B9-io" aria-label="논 블로킹 io permalink"></a></h2>
이벤트 루프를 잘 활용하면 오래 걸리는 작업을 효율적으로 처리할 수 있다.
작업에는 두 가지 종류가 있는데, 동시에 실행가능한 작업과 그렇지 않은 작업이다.
기본적으로 자바스크립트 코드는 동시에 실행할 수 없지만, I/O 작업은 가능하다.
<h2 id="논블로킹">논블로킹<a href="#%EB%85%BC%EB%B8%94%EB%A1%9C%ED%82%B9" aria-label="논블로킹 permalink"></a></h2>
<blockquote>
이전 작업이 완료될 때 까지 대기하지 않고 다음 작업을 수행
</blockquote>
<ul>
<li><code>논 블로킹</code>과 <code>동시</code> 는 같은 의미가 아니다.</li>
</ul>
<h2 id="블로킹">블로킹<a href="#%EB%B8%94%EB%A1%9C%ED%82%B9" aria-label="블로킹 permalink"></a></h2>
<blockquote>
이전 작업이 끝나야만 다음 작업 수행
</blockquote>
<h2 id="프로미스">프로미스<a href="#%ED%94%84%EB%A1%9C%EB%AF%B8%EC%8A%A4" aria-label="프로미스 permalink"></a></h2>
자바스크립트와 노드에서는 주로 비동기를 접하고, 특히 <code>이벤트 리스너</code> 를 사용할 때 <code>콜백 함수</code> 를 자주 사용한다.
ES2015 부터는 자바스크립트와 노드의 API들이 <code>콜백</code> 대신 <code>Promise</code> 기반으로 재구성되었는데, 이는 콜백 지옥을 극복했다는 평가를 받는다.
<h2 id="규칙">규칙<a href="#%EA%B7%9C%EC%B9%99" aria-label="규칙 permalink"></a></h2>
<div data-language="javascript"><pre><code>const condition = true;
const promise = new Promise((resolve, reject) =&gt; {
 if (condition) {
 resolve('성공!');
 } else {
 reject('실패!');
 }
});

// 다른 코드 들어갈 수 있음

promise
 .then((message) =&gt; {
 // 성공(resolve)한 경우 실행 
 console.log(message);
 })
 .catch((error) =&gt; {
 // 실패(reject) 한 경우 실행 
 console.error(error);
 })
 .finally(() =&gt; { // 끝나고 무조건 실행
 console.log('무조건!');
 });</code></pre></div>
<ol>
<li><code>new Promise</code>를 통해 프로미스를 생성할 수 있으며, 그 내부에 <code>resolve</code>와 <code>reject</code>를 매개변수로 갖는 콜백함수를 생성</li>
<li>1과 같이 만든 <code>promise</code> 변수에 <code>then</code>과 <code>catch</code> 메서드를 붙일 수 있다.
<ol>
<li><code>resolve</code>가 호출되면 -&gt; <code>then</code> 실행</li>
<li><code>reject</code>가 호출되면 -&gt; <code>catch</code> 실행</li>
<li><code>finally</code>는 성공/실패 여부와 관계없이 실행</li>
</ol>
</li>
</ol>
<h2 id="promiseall"><code>Promise.all</code><a href="#promiseall" aria-label="promiseall permalink"></a></h2>
프로미스를 여러 개 한 번에 실행
<div data-language="javascript"><pre><code>const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');

Promise.all([promise1, promise2])
 .then(result =&gt; {
 console.log(result); // ['성공1', '성공2'];
 })
 .catch((error) =&gt; {
 console.error(error);
 });</code></pre></div>
<code>Promise.resolve</code>는 즉시 resolve 하는 프로미스를 만든다. (reject도 존재)
프로미스가 여러개 있을 때, <code>Promise.all</code>에 넣으면 모두 resolve될 때 까지 기다렸다가 then으로 넘어가고, Promise 중 하나라도 reject 되면 catch로 간다.
<h2 id="asyncawait">async/await<a href="#asyncawait" aria-label="asyncawait permalink"></a></h2>
ES2017 부터 추가되었고, 노드처럼 비동기 위주 프로그래밍을 해야할 때 도움이 된다.
<h2 id="이전">이전<a href="#%EC%9D%B4%EC%A0%84" aria-label="이전 permalink"></a></h2>
<div data-language="javascript"><pre><code>function findAndSaveUser(Users) {
 Users.findOne({})
 .then((users) =&gt; {
 user.name = 'me';
 return user.save();
 })
 .then((user) =&gt; {
 return Users.findOne({ gender : 'm'});
 })
 .then((user) =&gt; {
 // ... 
 })
 .catch(err =&gt; {
 console.error(err);
 });
}</code></pre></div>
<h2 id="이후">이후<a href="#%EC%9D%B4%ED%9B%84" aria-label="이후 permalink"></a></h2>
<div data-language="javascript"><pre><code>async function findAndSaveUser(Users) {
 let user = await Users.findOne({});
 user.name = 'me';
 user = await user.save();
 user = await User.findOne({ gender : 'm' });
 // ... 
}</code></pre></div>
<code>await Users.findOne({});</code> 는 resolve 될 때 까지 기다린 다음에 user를 초기화 한다.
for 문과 <code>async/await</code> 을 같이 써서 프로미스를 순차적으로 실행할 수 도 있다. (since ES2018)
<div data-language="javascript"><pre><code>const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');

(async () =&gt; {
 for await (promise of [promise1, promise2]) {
 console.log(promise);
 }
})();</code></pre></div></section></div>

Seulog💘

이예슬

Event Driven
이벤트 기반이란 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식인데, 이 이벤트 기반은 노드의 특성 중 하나이다.
이벤트 기반 시스템에서는 특정 이벤트 가 발생할 때, 무엇을 할 지 미리 등록해두어야 한다.
이벤트 리스너에 콜백 함수를 등록한다.
이벤트 루프
이벤트 발생 시 호출할 콜백함수를 관리하고, 호출된 콜백 함수의 실행 순서를 결정
노드가 종료될 때 까지 이벤트 처리를 위한 작업을 반복 -> loop라고 부름
백그라운드
setTimeout 같은 타이머나 이벤트 리스너가 대기하는 곳이다.
여러 작업이 동시에 실행 가능
태스크 큐
이벤트 발생 후, 백그라운드에서 태스크 큐로 이벤트 리스너의 콜백 함수를 보낸다.
논 블로킹 I/O
이벤트 루프를 잘 활용하면 오래 걸리는 작업을 효율적으로 처리할 수 있다.
작업에는 두 가지 종류가 있는데, 동시에 실행가능한 작업과 그렇지 않은 작업이다.
기본적으로 자바스크립트 코드는 동시에 실행할 수 없지만, I/O 작업은 가능하다.
논블로킹
이전 작업이 완료될 때 까지 대기하지 않고 다음 작업을 수행
논 블로킹과 동시 는 같은 의미가 아니다.
블로킹
이전 작업이 끝나야만 다음 작업 수행
프로미스
자바스크립트와 노드에서는 주로 비동기를 접하고, 특히 이벤트 리스너 를 사용할 때 콜백 함수 를 자주 사용한다.
ES2015 부터는 자바스크립트와 노드의 API들이 콜백 대신 Promise 기반으로 재구성되었는데, 이는 콜백 지옥을 극복했다는 평가를 받는다.
규칙
const condition = true;
const promise = new Promise((resolve, reject) => {
    if (condition) {
        resolve('성공!');
    } else {
        reject('실패!');
    }
});
// 다른 코드 들어갈 수 있음
promise
  .then((message) => {
    // 성공(resolve)한 경우 실행 
    console.log(message);
  })
  .catch((error) => {
    // 실패(reject) 한 경우 실행 
    console.error(error);
  })
  .finally(() => { // 끝나고 무조건 실행
  console.log('무조건!');
  });
new Promise를 통해 프로미스를 생성할 수 있으며, 그 내부에 resolve와 reject를 매개변수로 갖는 콜백함수를 생성
1과 같이 만든 promise 변수에 then과 catch 메서드를 붙일 수 있다.
resolve가 호출되면 -> then 실행
reject가 호출되면 -> catch 실행
finally는 성공/실패 여부와 관계없이 실행
Promise.all
프로미스를 여러 개 한 번에 실행
const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
Promise.all([promise1, promise2])
    .then(result => {
        console.log(result); // ['성공1', '성공2'];
    })
    .catch((error) => {
        console.error(error);
    });
Promise.resolve는 즉시 resolve 하는 프로미스를 만든다. (reject도 존재)
프로미스가 여러개 있을 때, Promise.all에 넣으면 모두 resolve될 때 까지 기다렸다가 then으로 넘어가고, Promise 중 하나라도 reject 되면 catch로 간다.
async/await
ES2017 부터 추가되었고, 노드처럼 비동기 위주 프로그래밍을 해야할 때 도움이 된다.
이전
function findAndSaveUser(Users) {
    Users.findOne({})
        .then((users) => {
            user.name = 'me';
            return user.save();
        })
        .then((user) => {
            return Users.findOne({ gender : 'm'});
        })
        .then((user) => {
            // ... 
        })
        .catch(err => {
            console.error(err);
        });
}
이후
async function findAndSaveUser(Users) {
    let user = await Users.findOne({});
    user.name = 'me';
    user = await user.save();
    user = await User.findOne({ gender : 'm' });
    // ... 
}
await Users.findOne({}); 는 resolve 될 때 까지 기다린 다음에 user를 초기화 한다.
for 문과 async/await 을 같이 써서 프로미스를 순차적으로 실행할 수 도 있다. (since ES2018)
const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
(async () => {
    for await (promise of [promise1, promise2]) {
        console.log(promise);
    }
})();

[Node.js 교과서] - 2장 자바스크립트 정리

댓글