[5주차] Node.js와 ES6

2월 16일 자 학습 내용 정리입니다.

 

 

✅ Node.js

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

Node.js를 이해하기 위해서는 Node.js의 등장 배경을 알아야 할 필요가 있다.

 

Node.js는 web의 발전에 의해 등장하게 되었다.
기존 web 1.0에서는 웹이 사용자에게 일방적으로 정보를 전달하는 단방향 통신 위주였다면 web 2.0에서는 사용자와 상호작용하도록 웹이 발전하였다.

따라서 웹 페이지의 JavaScript는 더욱 복잡해졌고 고성능의 JavaScript가 필요하게 되었다.

이에 따라 구글에서는 크롬 웹 브라우저를 위해 V8이라는 자바스크립트 엔진을 만들었고 고성능 JavaScript를 사용할 수 있게 되었다.

이 고성능 JavaScript의 등장으로 JavaScript를 브라우저 외부에서 사용하려는 시도가 생겨났고 그 결과로 Node.js가 탄생하게 되었다.

 

Browser의 JavaScript는 브라우저에서 실행하고 웹 내부의 제한된 동작들만 가능한 반면 Node.js는 크로스 플랫폼에서 실행되고 동작에 제한이 없다.

따라서 다양한 어플리케이션 개발이 가능해졌고 React, Express, Electron과 Node.js를 결합하여 여러 서비스들을 만들 수 있다.

 

 

✅ Node.js의 특징

Node.js의 특징은 싱글 스레드, 비동기, 이벤트 기반이다.

 

✔️ 싱글 스레드

먼저 스레드란 명령을 실행하는 단위로 한 개의 스레드는 한 번에 한 가지의 동작만을 실행할 수 있다.

따라서 싱글 스레드란 한 번에 한 가지 동작만을 수행한다.

싱글 스레드의 반대 개념으로는 멀티 스레드가 있는데 멀티 스레드는 동시에 여러 동작을 수행할 수 있다.

 

 

싱글 스레드의 장점으로는 스레드가 늘어나지 않고 오로지 하나만 존재하기 때문에 리소스 관리에 효율적이라는 점이 있다.
반면 단점으로는 CPU 연산 작업과 같은 스레드 기반 작업들의 효율이 떨어진다는 점이 있다.

 

✔️ 비동기

비동기란 동작을 실행한 후 완료가 되기를 기다리지 않는 것이다.
동작의 완료를 기다리지 않기 때문에 다른 동작을 바로 실행할 수 있다.
Node.js는 싱글 스레드를 이용하기 때문에 싱글 스레드의 단점을 보완하기 위해 비동기 동작으로 스레드 기반의 작업을 최소화한다.

 

✔️ 이벤트 기반

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

 

 

즉, Node.js는 싱글 스레드이기 때문에 비동기 동작을 필요로 하고 비동기 동작을 구현하기 위해 이벤트 기반으로 이루어진다.

 

 

✅ ES6

ECMAScript란 계속해서 발전해가는 JavaScript의 표준 문법으로 2015년, ECMAScript 버전 6 이후 많은 현대적인 문법들이 추가되었다. 
ES6는 ECMAScript 버전 6 이후를 통틀어 부르는 명칭이다.

 

✔️ let, const

 

var str1 = 'Hello';
var str2 = 'Hi';

str1 = 'World';
str2 = 'Galaxy'; //  str2를 상수로 사용하고 싶음에도 불구하고 오류가 일어나지 않고 값이 갱신됨

 

기존 문법은 변수 선언 시 var 키워드를 사용했다.
var 키워드는 상수와 변수 구문이 없기 때문에 상수로 사용하고 싶어도 불가능했다.

 

let str1 = 'Hello';
const str2 = 'Hi';

str1 = 'World';
str2 = 'Galaxy'; // 오류 발생

하지만 ES6에서는 let과 const를 통해 상수와 변수의 구분이 가능해졌다.
let은 변수를 선언하는 키워드이며 const는 상수를 선언하는 키워드이다.
따라서 const로 선언된 상수에 새로운 값을 추가하려고 하면 오류가 발생한다.

 

✔️ Template String

 

var name = 'Dead By Daylight';
var price = 21000;

var str = 'My favorite game is '
        + name
        + '.\n It\'s '
        + price
        + 'won.';

 

기존 문법에서는 + 연산자를 사용하여 문자열과 변수를 연결하며 줄 바꿈을 하려면 줄 바꿈 문자 \n이 필요했다.

 

const name = 'Dead By Daylight';
const price = 21000;

const str = 
`My favorite game is ${name}.
It's ${price} won.`

 

하지만 ES6 이후로는 문자열 사이에 변수를 사용하는 것이 가능해졌다.
``(백틱)으로 선언된 문자열에 대해 ${} 안에 변수명을 넣으면 바로 변수를 사용할 수 있다.
또한 줄바꿈도 지원되어 줄바꿈 문자를 따로 추가할 필요가 없어졌다.

 

✔️ arrow function

 

// 기본 함수
function Func(param){
    console.log('function');
}

// 익명 함수
setTimeout(function(param) {
    console.log('no name function');
}, 0);

// 함수 새로 선언 가능
function Func() {
    console.log('new function);
}

 

기존 문법에서는 function 키워드를 이용해 함수를 선언하였다.

또한 같은 이름의 함수를 새로 선언하는 것도 가능했다.

 

// 상수형 함수
const Func = (param) => {
    console.log('function');
}

// 익명 함수
setTimeout((param) => {
    console.log('no name function');
}, 0);

// 함수 새로 선언 불가능
Func = () => {
    console.log('new funtion');
}

 

ES6에서 arrow function이 추가되며 함수의 선언이 더욱 간결해진 것을 볼 수 있다.

Arrow Function은 function 키워드를 생략하고 매개변수를 받은 뒤 =>로 중괄호 {} 안의 로직과 연결한다.

로직 작성 시 중괄호와 return을 생략하고 바로 return할 값을 입력할 수도 있다.

이때 Func는 처음 선언 시 const에 담아 상수형으로 선언하였기 때문에 새로 선언하는 것이 불가능하다.

 

✔️ class

 

function Model(name, age) {
    this.name = name;
    this.age = age;
}

// prototype으로 class 함수 구현
Model.prototype.getInfo = function() {
    console.log(this.name, this.age);
}

var model = new Model('kiki', 3);
model.getInfo();

 

기존의 문법에는 class를 지원하지 않아 필요한 경우 prototype으로 class 함수를 구현해 사용했다.

 

// 일반적인 형태의 class 구현 가능
class Model {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    getInfo() {
        console.log(this.name, this.age);
    }
}
const model = new Model('kiki', 3);
model.getInfo();

 

ES6에서 class가 추가되며 일반적인 형태의 class 구현이 가능해졌다.

 

✔️ destructing

 

var obj = {name: 'kiki', age: 3};
var name = obj.name;
var age = obj.age;

var arr = ['first_value', 'second_value'];
var first = arr[0];
var second = arr[1];

 

기존의 문법에서 object나 array의 값을 꺼내기 위해서는 값을 직접 꺼내 변수에 저장해야 했다.

 

const obj = {name: 'kiki', age: 3};
const { name, age } = obj;
const { name: n1, age: a1 } = obj;

const arr = ['first_value', 'second_value'];
const [first, second] = arr;

 

하지만 ES6 문법에서 destructing(구조 분해 할당)이 추가되며 간단한 선언이 가능해졌다.

object에서 값을 꺼낼 때는 {} 중괄호를 사용해 key와 같은 이름으로 변수를 선언하거나 이를 이용해 새로운 이름으로 변수를 선언할 수 있다.

array에서는 [] 대괄호 기호를 사용하여 순차적으로 변수를 선언할 수 있다.

 

✔️ Shorthand property names

단축 속성명(Shorthand property names)을 사용해 새로운 객체 선언을 간편하게 할 수 있다.

단축 속성명은 새로 선언하는 object에 key 값과 동일한 변수명을 가진 변수를 할당할 경우 value를 생략할 수 있다.

 

const name = 'kiki';
const age = '14';

const obj = { name, age };

// obj = { name: 'kiki', age: '14' }

 

✔️ Optional Chaining

var x;
if( a && a.b && a.b.c ) {
    x = a.b.c;
}

 

x에 a.b.c를 저장하고 싶은데 a.b.c의 값이 유효한지 확실하지 않을 때 기존 문법에서는 위와 같이 a, a.b, a.b.c의 값이 유효한지 차례대로 검사 후 x에 값을 넣어주어야 했다.

 

Optional Chaining이 가능해진 이후 위 코드는 아래와 같이 선언할 수 있다.

 

const x = a?.b?.c;

 

Optional Chaining 연산자는 객체나 변수에 연결된 다른 속성을 참조할 때 유효한 속성인지 검사하지 않고 값을 읽을 수 있도록 해준다.

만약 유효한 속성이 아닐 경우 에러를 발생시키지 않고 undefined를 반환한다.

위 코드에서 a.b.c가 존재하면 x에 그 값이, a.b.c가 존재하지 않으면 x에 undefined가 들어가게 된다.

배열의 경우에는 array?.[index]와 같이 작성할 수 있다.