스파르타 코딩클럽 Node.js 기초반 수업을 듣고 있다.
지난 두 달간 개발일지 작성이 뜸했는데 일도 바빴고 정보처리기사 필기 시험을 봤다. 다들 되게 쉬운 시험이라고 했는데 나는 비전공자라 처음 보는 용어나 개념이 많아서 어려웠다. 한달 반 정도 공부해서 2주 전에 필기를 쳐서 붙었고 이제 11월에 실기 시험을 보면 된다. 앞으로 두 달 정도 남은 김에 Node.js 신청해서 듣게 되었다.

오늘까지 2주차 수업을 진행했는데, 1주차에는 javascript와 ES6 기본 문법들을 배웠고, 오늘은 라우터와 미들웨어, 템플릿 엔진에 대해서 배웠다.
각각이 어떤 개념인지 위주로 배웠고, 이번주 강의는 분량이 많지 않아서 금방 들었다.
그럼 지금까지 배운 내용을 간단히 정리해 보고 다음 주차 수업으로 넘어가도록 하겠다.

1주차 : Node.js와 ES6란?

1. Node.js란?

• node 공식 사이트 (https://nodejs.org/ko/)의 설명에 따르면 "Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다."라고 설명하고 있다.
• node는 javascript가 브라우저 내에서만 작동이 가능했던 것을 브라우저가 없어도 작동할 수 있도록 만든 것이다.
  ※ V8엔진 : V8은 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진이다.

2. ES6 (ECMAScript 6)란?

• 초기 javascript는 넷스케이프라는 웹브라우저에서 인터렉션을 강조하기 위해 생성된 언어이다. 옛날 홈페이지들은 html과 css를 사용해서 움직이지 않는 아주 정적인 홈페이지들만 있었다. 여기서 javascript를 추가해서 홈페이지에서 역동적인 애니메이션이나 움직임 등을 추가할 수 있게 되었다.
• 이후에 넷스케이프 외에도 IE같은 다른 브라우저들도 인터렉션을 위해 비슷한 언어를 개발하기 시작했다. 그렇게 하다 보니 개별 브라우저마다 방식이 달랐고 이를 표준화 시키는 작업이 필요했다. 그렇게 나온 것이 ECMAScript이다.

3. 기존 javascript 문법 복습

(1) 변수

var age = 20;
console.log(age); // 20

var name = "John Doe";
console.log(name); // John Doe

var personArray = ["John Doe", 20];
console.log(personArray[0]); // John Doe
console.log(personArray[1]); // 20

var personDict = {"name":"John Doe", "age":20}
console.log(personDict["name"]; // John Doe
console.log(personDict["age"];// 20

(2) 조건문

var personDict = {"name": "John Doe", "age": 20}

if(personDict["age"]>19 {
  console.log("Here is your beer!");
  } else {
  console.log("Get Out!");
}

(3) 반복문

var personArray = [
	{"name": "John Doe", "age": 20},
	{"name": "Jane Doe", "age": 19},
];

for (var i = 0; i<personArray.length; i++) {
 if (personArray[i]["age"] > 19 ) {
   console.log("Here is your beer!", personArray[i]["name"]);
   } else {
   console.log("Get out!", personArray[i]["name"]);
   }
}
// Here is your beer! John Doe
// Get out! Jan Doe

(4) 함수

function isValidAge(person) {
  if (person["age"] > 19) {
    return true;
  else {
    return false;
  }
}

var personArray = {
   {"name": "John Doe", "age": 20},
   {"name": "Jane Doe", "age": 19},
   ];
   
for (var i=0; i<personArray.length; i++) {
  if(isValidAge(personArray[i])) {
    console.log("Here is your beer!", personArray[i]["name"]);
  } else {
    console.log("Get out!", personArray[i]["name"]);
  }
}    
// Here is your beer! John Doe
// Get out! Jane Doe

예제 : 연령 평균 함수 구하기

function getAgeAverage(personArray) {
	var average = 0;
    
    var sum = 0;
    for (var i = 0; i < personArray.length; i++) {
    sum = sum + personArray[i]["age"];
    }
    
    average = sum / personArray.length;
    
    return average
}

var personArray = [
	{"name": "John Doe", "age": 20},
	{"name": "Jane Doe", "age": 19},
	{"name": "Fred Doe", "age": 32},
	{"name": "Chris Doe", "age": 45},
	{"name": "Layla Doe", "age": 37},
];

console.log(getAgeAverage(personArray)); // 30.6

4. ES6 새로운 문법 살펴보기

(1) var, let, const

• var를 사용했을 때, if문 밖에서도 접근이 가능해져서 코드를 분석하는 데 어려움이 생긴다. 그래서 ES6부터 scope라는 개념이 추가된 let을 사용할 수 있다.

var num = 10;

if (num == 10) {
	var num = 20;
	console.log("num in if : ", num); // num in if : 20
}

console.log(num); // 20

===
let num = 10;

if (num == 10) {
	let num = 20;
	console.log("num in if : ", num); // num in if : 20
}

console.log(num); // 10

• W3C의 Javascript Scope 정의에 따르면, Scope란 변수의 접근을 결정한다. 위에서 let을 사용한 코드는 if 문 안에서 선언된 num은 if문 밖에서 접근이 안된다.
• const는 변하지 않는 값을 사용할 때 쓰인다. 한 번 변수에 값을 할당하고 나면 수정하고자 할 때 아래와 같은 에러가 발생한다.

const PI = 3.1415;
PI = 3.141592; // Uncaught TypeError: Assignment to constant variable.

• var (재선언, 재할당 모두 가능) / let (재할당 가능) / const (모두 불가능)

(2) for loop (전통적인 방법)

const students = ["John", "Jane", "Alex"]

for (let i = 0; i < students.length; i++) {
	console.log(students[i]);
}

// John
// Jane
// Alex

(3) for of

for of를 사용하면 배열의 원소 하나씩 가져올 수 있다. for loop와 다르게 별도의 변수를 선언해서 배열의 길이를 알 필요 없이 배열의 원소의 개수만큼 알아서 반복된다.

const students = ["John", "Jane", "Alex"]
for (const student of students) {
  console.log(student);
}
//
John
Jane
Alex

(4) for in

• for in을 사용하면 배열의 순서 (index)를 가져온다. index를 가지고 위 for loop 처럼 원소를 가져오는 방식으로 원하는 원소를 가져올 수 있다.

const students = ["John", "Jane", "Alex"]

for (const index in students) {
  console.log (index, students[index]);
}
//
0 John
1 Jane
2 Alex 

(5) for Each

• for of와 작동은 비슷하다.

const students = ["John", "Jane", "Alex"]

students.forEach(v => {
 console.log(v);
});
//
John
Jane
Alex

(6) Arrow Functions

let personArray = [
	{"name": "John Doe", "age": 20},
	{"name": "Jane Doe", "age": 19},
	{"name": "Fred Doe", "age": 32},
	{"name": "Chris Doe", "age": 45},
	{"name": "Layla Doe", "age": 37},
];

// personArray의 나이 평균을 구해주는 Arrow Function을 작성해봅시다.
const getAgeAverage = (personArray) => {
  let sum = 0;
  for (let person of personArray) {
  sum = sum + person["age"];
}
  const average = sum / personArray.length;
  return average;
}
console.log(getAgeAverage(personArray));

(7) Promise

• 프로미스란 Javascript에서 비동기를 처리할 때 주로 사용되는 문법인데 ES6에서 처음 등장하여 지금까지 많은 부분에서 사용되고 있으며 콜백지옥 (callback hell)을 해결하였다.
• promise 사용해보기

const isReady = true;
// 1. Producer
const promise = new Promise((resolve, reject) => {
  console.log("Promise is created!");
  if (isReady) {
    resolve("It's ready");
  } else {
    reject("Not ready");
  }
});

// 2. Consumer
promise
  .then(message => {
   console.log(message);
  })
  .catch(error => {
   console.error(error);
  })
  .finally(() => {
   console.log("Done");
  });
  
  // Promise is created!
  // It's ready
  // Done

• Promise의 상태는 총 세가지가 있다.
  ⓐ pending (대기) : Promise가 처음 생성될 때
  ⓑ Fulfilled (이행) : Promise에서 resolve를 실해앟여 Fulfilled (이행) 상태가 됨
  ⓒ Rejected (실패) : Promise에서 reject를 실행하면 Rejected(실패) 상태가 됨

• Producer and Consumer
  ⓐ Producer : Promise를 처음 생성할 때 Promise의 내부 코드블럭이 실행된다. 이를 executor라 하는데, executor 실행 결과에 따라 resolve또는 reject를 불러준다.
  ⓑ Consumer : Promise의 결과에 따라 후처리를 한다. Promise가 정상적으로 실행되서 resolve가 되었으면 then을 통해 후처리를 하고, reject가 될 경우 catch를 통해 후처리를 한다.

(8) Async, await

• function 앞에 async를 붙이면 해당 함수는 항상 promise를 반환한다. promise가 아닌 값을 반환하더라도 이행 상태의 promise (resolved promise)로 값을 감싸 이행된 promise가 반환되도록 한다.
• 자바스크립트는 await 키워드를 만나면 promise가 처리 (settled) 될 때까지 기다린다.

5. Express 살펴보기

• Node.js에서도 웹서버를 만들 수 있는데, 웹서버를 만들기 위해 해야 하는 일들이 있다. 웹서버라면 필요한 기능들을 미리 만들어 둔것을 프레임워크 (framework)라고 한다. 이 중 express는 node에서 웹서버를 만들기 위해 쓸 수 있는 프레임워크 중에 가장 보편적으로 쓰이는 것이다.
• 1주차에서는 package.json과 express를 설치하고 package.json 파일에 express관련된 내용이 들어 있는지까지 확인했다. 그리고 express를 활용하여 localhost:3000에 접속하면 "Hello World"를 보여주는 서버까지 만드는 것으로 마무리 하였다.