Node.js - 기초

 

Node.js

• node 공식 사이트(https://nodejs.org/ko/)의 설명에 따르면 노드란 "Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다." 라고 설명하고 있습니다. V8엔진은 구글에서 만든것으로 기존에 javascript가 브라우저내에서만 작동이 가능했던것을 브라우저가 없어도 작동할 수 있도록 만든 것입니다. 다시 위 설명에 따르면 node는 v8엔진으로 빌드되었지만 구글이 만든것은 아니구요 자바크스크립트를 실행할 수 있는 환경이라고 보시면 됩니다.
• 쉽게 말해서 node란 Javascript를 브라우저가 아닌 컴퓨터에서 브라우저 없이 실행하게 도와주는 환경을 의미합니다.

 

ES6(ECMAScript 6)

• 초기 javascript는 넷스케이프라는 웹브라우저에서 인터렉션을 강조하기 위해 생성된 언어입니다. 옛날 홈페이지들은 html과 css로 움직이지 않는 아주 정적인 홈페이지들만 있었어요. 여기에서 javascript를 추가해서 홈페이지에서 역동적인 애니메이션이나 움직임등을 추가할 수 있었어요.
• 이후에 넷스케이프외에도 IE같은 다른 브라우저들도 인터렉션을 위해 비슷한 언어를 개발하기 시작했어요. 그러다보니 개별 브라우저마다 방식이 달랐고 이게 불편해서 표준화 시키는 작업이 필요했습니다. 그렇게 나온 것이 ECMAScript입니다.
• 이 표준은 ECMAScript는 매년 꾸준히 변경되고 새로운 기능이 추가되면서 버전이 새로 나오고 있어요. 작년 2020년 기준으로 11번째 버전이 나왔네요.
• ES6란 ECMAScript의 6번째 버전으로 2015년에 발표되어서 ECMAScript 2015라고도 불립니다. (ES6, ECMAScript 2015 둘다 같은 말이에요)

 

ES6의 새로운 문법

1. • var를 사용하면 if문 밖에서도 접근이 가능해져서 코드를 분석하는데 어려움이 생겨 ES6부터는 scope라는 개념이 추가된 let을 사용할 수 있다.
   • scope란 변수의 접근을 결정한다.
   • let 사용시 if문 안에서 선언된 num은 if문 밖에서 접근이 안 되는 걸 확인 가능하다.var, let 그리고 const

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

   • const란 변하지 않는 값을 사용할 때 쓰인다.

   • const PI = 3.1415;
     PI = 3.141592; // Uncaught TypeError: Assignment to constant variable.
     
     // 한번 변수에 값을 할당하고 나면 수정할 때 이와 같은 에러가 발생한다.

   • var, let, const 비교	var	let	const
     재선언	O	X	X
     재할당	O	O	X

2. Hoisting
   • Hoisting이란 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. 그러나 실제로 코드가 끌어올려지는 게 아니라, 자바스크립트 parser 내부적으로 끌어올려서 처리하는 것
   • var 변수가 영향을 많이 받아서 가끔 프로그램이 의도한대로 동작하지 않을 때가 있으니 최대한 let과 const의 사용을 권장
3. for loop
   • student 배열의 길이(length)가 될 때까지 i란 변수가 순차적으로 커지면서 배열의 원소에 접근하는 방식

   • const students = ["John", "Jane", "Alex"]
     
     for (let i = 0; i < students.length; i++) {
     	console.log(students[i]);
     }
     
     // John
     // Jane
     // Alex

4. for of
   • for of를 사용하면 배열의 원소를 하나씩 가져올 수 있다. for loop 방법과 다르게 별도의 변수를 선언해서 배열의 길이를 알아햐 한다거나 하는 불편함이 없이 코드 작성 가능함. 배열의 원소의 개수만큼 알아서 반복된다.

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

5. 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

6. forEach
   • 문법은 생소하지만 작동하는 거 자체는 for of와 비슷하다

   • const students = ["John", "Jane", "Alex"]
     
     students.forEach(v => {
     	console.log(v);
     });
     
     // John
     // Jane
     // Alex

7. Arrow Function(화살표 함수)
   • 화살표(=>)가 있다고 해서 Arrow Function이라고 불린다. 코드 블럭(중괄호)이 있을 수도 있고, 한줄만으로 끝나는 함수의 경우 코드 블럭(중괄호)이 생략될 수 있다.

   • function hello() {
     	console.log("Hello function");
     }
     
     // 첫번째 arrow function
     const arrowFunction = () => {
     	console.log("Hello arrow function");
     }
     
     // 두번째 arrow function
     const arrowFunctionWithoutReturn = () => console.log("Hello arrow function without return");
     
     hello(); // Hello function
     arrowFunction(); // Hello arrow function
     arrowFunctionWithoutReturn(); // Hello arrow function without return
     
     // 함수가 변수에 담김
     // function hello() {...}
     // hello = () => {...}
     
     function hi() {
         console.log("hi");
     }
     
     let hi2 = () => {console.log("hi2");}
     
     // hi
     // hi2

   • // 함수에 파라미터가 있는 경우
     
     function hello() {
     	console.log("Hello function");
     }
     
     // 첫번째 arrow function
     const arrowFunction = () => {
     	console.log("Hello arrow function");
     }
     
     // 두번째 arrow function
     const arrowFunctionWithoutReturn = () => console.log("Hello arrow function without return");
     
     hello(); // Hello function
     arrowFunction(); // Hello arrow function
     arrowFunctionWithoutReturn(); // Hello arrow function without return

8. Promise
   • Javascript에서 비동기를 처리할 때 주로 사용되는 문법인데 ES6에서 처음 등장하여 많은 부분에서 사용되고 있으며 콜백 지옥(callback hell)을 해결한다.
   • Promise의 3가지 상태
     1. Pending(대기): 아래와 같이 Promise가 처음 생성되면 pending(대기) 상태가 됩니다.

        • const promise = new Promise((resolve, reject) => {});
          
          console.log(promise);
          
          // Promise { <pending> }

     2. Fulfilled(이행): 아래와 같이 Promise에서 resolve를 실행하면 Fulfilled(이행) 상태가 됩니다.

        • const promise = new Promise((resolve, reject) => {
          	resolve();
          });
          
          console.log(promise);
          
          // Promise {<fulfilled>: undefined}

     3. Rejected(실패): Promise에서 reject를 실행하면 Rejected(실패) 상태가 됩니다.

        • const promise = new Promise((resolve, reject) => {
          	reject();
          });
          
          console.log(promise);
          
          //Promise {<rejected>: undefined}

   • Producer and Consumer
     
     1. Producer: Promise를 처음 생성할때 Promise의 내부 코드블럭이 실행됩니다. 이를 executor라 하는데, executor 실행 결과에 따라 resolve 혹은 reject를 불러줍니다. 

        • const isReady = true;
          // 1. Producer
          const promise = new Promise((resolve, reject) => {
          	// Pending 상태 - executor
            console.log("Promise is created!");
            if (isReady) {
          	// Fulfilled 상태 - 정상적으로 실행
              resolve("It's ready");
            } else {
            	// Rejected 상태 - 실패
              reject("Not ready");
            }
          });
          
          // Promise is created!

     2. Consumer: Promise의 결과에 따라 후처리를 하는 부분입니다. Promise가 정상적으로 실행되어 resolve가 되었으면 then을 통해 후처리가 가능하고, reject가 될 경우 catch를 통해 후처리가 가능합니다.

        • 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
          	// promise에서 resolve가 될경우
            .then(messsage => {
              console.log(messsage);
            })
          	// promise에서 reject가 될경우
            .catch(error => {
              console.error(error);
            })
          
          // Promise is created!
          // It's ready

9. async, await
   • async와 await라는 특별한 문법을 사용하면 promise를 좀 더 편하게 사용할 수 있습니다. 

   • async function f() {
       return 1;
     }
     
     /* function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다. 
     프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 
     이행된 프라미스가 반환되도록 합니다.
     자바스크립트는 await 키워드를 만나면 프라미스가 처리(settled)될 때까지 기다립니다. 
     결과는 그 이후 반환됩니다. */

   • async function f() {
     
       let promise = new Promise((resolve, reject) => {
         // 1초 뒤에 완료라는 값을 넘겨줌
         setTimeout(() => resolve("완료!"), 1000)
       });
     
       console.log('before await');
     
       let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)
     
       console.log('after await');
     
       console.log(result); // "완료!"
     }
     
     f();
     // before await
     // 1초 뒤
     // after await
     // 완료!

   • await는 promise.then 보다 좀 더 세련되게 promise의 result 값을 얻을 수 있도록 해주는 문법이다.

   • async function showAvatar() {
     
       // JSON 읽기
       let response = await fetch('/article/promise-chaining/user.json');
       let user = await response.json();
     
       // github 사용자 정보 읽기
       let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
       let githubUser = await githubResponse.json();
     
       // 아바타 보여주기
       let img = document.createElement('img');
       img.src = githubUser.avatar_url;
       img.className = "promise-avatar-example";
       document.body.append(img);
     
       // 3초 대기
       await new Promise((resolve, reject) => setTimeout(resolve, 3000));
     
       img.remove();
     
       return githubUser;
     }
     
     showAvatar();

 

 

NPM(Node Package Manager)

• node를 사용하는데 필요한 패키지를 설치해주는 프로그램

 

객체(Object)

객체의 변수

let person = {"name": "Kyu", "age": 20}
console.log(person["name"]) // Kyu

객체의 조건문

let person = {"name": "Vui", "age": 19}
if (person["age"] >= 20) {
	console.log("Adult")
} else {
	console.log("Student")
}
// Student

객체의 반복문

var personArray = [
	{"name": "Han", "age": 20},
    {"name": "Kang", "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!  Han
// Get out!  Kang

객체의 함수

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

 

웹서버

• 웹브라우저의 주소창에 특정 주소를 적으면 브라우저는 해당 주소에 있는 웹서버를 호출하고 웹서버는 해당 홈페이지 내용을 웹브라우저에 보내주는 방식입니다.

 

웹 프레임워크

url 로 넘어온 파라미터들을 분류해서 가져오는 일이라던가, 정적인 이미지나 js 파일들을 관리하는 일, 로그인을 위한 작업 등등 웹서버라면 필요한 기능들을 미리 만들어둔 것을 프레임워크(framework)라고 합니다. 그중 express 는 node에서 웹서버를 만들기 위해 쓸 수 있는 프레임워크 중에 가장 보편적으로 쓰이는 것입니다.