[군 장병 AI/SW 교육] Node.js 이해하기 1 / Express.js 기초 1

군 장병 AI/SW 교육 / 엘리스 코딩 / [초급] 웹 개발 프로젝트 / Express.js 기초1 / Node.js 이해하기의 노트 필기입니다 

---

-- Node.js 이해하기 1 --

목차

 
1. ES6 <==

    가. ES6란

    나. 자주 사용되는 ES6 문법

    다. ES6 사용 효과
2. 비동기 코딩

---

가. ES6란

1) ES6

ES6 : ECMAScript* 버전 6 이후 버전을 통틀어 부름

*ECMAScript : JavaScript의 표준문법. 계속해서 발전하며, ECMAScript 버전 6 (2015년) 이후로 많은 현대적인 문법이 추가됨.

 

2) ES6를 사용하는 이유

-현대적인 문법은 생산성 향상에 도움을 주기 때문

-> 적은 코드로도 더 많은 일을 할 수 있다는 뜻

 

-Node.js는 빠르게 최신 ECMAScript를 지원 중

-자주 사용되는 유용한 문법을 익히고 적절하게 활용하자

 

3) Node.js와 ES6

-Node.js는 ES6의 모든 문법을 지원하지는 않음

-ECMA는 표준일 뿐. 강제가 아니다.

 

나. 자주 사용되는 ES6 문법

1) let, const

기존 JavaScript에서는 변수 선언을 할 때 var라는 키워드를 사용했다.

여기에는 한가지 문제점이 있는데 상수와 변수의 구분이 없다는 점이다. 

상수와 변수를 선언할 때 구분한다면 코드 작성이 더욱 쉬워진다.

ES6는 const와 let을 통해 각각 상수와 변수를 선언할 수 있다.

//기존 JavaScript 변수 선언
var Name = 'James';
var Age = 'nineteen';
Age = 'twenty';
Name = 'John'; // 오류 없음

 

//ES6 변수 선언
const Name = 'James';
let Age = 'nineteen';
Age = 'twenty';
Name = 'John'; //오류 발생

 

 

2) template string

template string은 원하는 형태로 문자열을 만들때 사용하는 기능이다.

기존에는 문자열을 만드려면 +기호와 \n과 같은 이스케이프 시퀀스를 사용해야만 했다.

 

ES6에서는 깔끔하게 ` (백틱, 키보드에서 물결표와 같이 있는 문자다. 작은 따옴표와 다르니 주의)을 이용해서 간편하게 복잡한 문자열을 만들어 낼 수 있다.

아래 두 코드의 실행 결과는 같다.

//기존 JavaScript 문자열 만들기
var Name = 'James';
var Age = 'nineteen';

/*
+를 사용해 문자열과 변수 연결
줄 바꿈 문자 \n 사용 필요
*/

var hello = 'My name is '
    + name
    + '. \n I\'m '
    + Age
    + 'years old.';
console.log(hello);

 

//ES6 문자열 만들기
const Name = 'James';
const Age = 'nineteen';

/*
문자열 사이에 간단하게 변수 사용 가능
따옴표 간단하게 사용 가능
줄 바꿈 지원
*/

const hello =
`My name is ${Name}.
I'm ${Age} years old';
console.log(hello);

 

 

3) arrow function

'=>' 좌측에 작은 따옴표 안에 들어가있는 기호를 arrow라고 한다.

arrow를 이용해 함수를 쉽게 만들 수 있음.

 

원래 함수를 만들때는 function이라는 키워드를 이용해서 함수를 만든다. 

ES6에서는 함수를 상수형으로 간편하게 만든 수 있다.

 

arrow fuction의 장점은 익명함수에서 극대화 된다.

아래 setTimeout 함수의 괄호 안에 원래는 함수를 선언한 다음에 함수의 이름을 적어야하지만, 이것을 단순하게 함수 안에 선언해 줄 수 있다.

//기존 JavaScript 함수 표현 방법
function doSomething(param) {
	console.log('do something');
}

// 익명함수 표현방법
setTimeout(function(param) {
	console.log('no name function');
}, 0)
    
// 함수새로선언가능
function doSomething() {
	console.log('do other');
}

 

// ES6 함수 표현 방법

// 상수형으로 표현 가능
const doSomething = (param) => {
	console.log('do something');
}

// 익명함수 간결하게 표현 가능
setTimeout((param) => {
	console.log('no name function');
}, 0)
    
// 함수 새로 선언 불가능
doSomething = () => {
	console.log('do other');
}

 

 

4) class

class : 객체지향 프로그램(ex. Java, C)에서 사용되는 개념

기존의 JavaScript에서는 이를 쉽게 구현하기 어려웠음

 

ES6에서는 Java나 다른 언어에서 사용되는 class라는 키워드를 똑같이 사용해서 손쉽게 class를 만들 수 있음

 

*Java같은 다른 프로그래밍을 하지 않았던 사람이라면 이런게 있다 정도만 알고 있으면 됨.

 

 

5) ES6 destructing

destructing : 어떤 자료를 분해하는 것

ES6에서는 이전보다 destructing을 간단히 할 수 있다.

//기존 JavaScript destructing
var obj = {name: 'James', age: 19};
var name = obj.name;
var age = obj.age;

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

 

// ES6 destructing
const obj = {name: 'James', age: 19};

// Object의 key와 같은 이름으로 변수 선언 가능
const {name, age} = obj;
// 다른 이름으로도 변수 선언 가능
const {name: A, age: B} = obj;

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

 

 

다. ES6 사용 효과

-복잡하거나 직관적이지 않던 방법을 보기 좋고 간결하게 표현 가능

-처음 접할 땐 어색하지만 익숙해지면 좋은 코드 작성 가능