[week_06] Node.js 기초 | Node.js의 이해, 특징, ES6, 비동기 코딩, 이벤트 루프

1. Node.js란

자바스크립트를 어느 환경에서나 실행할 수 있게 해주는 실행기

• Browser의 JavaScript
  • 브라우저에서 실행
  • 웹 내부의 제한된 동작
  • 웹 프론트 개발자의 언어
• Node.js
  • 크로스 플랫폼 실행 (어느 환경에서든 실행 가능)
  • 제한 없는 동작
  • 다양한 어플리케이션 개발

 

2. Node.js의 특징

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

2-1. 싱글 쓰레드

• 쓰레드(Thread): 명령을 실행하는 단위, 한 개의 쓰레드는 한 번에 한 가지 동작만 실행 가능
• 싱글 쓰레드: 한 번에 한 가지 동작만 수행함
• 멀티 쓰레드: 동시에 여러 동작 수행 가능
• 장점
  • 쓰레드 생성 비용이 없다
  • 쓰레드가 늘어나지 않기 때문에 CPU 리소스 관리에 효율적
• 단점
  • 쓰레드 기반의 작업들의 효율이 떨어짐 ex) CPU 연산 작업

👉 그래서 Node.js는 비동기 동작으로 쓰레드 기반의 작업을 최소화 한다.

2-2. 비동기

• 동작을 실행한 후 완료가 되길 기다리지 않는 방식
• 동작의 완료를 기다리지 않기 때문에 다른 동작을 바로 실행 가능
• Node.js는 싱글 쓰레드이기 떄문에 비동기 방식을 사용

2-3. 이벤트 기반

• 비동기 동작의 완료를 처리하는 방법
• 비동기 방식은 특정 동작을 실행한 후, 해당 동작을 전혀 신경 쓰지 않음
• 대신 해당 동작이 완료될 경우 실행할 함수를 미리 등록함 (= 이벤트를 등록한다.)
• 비동기 동작이 완료가 되면 미리 등록된 함수를 실행

✨ 결론
Node.js는 싱글 쓰레드이기 때문에 비동기 동작이 필요하고,
비동기 동작을 구현하기 위해 이벤트 기반의 동작 방식을 사용한다.

 

3. Node.js 시작하기

• Node.js는 빠르게 개발중인 기술
  • 새로운 버전에서는 보안 이슈 및 버그 수정, 최신기술들이 빠르게 적용되고 있다.
  • 급변하는 기술은 가장 안정적인 최신 버전을 선택하는 것이 최선
• LTS
  • Long-Term Support 버전
  • Node.js의 안정적이고, 오래 지원되는 버전

 

4. ES6

• ECMAScript
  • 계속해서 발전해가는 JavaScript의 표준 문법
  • 2015년, ECMAScript 버전 6 이후로 많은 현대적인 문법이 추가됨
  • ECMAScript 버전 6 이후를 통틀어 일반적으로 ES6라고 부른다.
• 사용 이유
  • 현대적인 문법 ➡ 생산성 향상
  • Node.js는 빠르게 최신 ECMAScript를 지원한다. (단, ES6의 모든 문법을 지원하지는 않음)

4-1. let, const

• 기존의 var: 상수와 변수 구분이 없다.
• let과 const를 통해 상수와 변수를 구분할 수 있다.

4-2. Template String(``)

• 백틱( ` )기호를 사용해서 문자를 표현
• ${ }를 통해 문자열 사이에 간단히 변수를 사용할 수 있다.

4-3. arrow function

// 기존
function doSomething(param) {
	console.log('do something');
}

// arrow function
const doSometing = (param) => { // 상수형으로 표현 가능 -> 새로 선언 불가
	console.log('do something');
}

4-4. class

// 기존: prototype으로 class 함수 구현
function Model(name, age) {
	this.name = name;
    this.age = age;
}

Model.prototype.getInfo = function() {
	console.log(this.name, this.age);
}

// ES6 => 일반적인 형태의 class 구현 가능
class Model {
	constructor(name, age) {
    	this.name = name;
        this.age = age;
    }
    getInfo() {
    	console.log(this.name, this.age);
    }
}

4-5. destructing

// 기존 문법
var obj = {name: 'Tom', age: 5};
var name = obj.name;
var age = obj.age;

var arr = ['some', 'values'];
var first = arr[0];
var secont = arr[1];

// ES6
// Object의 key와 같은 이름으로 변수 선언 가능
const obj = {name: 'Tom', age: 5};
const {name, age} = obj;
const {name: n1, age: a1} = obj;

const arr = ['some', 'values'];
// arr에서 순차적으로 변수 선언 가능
const [first, second] = arr;

• 기존
  • Object와 배열에서 값을 꺼내기 위해서, 값을 하나씩 지정해서 변수에 저장
• ES6
  • Object에서 값을 꺼낼때는 중괄호를 사용해서 key와 같은 이름으로 값을 꺼내와서 변수 선언 가능
  • key와 다른 이름으로 값을 꺼낼때는 { key 값: 변수 이름 } 의 형태 사용
  • 배열에서 순차적으로 변수를 꺼내올 수 있다.
• 실행 결과

 

5. 비동기 코딩

• Callback: 전통적인 JavaScript의 이벤트 기반 코딩 방식
• Promise: callback의 단점을 보완한 비동기 코딩 방식
• Async-Await: promise의 단점을 보완한 비동기 코딩 방식

5-1. Callback

db.getUsers((err, users) => {
	console.log(users);
});

• getUsers에 인자로 전달되는 함수가 getUsers를 실행할 때 등록되는 이벤트 함수
• 이벤트 함수를 인자로 전달하는 형태를 Callback이라고 한다.
• 쿼리가 완료되면 오류가 있는지, 혹은 유저목록의 결과로 미리 등록된 callback 함수 실행
• callback함수의 첫 번째 인자는 에러를 전달하는 것이 callback의 표준
• callback들이 계속해서 연결되다 보면 콜백 지옥 현상 발생

5-2. Promise

db.getUsersPromise()
	.then((uesrs) => {
    	return promise1(users);
    })
    .then(r1 => promise2(r1)
    .catch(~~);

• then과 catch를 활용하여 비동기 함수의 실행 결과와 오류를 처리
• Chaining을 사용해 코드를 간결하게 작성
• Short-hand 표현 방법으로 더욱 간결하게 작성
  • Return 생략 가능
  • 인자가 하나인 경우 ( ) 생략 가능
• resolve, reject 두 가지 함수를 가짐
• Promise.all(): promise 함수를 동시에 실행시키고 등록된 모든 함수가 마무리되면 결과값을 한꺼번에 반환

5-3. Async-Await

async function doSomething() {
	const r1 = await promise1();
    const r2 = await promise2(r1);
    const r3 = await promise3(r1, r2);
    ...
    return r3;
}

doSomething().then(r3 => {console.log(r3)});

• promise의 다른 문법
• async 함수 내에서 promise 함수의 결과는 await으로 받을 수 있다.
• await한 promise 함수가 완료될 때 까지 다음 라인으로 넘어가지 않는다.
• async 함수의 return은 Promise
• 오류 처리는 try-catch 문 활용

 

6. 이벤트 루프

• 이벤트(event)를 처리하는 반복되는 동작(loop)
• 즉, Node.js가 비동기-이벤트 동작을 처리하는 일련의 반복 동작
• 비동기 코딩이 어떤 순서로 수행되는지에 대해 이해할 수 있다.
• JavaScript의 일반적인 동작 방식
• 구성요소
  • Call Stack: 작성된 함수들이 등록되는 LIFO 스택, 이벤트 루프는 콜스택이 비어있을 때까지 스택의 함수를 실행
  • Message Queue: setTimeout같은 지연실행 함수를 등록하는 FIFO 큐, 정해진 timing이 끝나고 콜스택이 비어있을 경우 등록된 함수를 콜스택에 추가
  • Job Queue: Promise에 등록된 콜백을 등록하는 FIFO 큐, 상위함수가 종료되기 전에 콜스택이 비어있지 않더라도 잡큐에 등록된 콜백을 콜스택에 추가
• 이벤트 루프의 자세한 동작 과정은 여기에 정리해두었다.