[221121 - 221126] Node.js의 시작

뜨개발자·2022년 11월 27일

WIL

목록 보기

3/14

드디어 기다리던 노드 공부를 시작했다.
강의를 처음 시작하자마자나온 동기 비동기, 블로킹 논블로킹에서 멘탈이 털리고, 이벤트 루프는 손도 대지 못했다.
이러다가 혼자 낙오되는게 아닐까 걱정했는데, 두 번, 세 번을 보더라도 우선 끝까지 수강하자는 생각으로 다음 강의로 넘겼다.
다행스럽게도 오히려 뒷내용이 훨씬 수월했다!

ES란?

이전까지는 각 회사마다 서로 다른 언어를 사용하여 웹을 개발하였기 때문에, 호환되는 언어가 달라 브라우저가 달라지면 기능을 수행하지 못하는 일이 빈번했다.
이를 막기 위해 통일된 규칙이 필요했다.
다양한 표준 규격을 정하는 ECMA(European Computer Manufacturers Association)에서 결정한 Javascript 기반 표준을 ECMA Script라고 하는데, 이를 줄여 ES라고 한다.
ECMA에서는 다양한 표준을 다루고, Javascript 기반 표준에는 262번이 붙어, ECMA-262라고 하면 ES로 생각하면 된다.
ES5라고 하면 ECMA Script 5의 규격을 말한다.

ES5 vs ES6

앞서 설명한 것처럼, ES 뒤로 붙는 숫자는 버전을 의미한다고 이해하면 된다.
모던 자바스크립트라고 불리는 ES6가 나온 이후에는 매년 조금씩 업데이트가 되고 있지만, ES5와 ES6 사이에는 6년이라는 공백이 있어 많은 기능이 추가되었다.
하단에서 ES5에서 ES6로 넘어가며 추가된 기능들을 살펴본다.

let, const

ES5까지는 var를 사용했다. var는 함수 레벨 스코프를 가지며, 암묵적 재할당이 가능하다.
단점을 보완하기 위해, const와 let이 ES6에서 새롭게 추가되었다.
이들은 블록 레벨 스코프를 가진다.
여기서 호이스팅에도 변화가 생겼으나, 이는 나중에 따로 정리할 계획이다.

화살표 함수

ES6에서 화살표 함수가 추가되었다. 가독성과 유지보수성에서 장점을 가진다.
다만, 기존의 함수와는 this의 바인딩이 달라진다.

Default Parameter

함수에 매개변수가 전달되지 않았을 때, default값을 설정할 수 있게 되었다.

Template Literal

문자열을 이용할 때, 백틱(`)을 사용할 수 있게 되었다.
백틱 내 변수는 ${}을 사용하여 하나의 문자열 안에서 표현이 가능하고, 공백 문자 역시 그대로 인식한다.
\n을 사용하지 않고도 줄바꿈을 인식할 수 있는 장점도 있다.

class

단, 생성자 함수와 동일하게 동작하지는 않으며, 호이스팅이 발생하지 않는 것처럼 동작하는 let, const 키워드처럼 동작한다.

모듈

<script type="module" scr="module.mjs"></script>

위처럼 type에 module을 추가하고, 확장자명을 mjs로 변경하여 사용할 수 있다.
코드 조각을 캡슐화하고, API 부분만 외부에 노출시킬 수 있다.

destructuring 할당

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c);			//1 2 3

const per = {"name": "Choi", "hobby": "knitting"};
const {hobby, name} = per;
console.log(hobby, name);		//knitting Choi

오른쪽의 자료구조를 파괴하여 왼쪽에 할당하는 것과 같이 동작하게 된다.
배열의 경우에는 순서가 중요하며, 객체의 경우에는 키값이 중요하다.

Promise

비동기적으로 작동하는 javascript는 콜백 함수를 사용했다. 이때문에 콜백 지옥이라고 불리는 콜백 이슈가 많았다.
이를 해결하기 위해 promise의 후속 처리 메소드를 사용하여 에러 처리를 효과적으로 할 수 있게 되었다.

String 메소드

const testString = "Hello world and welcome my Velog";
console.log(testString.includes("and"));			//true
console.log(testString.startsWith("Hello"));		//true
console.log(testString.endWith("Velog"));			//true