[노드 2] 2장. 알아둬야 할 자바스크립트

🌟2장 키워드🌟

ES2015

자바스크립트와 프로토타입

비동기

프로미스, async/await

AJAX

 

 

2.1. ES2015

ES2015는 ES6라 부르기도 하며, 2015년에 새로운 문법을 도입하여 개선된 자바스크립트 문법을 말합니다.

이번 장에서는 ES2015 이상의 자바스크립트에서 알아두면 좋은 문법 몇 가지를 소개하도록 하겠습니다. 

 

2.1.1. const, let

• 변수 선언이 var에서 const, let으로 대체되었습니다.

if (true) {
  var x = 3;
}
console.log(x); // 3

if (true) {
  const y = 3;
}
console.log(y); // Uncaught ReferenceError: y is not defined

var	const	let
함수 스코프, 블록 밖에서 접근 가능	블록 스코프, 블록 밖에서 접근 불가능	블록 스코프, 블록 밖에서 접근 불가능
한 번 값을 할당해도 변경 가능	한 번 값을 할당하면 변경 불가능	한 번 값을 할당해도 변경 가능

• 변수 선언 시에는 기본적으로 const를 사용하되, 다른 값을 할당하는 상황이 생길 때 let을 사용하는 것을 추천합니다.

 

2.1.2 템플릿 문자열

• ES2015 문법에 백틱(`)으로 감싸는 새로운 문자열이 생겼습니다.

const num3 = 1;
const num4 = 2;
const result2 = 3;
const string2 = `${num3} 더하기 ${num4}는 '${result2}'`;
console.log(string2);  // 1 더하기 2는 '3'

• ${변수} 형식으로 변수를 더하기 기호 없이 문자열에 넣을 수 있습니다.
• 백틱을 사용하므로 큰따옴표와 작은따옴표와 함께 사용 가능하다는 장점이 있습니다.

 

2.1.3 객체 리터럴

• 객체 리터럴에 편리한 기능들이 추가되었습니다.

var sayNode = function() {
    console.log('Node');
};
var es='ES';

var oldObject = {
		sayJS: function() {              // 1번
		    console.log('JS');
    },
		sayNode: sayNode,                // 2번
}
oldObject[es + 6] = 'Fantastic';         // 3번
oldObject.sayNode();
oldObject.sayJS();
console.log(oldObject.ES6);

const newObject = {
    sayJS(){
        console.log('JS');
    },
    sayNode,
    [es+6]:'Fantastic',
};
newObject.sayNode();      // Node
newObject.sayJS();        // JS
console.log(newObject.ES6);  // Fantastic

1. 객체의 메서드에 함수를 연결할 때 콜론(:)과 function을 붙이지 않아도 됩니다.
2. sayNode처럼 속성명과 변수명이 동일한 경우는 한 번만 써도 됩니다.
3. 객체의 속성명을 동적으로 생성할 수 있습니다.
   📌  이전에는 객체 리터럴(oldObject) 바깥에서 [es+6]를 해야 했었는데,
          이제 객체 리터럴(newObject) 안에 동적 속성을 선언할 수 있습니다.

• 코딩의 편의성을 향상시키고자 만들어졌으며, 익숙해지면 코드의 양을 많이 줄일 수 있습니다.

 

2.1.4 화살표 함수

function add1(x, y) {
	return x + y;
}
  
const add2 = (x, y) => {
	return x + y;
};
  
const add3 = (x, y) => x + y;
  
const add4 = (x, y) => (x + y);
  
function not1(x) {
	return !x;
}
  
const not2 = x => !x;

• function 선언 대신 => 기호로 함수를 선언합니다.
• 변수에 대입하여 나중에 재사용할 수 있습니다.
• 내부에 return문밖에 없는 경우, return 대신 사용 가능합니다.

 

// 기존 function과 다른 점 : this 바인드 방식
var relationship1 = {
	name: 'zero',
	friends: ['nero', 'hero', 'xero'],
	logFriends: function() {   // function 선언문 사용
		var that = this; // relationship1을 가리키는 this를 that에 저장
		this.friends.forEach(function (friend) {
			console.log(that.name, friend);
		});
	},
};
relationship1.logFriends();

var relationship2 = {
	name: 'zero',
	friends: ['nero', 'hero', 'xero'],
	logFriends() {     // :, function 없음
		//var that = this; 필요 없음.
		this.friends.forEach(friend => {
			console.log(this.name, friend);
		});
	},
};
relationship2.logFriends();

relationship1 (기존)	relationship2 (ES2015 이후)
logFriends() 안의 forEach문에서 function 선언문 사용	logFriends() 안의 forEach문에서 화살표 함수 사용
각자 다른 함수 스코프의 this를 가지므로 that이라는 변수를 사용해서 relationship1에 간접적으로 접근	바깥 스코프인 logFriends()의 this를 그대로 사용  (상위 스코프의 this를 그대로 사용)

 

2.1.5. 구조분해 할당

• 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있습니다.

// 객체의 속성을 같은 이름의 변수에 대입하는 코드
var candyMachine = {
	status: {
		name: 'node',
		count: 5,
	},
	getCandy: function () {
		this.status.count--;
		return this.status.count;
	},
};
var getCandy = candyMachine.getCandy;
var count = candyMachine.status.count;

// 다음과 같이 변경
const candyMachine = {
	status: {
		name: 'node',
		count: 5,
	},
	getCandy() {    // :, function 삭제
		this.status.count--;
		return this.status.count;
	},
};
const { getCandy, status: { count } } = candyMachine;

• candyMachine 객체 안의 속성을 찾아서 변수와 매칭합니다.
• 위 코드는 getCandy와 count 변수가 초기화된 것입니다.

 

// 배열에 대한 구조 분해 할당 문법
var array = ['nodjs', {}, 10, true];
var node = array[0];
var obj = array[1];
var bool = array[3];

// 다음과 같이 변경
const array = ['nodejs', {}, 10, true];
const[node, obj, , bool] = array;    // 10은 무시

• node는 배열의 첫 번째 요소, obj는 두 번째 요소, bool은 네 번째 요소입니다.
• 10에는 변수명을 지어주지 않았으므로 10은 무시합니다.

 

2.1.6. 클래스

• 프로토타입 기반 문법을 보기 좋게 클래스로 바꾼 것이기 때문에,
  클래스 기반의 동작이 아닌 프로토타입 기반으로 동작합니다.

📌 프로토타입이란?
https://www.nextree.co.kr/p7323/

// 프로토타입 상속 예제 코드
var Human = function(type) {
  this.type = type || 'human';
};

Human.isHuman = function(human) {
  return human instanceof Human;
}

Human.prototype.breathe = function() {
  alert('h-a-a-a-m');
};

var Zero = function(type, firstName, lastName) {
  Human.apply(this, arguments);        // 상속받는 부분
  this.firstName = firstName;
  this.lastName = lastName;
};

Zero.prototype = Object.create(Human.prototype);  // 상속받는 부분
Zero.prototype.constructor = Zero; // 상속하는 부분
Zero.prototype.sayName = function() {
  alert(this.firstName + ' ' + this.lastName);
};
var oldZero = new Zero('human', 'Zero', 'Cho');
Human.isHuman(oldZero); // true

• Human 생성자 함수가 있고, Zero 생성자 함수가 그 함수를 상속합니다.
• 코드가 난해하고 복잡하다는 단점이 있습니다.

 

// 클래스 기반 코드 (동작은 프로토타입 기반)
class Human {
  constructor(type = 'human') {
    this.type = type;
  }

  static isHuman(human) {       // staic 키워드로 전환
    return human instanceof Human;
  }

  breathe() {
    alert('h-a-a-a-m');
  }
}

class Zero extends Human {  
  constructor(type, firstName, lastName) {
    super(type);  
    this.firstName = firstName;
    this.lastName = lastName;
  }

  sayName() {
    super.breathe();
    alert(`${this.firstName} ${this.lastName}`);
  }
}

const newZero = new Zero('human', 'Zero', 'Cho');
Human.isHuman(newZero); // true

• 생성자 함수는 constructor안으로 들어갑니다.
• Human.isHuman 같은 클래스 함수는 static 키워드로 전환됩니다.
• 프로토타입 함수가 class 블록 안에 포함돼서 어떤 함수가 어떤 클래스 소속인지 확인하기 쉽다는 장점이 있습니다.
• extends 키워드로 쉽게 상속할 수 있습니다.
• 그러나 자바스크립트는 여전히 프로토타입 기반으로 동작합니다.

 

2.1.7. ⭐프로미스⭐

자바스크립트와 노드에서는 주로 비동기를 접하며, 특히 이벤트 리스너를 사용할 때 콜백 함수를 자주 사용한다는 특징이 있습니다. 그러나 ES2015부터는 자바스크립트와 노드의 API들이 콜백 대신 프로미스(Promise) 기반으로 재구성됩니다.
📌 비동기란?

2022.09.19 - [22-23/22-23 Node.js] - [Node.js] 1장 노드 시작하기

 

✔ 프로미스를 활용하여 악명 높은 콜백 지옥에서 탈출해 봅시다!

const condition = true; // true면 resolve, false면 reject
const promise = new Promise((resolve, reject) => {   // 프로미스 생성
  if (condition) {
    resolve('성공');
  } else {
    reject('실패');
  }
});
// 다른 코드가 들어갈 수 있음
promise
  .then((message) => {
    console.log(message); // 성공(resolve)한 경우 실행
  })
  .catch((error) => {
    console.error(error); // 실패(reject)한 경우 실행
  })
  .finally(() => { // 끝나고 무조건 실행
    console.log('무조건');
  });

• promise 안에는 resolve와 reject를 매개변수로 갖는 콜백 함수를 넣습니다.
  ✔ resolve ⇒ then이 실행됩니다.
  ✔ reject ⇒ catch가 실행됩니다.
  ✔ finally ⇒ 상관없이 반드시 실행됩니다.
• resolve와 reject에 넣어준 인수는 각각 then과 catch의 매개변수에서 받습니다.

 

⭐프로미스란?

• 실행은 바로 하되 결괏값은 나중에 받는 객체입니다.
• new Promise는 바로 실행되지만, 결괏값은 then이나 catch 메서드를 통해 받게 됩니다.

• 프로미스를 return한 경우 프로미스가 수행된 후 다음 then이나 catch가 수행됩니다.

 

프로미스 응용

// 콜백을 쓰는 패턴
function findAndSaveUser(Users) {
  Users.findOne({}, (err, user) => { // 첫 번째 콜백
    if (err) {
      return console.error(err);
    }
    user.name = 'zero';
    user.save((err) => { // 두 번째 콜백
      if (err) {
        return console.error(err);
      }
      Users.findOne({ gender: 'm' }, (err, user) => { // 세 번째 콜백
        // 생략
      });
    });
  });
}

• 콜백 함수가 세 번 중첩되어 코드의 깊이가 깊어집니다.
• 각 콜백 함수마다 따로 에러 처리를 해야 합니다.

// 프로미스로 바꾼 코드
function findAndSaveUser(Users) {
  Users.findOne({})
    .then((user) => {
      user.name = 'zero';
      return user.save();
    })
    .then((user) => {
      return Users.findOne({ gender: 'm' });
    })
    .then((user) => {
      // 생략
    })
    .catch(err => {
      console.error(err);
    });
}

• then 메서드들은 순차적으로 실행됩니다.
• 에러는 마지막 catch에서 한 번에 처리할 수 있습니다.

 

프로미스 여러 개를 한번에 실행

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
Promise.all([promise1, promise2])
  .then((result) => {
    console.log(result); // ['성공1', '성공2'];
  })
  .catch((error) => {
    console.error(error);
  });

• 프로미스가 여러 개 있을 때 전부 Promise.all에 넣으면 모두 resolve 될 때까지 기다렸다가 then으로 넘어갑니다.
• Promise 중 하나라도 reject 되면 catch로 넘어갑니다.

어떤 프로미스에서 reject 되었는지 알기 위해서는 Promise.allSettled를 사용해야 합니다.

// Promise.allSettled 사용
const promise1 = Promise.resolve('성공1');
const promise2 = Promise.reject('실패2');
const promise3 = Promise.resolve('성공3');
Promise.allSettled([promise1, promise2, promise3])
  .then((result) => {
    console.log(result);
/* [
*    { status: 'fulfilled', value: '성공1' },
*    { status: 'rejected', reason: '실패2' },
*    { status: 'fulfilled', value: '성공3' }
*  ]
*/
  })
  .catch((error) => {
    console.error(error);
  });

 

try {
  Promise.reject('에러');
} catch (e) {
  console.error(e); // UnhandledPromiseRejection: This error originated either by throwing inside...
}

Promise.reject('에러').catch(() => {
  // catch 메서드를 붙이면 에러 발생하지 않음
})

• Node 16 버전부터는 reject 된 Promise에 반드시 catch 메서드를 붙여야 합니다.
  그렇지 않으면 UnhandledPromiseRejection에러가 발생하게 됩니다.

 

2.1.8. async/await

• ES2017에서 추가되었으며, 비동기 위주로 프로그래밍을 해야 할 때 도움이 됩니다.
• 계속 반복되는 then과 catch까지 줄여 코드를 한 번 더 깔끔하게 정리해 봅시다.

// 기존코드
function findAndSaveUser(Users) {
  Users.findOne({})
    .then((user) => {
      user.name = 'zero';
      return user.save();
    })
    .then((user) => {
      return Users.findOne({ gender: 'm' });
    })
    .then((user) => {
      // 생략
    })
    .catch(err => {
      console.error(err);
    });
}

// async/await를 사용한 코드
async function findAndSaveUser(Users) {
  try {
    let user = await Users.findOne({});
    user.name = 'zero';
    user = await user.save();
    user = await Users.findOne({ gender: 'm' });
    // 생략
  } catch (error) {
    console.error(error);
  }
}

✔ 함수 선언부를 일반 함수에서 async function으로 교체합니다.
✔ 프로미스 앞에 await을 붙입니다.

이제 함수는 해당 프로미스가 resolve 될 때까지 기다린 후 다음 로직으로 넘어갑니다.

(await Users.findOne()이 resolve될 때까지 기다렸다가 user 변수가 초기화)

 

// 화살표 함수 + async 함께 사용
const findAndSaveUser = async (Users) => {
  try {
    let user = await Users.findOne({});
    user.name = 'zero';
    user = await user.save();
    user = await Users.findOne({ gender: 'm' });
    // 생략
  } catch (error) {
    console.error(error);
  }
};

// for문과 async/await를 통한 프로미스 순차적 실행
const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
(async () => {
  for await (promise of [promise1, promise2]) {
    console.log(promise);
  }
})();

// 실행 후 then을 붙이거나 또 다른 함수 안에서 await 붙여 처리
async function findAndSaveUser(Users) {
  // 생략
}

findAndSaveUser().then(() => { /* 생략 */ });
// 또는
async function other() {
  const result = await findAndSaveUser();
}

💡 앞으로 중첩되는 콜백 함수가 있다면 프로미스를 거쳐 async/await 문법으로 바꾸는 연습을 해봅시다!

 

2.1.9. Map/Set

• Map, Set은 ES2015에 추가된 새로운 자료구조입니다.
• Map은 객체와 유사하며, Set은 배열과 유사합니다.

const m = new Map();

m.set('a', 'b'); // set(키, 값)으로 Map에 속성 추가
m.set(3, 'c'); // 문자열이 아닌 값을 키로 사용 가능합니다.
const d = {};
m.set(d, 'e'); // 객체도 됩니다.

m.get(d); // get(키)로 속성 값 조회
console.log(m.get(d)); // e

m.size; // size로 속성 개수 조회
console.log(m.size) // 3

for (const [k, v] of m) { // 반복문에 바로 넣어 사용 가능합니다.
  console.log(k, v); // 'a', 'b', 3, 'c', {}, 'e'
} // 속성 간의 순서도 보장됩니다.

m.forEach((v, k) => { // forEach도 사용 가능합니다.
  console.log(k, v); // 'a', 'b', 3, 'c', {}, 'e'
});

m.has(d); // has(키)로 속성을 존재 여부를 확인합니다.
console.log(m.has(d)); // true

m.delete(d); // delete(키)로 속성을 삭제합니다.
m.clear(); // clear()로 전부 제거합니다.
console.log(m.size); // 0

• Map은 속성들 간의 순서가 보장이 되며, 반복문을 사용할 수 있습니다.
• 속성명(키 값)으로 문자열이 아닌 값도 사용할 수 있고, size 메서드를 통해 속성의 수를 쉽게 알 수 있습니다.

 

const s = new Set();
s.add(false); // add(요소)로 Set에 추가합니다.
s.add(1);
s.add('1');
s.add(1); // 중복이므로 무시됩니다.
s.add(2);

console.log(s.size); // 중복이 제거되어 4

s.has(1); // has(요소)로 요소 존재 여부를 확인합니다.
console.log(s.has(1)); // true

for (const a of s) {
  console.log(a); // false 1 '1' 2
}

s.forEach((a) => {
  console.log(a); // false 1 '1' 2
})

s.delete(2); // delete(요소)로 요소를 제거합니다.
s.clear(); // clear()로 전부 제거합니다.

• Set은 중복이 불가능합니다.
• 기존 배열에서 중복을 제거하고 싶을 때도 Set을 사용할 수 있습니다.

 

2.1.10. 널 병합/옵셔널 체이닝

??(널 병합) 연산자와 ?.(옵셔널 체이닝) 연산자는 ES2020에서 추가된 연산자들입니다.

 

• ✔ ??( 널 병합) 연산자는 주로 || 연산자 대용되며, null과 undefined만 따로 구분합니다.

const a = 0;
const b = a || 3;  // || 연산자는 falsy 값이면 뒤로 넘어감
console.log(b); // 3

const c = 0;
const d = c ?? 3; // ?? 연산자는 null과 undefined일 때만 뒤로 넘어감
console.log(d); // 0;

const e = null;
const f = e ?? 3;
console.log(f);  // 3;

const g = undefined;
const h = g ?? 3;
console.log(h);  // 3;

 

• ?. (옵셔널 체이닝) 연산자는 null이나 undefinde의 속성 조회 시 에러가 발생하는 것을 막습니다.

const a = {}
a.b; // a가 객체이므로 문제없음

const c = null;
try {
	c.d;  // undefined
} catch (e) {
	console.error(e);   // TypeError : Cannot read properties of null (reading 'd')
}
c?.d; // 문제없음

try {
	c.f(); // undefined
} catch (e) {
	console.error(e);  // TypeError : Cannot read properties of null (reading 'd')
}
c?.f(); // 문제없음

try {
	c[0]; // undefined
} catch (e) {
	console.error(e); // TypeError : Cannot read properties of null (reading 'd')
}
c?.[0]; // 문제없음

✔ 옵셔널 체이닝 연산자는 TypeError: Cannot read properties of undefined 또는 null 에러의 발생 빈도를 획기적으로 낮출 수 있습니다.

 

📍 함께 보면 좋은 자료

https://developer.mozilla.org/ko/docs/Web/JavaScript

https://github.com/tc39/proposals

 

 

 

2.2. 프런트엔드 자바스크립트

프런트엔드에 사용되는 몇 가지 자바스크립트 기능들(HTML에서 script 태그 안에 작성하는 부분)을 설명합니다. 

 

2.2.1. AJAX (Asynchronous Javascript And XML)

• 비동기적 웹 서비스를 개발할 때 사용하는 기법입니다.
• 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술입니다.
• AJAX 요청은 jQuery나 axios 같은 라이브러리를 이용해서 보냅니다.

// GET 요청 보내기
  axios.get('<<a href=https://www.zerocho.com/api/get>https://www.zerocho.com/api/get</a>>')
    .then((result) => {
      console.log(result);
      console.log(result.data); // {}
    })
    .catch((error) => {
      console.error(error);
    });

• axios.get도 내부에 new Promise가 들어있어 then과 catch 사용할 수 있습니다.

 

// 프로미스이므로 async/await 방식으로 변경
(async () => {
  try {
    const result = await axios.get('<<a href=https://www.zerocho.com/api/get>https://www.zerocho.com/api/get</a>>');
    console.log(result);
    console.log(result.data); // {}
  } catch (error) {
    console.error(error);
  }
})();

• 프로미스이므로 async/await 방식으로 변경할 수 있습니다.

 

// POST방식의 요청 보내기
(async () => {
  try {
    const result = await axios.post('<<a href=https://www.zerocho.com/api/post/json>https://www.zerocho.com/api/post/json</a>>', {
      name: 'zerocho',
      birth: 1994,
    });
    console.log(result);
    console.log(result.data);
  } catch (error) {
    console.error(error);
  }
})();

• Post 방식의 요청을 보낼 때는 axios.post를 사용합니다.

 

2.2.2. FormData

• HTML form 태그의 데이터를 동적으로 제어할 수 있는 기능입니다.
• 주로 AJAX와 함께 사용합니다.

<script>
  // FormData 생성자로 formData 객체 생성
  const formData = new FormData();
  formData.append('name', 'zerocho');  // 키-값 형식의 데이터 저장
  formData.append('item', 'orange');   // 키 하나에 여러 개의 값 저장
  formData.append('item', 'melon');
  formData.has('item'); // true        // has: 주어진 키에 해당하는 값이 있니?
  formData.has('money'); // false;
  formData.get('item');// orange       // 주어진 키에 해당하는 값 하나 가져오기
  formData.getAll('item'); // ['orange', 'melon'];   모든 값 가져오기
  formData.append('test', ['hi', 'zero']);
  formData.get('test'); // hi, zero
  formData.delete('test');             // 현재 키 제거
  formData.get('test'); // null  
  formData.set('item', 'apple');       // 현재 키 수
  formData.getAll('item'); // ['apple'];
</script>

// axios로 폼 데이터를 서버에 전송
(async () => {
  try {
    const formData = new FormData();
    formData.append('name', 'zerocho');
    formData.append('birth', 1994);
    const result = await axios.post('<<a href=https://www.zerocho.com/api/post/formdata>https://www.zerocho.com/api/post/formdata</a>>', formData);
    console.log(result);
    console.log(result.data);
  } catch (error) {
    console.error(error);
  }
})();

 

2.2.3. encodeURIComponent, decodeURIComponent

• 서버가 한글 주소를 이해하지 못하는 경우 사용합니다.

  (async () => {
    try {
      const result = await axios.get(`<a href=https://www.zerocho.com/api/search/$>https://www.zerocho.com/api/search/$</a>{encodeURIComponent('노드')}`);
      console.log(result);
      console.log(result.data); // {}
    } catch (error) {
      console.error(error);
    }
  })();

 

 

✔ 받는 쪽에서는 decodeURIComponent를 사용하여 복호화합니다.

 

2.2.4. 데이터 속성과 dataset

• HTML5에서 HTML과 관련된 데이터를 저장하는 공식적인 방법입니다.

<ul>
  <li data-id="1" data-user-job="programmer">Zero</li>
  <li data-id="2" data-user-job="designer">Nero</li>
  <li data-id="3" data-user-job="programmer">Hero</li>
  <li data-id="4" data-user-job="ceo">Kero</li>
</ul>
<script>
  console.log(document.querySelector('li').dataset);  // 첫번째 li 태그의 데이터속성에 접근
  // { id: '1', userJob: 'programmer' }
</script>

✔ HTML 태그의 속성으로 data-로 시작하는 것들을 넣습니다.

 

• 자바스크립트로 쉽게 접근할 수 있습니다.
  ✔ dataset의 속성을 통해 첫 번째 li 태그의 데이터 속성에 접근
• data- 접두어는 사라지고 -뒤에 위치한 글자는 대문자가 됩니다.
  ✔ data-id → id, data-user-job → userJob
• dataset에 데이터를 넣어도 HTML 태그에 반영됩니다.
  ✔ dataset.monthSalary = 10000; → data-month-salary="10000"

 

 

[출처] 조현영, 『Node.js 교과서』, 길벗(2020), p65-91

 

 

---

빈칸 채우기 문제 (빈칸을 드래그해서 정답을 맞혀 보세요!)

1. (ES2015)는 ES6라 부르기도 하며, 2015년에 새로운 문법을 도입하여 개선된 자바스크립트 문법을 말합니다.
2. ES2015 문법에 (백틱(`))으로 감싸는 새로운 문자열이 생겼습니다. (${변수}) 형식으로 변수를 더하기 기호 없이 문자열에 넣을 수 있습니다.
3. 자바 스크립트의 클래스 문법은 (프로토타입) 기반 문법을 보기 좋게 클래스로 바꾼 것이기 때문에,
   클래스 기반의 동작이 아닌 (프로토타입) 기반으로 동작합니다.
4. ES2015부터는 자바스크립트와 노드의 API들이 콜백 대신 (프로미스(Promise))기반으로 재구성되었으며, 이를 활용하면 중첩되는 콜백 코드를 줄일 수 있습니다.
5. (async/await)는 ES2017에서 추가되었으며, 비동기 위주로 프로그래밍을 해야 할 때 도움이 됩니다. 이를 활용하면 프로미스에서 then과 catch가 반복될 때 코드를 간단히 줄일 수 있습니다.
6. (?.(옵셔널 체이닝) 연산자)는  null이나 undefinde의 속성 조회 시 에러가 발생하는 것을 막는 연산자이며, TypeError: Cannot read properties of undefined 또는 null 에러의 발생 빈도를 획기적으로 낮출 수 있습니다.
7. (AJAX)는 비동기적 웹 서비스를 개발할 때 사용하는 기법이며, 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술입니다.

 

 

코드 문제

1. 프로미스를 활용해서 위 코드를 바꿔보세요.

function findAndSaveUser(Users) {
  Users.findOne({}, (err, user) => { // 첫 번째 콜백
    if (err) {
      return console.error(err);
    }
    user.name = 'zero';
    user.save((err) => { // 두 번째 콜백
      if (err) {
        return console.error(err);
      }
    });
  });
}

정답 보기

function findAndSaveUser(Users) {
  Users.findOne({})
    .then((user) => {
      user.name = 'zero';
      return user.save();
    })
    .catch(err => {
      console.error(err);
    });
}

 

2. async/await 문법을 사용해 위 코드를 바꿔보세요.

function findAndSaveUser(Users) {
  Users.findOne({})
    .then((user) => {
      user.name = 'zero';
      return user.save();
    })
    .then((user) => {
      return Users.findOne({ gender: 'm' });
    })
    .catch(err => {
      console.error(err);
    });
}

정답 보기

async function findAndSaveUser(Users) {
  try {
    let user = await Users.findOne({});
    user.name = 'zero';
    user = await user.save();
    user = await Users.findOne({ gender: 'm' });
  } catch (error) {
    console.error(error);
  }
}

 

---

Node.js #2 

Editor : 파오리