[SW 코딩 훈련] Node.js와 Express.js 02. Node.js 이해하기

ES6

ECMAScript 버전 6 이후를 통틀어 일반적으로 ES6이라고 부른다.

ECMAScript

JavaScript의 표준문법이다. 2015년, ECMAScript 버전 6 이후로 많은 현대적인 문법이 추가됐다.

ES6를 사용하는 이유

현대적인 문법은 생산성 향상에 도움을 준다. 즉, 적은 코드로도 유용하고 많은 기능을 할 수 있다는 뜻이다. Node.js는 빠르게 최신 ECMAScript를 지원한다. 자주 사용되는 유용한 문법을 익히고 필요한 부분에 적절하게 활용하는 것이 중요하다.

하지만 Node.js는 ES6의 모든 문법을 지원하지는 않는다. Node.js로 자주 사용되는 유용한 ES6문법의 코드를 익히는 과정은 필요하다.

자주 사용되는 ES6 문법

자주 사용되는 문법 1 - let, const

기존에는 변수를 선언하는 과정에서 var라는 키워드를 사용했었는데, 이는 상수나 변수의 구분이 없다는 문제점이 있었다. 이 둘을 선언하는 과정에서 구분하기 위해 상수를 const, 변수를 let으로 구분한다.

자주 사용되는 문법 2 - Template String

기존에 어떤 문자열을 만들기 위해서는 더하기(+) 기호와 띄어쓰기와 개행을 하겠다는 명시적 문자열을 필요로 했다. ES6에서는 백틱(backtick)이라는 따옴표를 사용하여 변수의 내용을 직접 문자열에 넣을 수도 있고, 개행을 넣으면 실제 문자열에도 개행을 넣을 수 있게 됐다.

자주 사용되는 문법 3 - arrow function

등호와 오른쪽 화살표를 합친 arrow(=>)로 함수를 만들 수 있다. 기본적으로 함수를 만들 때는 function 키워드를 이용했는데, ES6에서는 이름 다음을 등호로 처리하고 arrow 기준으로 왼쪽에는 매개변수, 오른쪽에는 할 일을 적어서 간편하게 했다. 익명함수에서 이 장점은 극대화된다. 예시에서 setTimeout은 함수 이름이 들어가야 하는데 함수 안에 바로 선언을 해주는 것도 가능하게 해준다.

자주 사용되는 문법 4 - class

class는 객체 지향 프로그래밍 개념으로 사용되는데, 기존의 문법에서는 쉽게 구현되지 않았다. ES6에서는 Java나 다른 언어에서 사용되는 형태와 동일하게 class라는 키워드를 사용해서 구현이 가능하다.

자주 사용되는 문법 5 - destructing

destructing은 어떤 자료를 분해하는 것을 의미한다. ES6에서는 변수 선언을 다른 방식으로 할 수 있다.

 

새로운 ES6 문법을 적용한 결과 복잡하거나 직관적이지 않던 방법을 보기 좋게 만들고 간결하게 표현할 수 있게 됐다. 현대적인 문법은 처음 접할 땐 어색하지만, 익숙해지면 좋은 코드를 작성할 수 있게 된다.

비동기 코딩

비동기 - 이벤트 기반 동작을 코드로 구현하는 방법이다. Node.js에서 비동기 동작을 구현하는 크게 세 가지 방법이 있다. Callback은 전통적인 JavaScript의 이벤트 기반 코딩 방식이다. 이 callback의 단점을 보완한 비동기 코딩 방식을 Promise라고 한다. Promise를 보완하기 위한 비동기 코딩 방식으로 Async - Await가 등장했다.

Callback

db.getUsers 함수가 있고, 이 함수 안에 익명 함수가 있다. db.getUsers 함수는 데이터베이스에서 유저 목록을 찾아오는 비동기 동작을 수행한다. 즉, 이것은 Node.js가 하는 일이 아니라는 것이다. 일을 시키고 일의 결과가 오면 console.log라는 함수를 실행하는 코드이다. 쿼리가 완료가 되면 오류가 있는지, 혹은 유저목록에는 무엇이 있는지와 같은 결과를 미리 등록된 callback 함수를 실행한다. 참고해야할 callback의 표준이 있는데, 에러와 결과를 같이 전달하는 것이 표준으로 자리 잡혀 있다.

callback 방법에는 치명적인 단점이 있다. 이 예시에서 getUsers를 했을 때, async1의 콜백을 async2에 걸고, async2의 콜백을 async3에 걸게 되면 들여쓰기도 길어지고 의존도도 높아진다. async1, async2, async3 … 를 동기적으로 실행해야 할 경우, Node.js는 기본적으로 비동기 동작을 callback으로 처리하기 때문에 계속해서 callback의 callback의 callback을 하는, callback 지옥에 빠질 수 있다.

Promise

Promise 함수는 동작이 완료되면 then에 등록된 callback을 실행한다. 오류가 발생한 경우 catch 에 등록된 callback을 실행한다. 이 방법의 장점은 어떤 한 함수에 다른 함수가 들어가는 형태가 아니라, 여러 일들이 연쇄적으로 일어나는 형태로 구성되어 가독성도 높아지고 사용자도 편해진다. 이 과정을 Chaining이라고 하는데, Short-hand 표현 방법으로 더욱 코드를 간결하게 만들 수 있다. Short-hand 표현 방법을 사용하면 Return을 생략 가능하고, 인자가 하나인 경우 (괄호)를 생략 가능하다.

이런 Promise도 지옥에 빠질 수 있다. then이 꼬리에 꼬리를 물고 작동될 때이다. promise3 함수가 promise1와 promise2의 결과값을 같이 사용하고 싶을 때 어떻게 해야할까? 직관적으로 생각할 때 콜백 지옥과 유사한 해결책이 생각난다.

Async - Await

Async - Await은 어떤 작업을 수행함에 있어 이 작업을 하겠다, 결과를 받겠다라는 것을 명시하는 구문이다. promise의 다른 문법이라 볼 수 있다. Async가 동작하면 async 함수 내에서 promise 함수의 결과는 await으로 받을 수 있다. await한 promise 함수가 끝나기 전까지는 다음 라인으로 가지 않는다.  await의 작업이 끝나면 다음 작업으로 넘어가는데, 중요한 점은 await 작업끼리는 비동기 방식으로 진행할 수 있다. 마치 순차적 프로그래밍처럼 작성할 수 있다. async 함수의 return은 Promise다. 이 말은 뒤에 then을 붙여서 이것이 끝났을 때 어떤 작업을 시킬 수 있는 것이다.

동일한 동작을 하는 promise 함수와 async 함수

Async의 경우 오류처리를 try ~ catch로 진행한다. 한편 Promise에서는 catch를 then 함수에 붙여서 어떤 오류가 발생했을 때 그것을 해결하도록 처리할 수 있다.

Promise의 병렬 실행

async 키워드가 있는 두 개의 함수가 있다. promise1과 promise2는 각 1초, 2초가 소요되는 비동기 함수라고 했을 때, sync 예제에서는 3초의 시간이 소요되고, parallel 예제에서는 2초의 시간이 소요된다. 왜냐하면 Promise.all은 promise 함수를 동시에 실행시키고 등록된 모든 함수가 마무리되면 결과값을 한꺼번에 반환한다. async 키워드 안에 있는 await 간에는 순차적인 요소가 발생하는데, 기다리는 동안 이외에 다른 작업을 할 수 있는 것이다. 하지만 여기서도 순차적인 문제가 발생하다보니 Promise.all을 통해 함수의 시작조차도 동시에 하는 장점이 있는 것이다.

---

callback 지옥은 promise chaining으로 해결했고, promise 지옥은 async - await으로 해결했다.

현대 JavaScript에서는 대부분이 가독성이 좋은 async - await을 지향하지만,

특정 상황에 맞는 비동기 코딩 방법들을 구사할 줄 알아야 한다.

---

const adder_promise = require('./promise');

function main_promise(a, b, c, d) {
    Promise.all([
        adder_promise(a, b),
        adder_promise(c, d),
    ])
    .then(([r1, r2]) => {
        return adder_promise(r1, r2);
    })
    .then((r3) => {
        console.log(`${a}+${b}+${c}+${d}=${r3}`);
    });
}

async function main(a, b, c, d) {
    const [r1, r2] = await Promise.all([
        adder_promise(a, b),
        adder_promise(c, d),
    ]);
    const r3 = await adder_promise(r1, r2);
    console.log(`${a}+${b}+${c}+${d}=${r3}`);
}

main(1,2,3,4);