27 (1/3) :: Node.js, ES6, 비동기 삼형제, Event Loop

엘리스 SW 엔지니어 트랙 27일차

최규범 강사님 온라인 강의날

 

 

Node.js 기초를 복습하고, 좀 더 알아보는 날

 

Node.js로 할 수 있는 것들

웹 서비스 구성

Front-end: React.js, Vue.js, Angular.js

Back-end: Express.js

 

한가지 코드로 IOS, Android 개발

Mobile: React Native

 

Discord, Slack 등 개발

Desktop App: Electron

 

JavaScript로 딥러닝

Machine-Learning: Brain.js

 

 

Node.js 간단 요약

싱글 쓰레드 & 비동기 & 이벤트 기반

 

싱글 쓰레드이기 때문에 여러 작업을 하려면

비동기가 필요하고, 비동기를 처리하기위해

이벤트 루프가 이벤트 기반 처리에 도움을 준다

 

 

ES6

현대적인 자바스크립트 문법

ECMAScript 버전 6이후를 통틀어 ES6

게으르지않게 새로운것을 배우자

 

 

Destructing Structure

// Destructing
// Object
const obj = { name: 'elice', age: 5 }

// obj의 key와 같은 이름으로 변수 선언
const { name, age } = obj

// 다른 이름으로 변수 선언
const { name: n1, age: a1 } = obj

// Array
const arr = ['some', 'values']

// arr에서 순차적으로 변수 선언
const [ frist, second ] = arr

 

 

비동기 삼형제

비동기 세가지 코딩 방식

• Callback
• Promise
• Async

 

Callback속에서 동기가 많아지는

지옥을 해결하기 위해나온 Promise

Promise의 복잡할 수 있는 문법을 위한 async - await

 

비동기 삼형제의 관계

• callback 지옥 => promise chaining로 해결
• promise 지옥 => async - await로 해결

하지만 프로그램의 형태에 따라서 전부 할 줄 알아야 된다고 한다

 

 

Promise.all 비동기 병렬 실행

비동기 함수를 동시에 실행하려면

Promise.all로 병렬 실행 가능

 

병렬 실행 예시

1초가 걸리는 promise1( )

2초가 걸리는 promise2( )

 

sync( ) 은 1초 + 2초 => 3초 뒤에 console에 찍히고,

 

parallel( ) 은 둘이 같이 실행되고,

더 오래걸리는 promise2( )의 2초 뒤에 console에 찍힌다

// Promise.all

async function sync() {
    const r1 = await promise1()
    const r2 = await promise2()
    console.log(r1, r2)
}

async function parallel(){
    const [r1, r2] = await Promise.all([
        promise1()
        promise2()
    ])
    console.log(r1, r2)
}

 

 

Event Loop(이벤트 루프)

Node.js만의 특징 X

JavaScript에서도 일반적

 

보통은 다 콜스택에 쌓이지만

타임아웃은 Message Queue

Promoise는 Job Queue에 쌓인다

 

Message Queue는

콜스택이 완전히 비어 있을 때 콜스택으로 들어가서 실행되고,

Job Queue는

상위 함수가 종료되기 전에 콜스택에 쌓여서 실행된다

 

 

Event by Chuttersnap #unsplash