Node.js 01 - 자바스크립트 정리

Node.js - 자바스크립트가 실행될 수 있게 도와주는 런타임 플랫폼

• 자바스크립트 → 언어 간단하게 말하면? 자바스크립트는 내 생각을 코드로 표현할 수 있게 도와주는 도구
• Node.js → 런타임 플랫폼 간단하게 말하면? Node.js는 자바스크립트 코드를 브라우저가 아닌 곳에서도 실행할 수 있게 해주는 마법 상자

npm - Node Package Manager으로, 자바스크립트를 위한 패키지 관리자이다. 자바스크립트 런타임 환경의 Node.js의 그 Node가 맞다.

npm은 세계 최대의 소프트웨어 창고로, 엄청난 수의 코드 패키지를 가지고있다. 이는 오픈소스 개발자들이 그들이 개발한 소프트웨어를 공유한다.

nvm - Node Version Manager으로, Node 의 여러 버전을 사용할 때 유용하다. (Node.js의 버전관리 도구)

 

 

- undefined

원시 자료형 중 하나

값이 할당되지 않은 변수는 기본적으로 undefined 값을 가집니다.

- null

원시 자료형 중 하나

어떤 값이 비어있음을 의도적으로 표현할 때 사용됩니다.

 

- Object (객체)

{ key1: value, key2: value } 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있습니다.

다른 언어에서는 이와 같은 자료형을 Dictionary(딕셔너리)로 부르기도 하지만 JS에서의 공식 명칭은 Object입니다.

객체의 key에 접근하는 방법은 두가지 표현이 존재합니다.
    - `obj.key`
    - `obj['key']`

 

- NaN
Not a Number의 줄임말이며, Number 자료형에 속하지만 중요하므로 따로 짚고 넘어갑니다!
숫자가 아닌 값을 숫자로 변환하는 경우 NaN으로 반환됩니다.

 

퀴즈 

1) 변수 선언시 값을 할당하지 않으면 어떤 값인가요?

 - undefined

 

2) 선언되지 않은 변수를 참조하면 어떻게 되나요?

- Reference error: 변수 is not defined

 

3) 배열이 기본으로 제공해주는 함수들이 있습니다. 이 중 원하는 데이터를 필터링 해주는 함수는 뭘까요?

- .filter()

 

 

- for ... of

 Array, Map과 같은 반복 가능한(Iterable) 객체의 요소를 하나씩 반복할 수 있게 해줍니다.
(Object는 반복 가능한 객체에 해당하지 않습니다!)
지금은 배열을 하나씩 반복해주는 문법이라고 생각해도 괜찮습니다.

const persons = ['강승현', '홍길동', '김아무개'];

for (const person of persons) {
  console.log(person);
}

// Print: '강승현'
// '홍길동'
// '김아무개'

 

- for ... in

for...of 문과 유사하게 객체의 요소를 반복해주지만, 선언한 변수에 값이 직접 들어가지 않고 요소의 key를 전달합니다.

for...of 문처럼 반복 가능한(Iterable) 객체는 모두 사용할 수 있습니다.

const persons = ['강승현', '홍길동', '김아무개'];

for (const person in persons) {
	console.log(person);
}

// Print: 0
// 1
// 2

• for와 for...in은 index 를 반환하고, for...of와 forEach는 값을 반환한다.
• for...in은 객체에서 사용하고, for...of는 배열에서 사용한다.
• 속도는 for문이 가장 빠르다.

- 화살표함수

화살표함수는 return명령어 없이도 함수 실행을 종료시키고 값을 반환한다.

화살표 함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.

화살표함수에는 this와 argument가 없다.

연습코드

const people = [
    { name: "John Doe", age: 25 },
    { name: "Jane Doe", age: 19 },
    { name: "Fred Doe", age: 32 },
    { name: "Chris Doe", age: 45 },
    { name: "Layla Doe", age: 37 },
  ];

// arr = 인자
  const ageAverage = (arr) => {
      let sum = 0;
      // for of 를 사용해서 값을 가져온다, 인자로 받아온 값을 arrs에 넣음
      for(let arrs of arr){
      		// arrs에 들어온건 object 이므로, key를 사용해서 값을 꺼내온다.
          sum += arrs['age'];
      }
      const aver = sum / arr.length;

      return aver;
  };

  console.log(ageAverage(people));

 

퀴즈 

1) 함수에서 return을 사용하지 않으면 무엇을 반환할까요?

return 키워드가 없는 경우 함수는 아무런 동작을 하지 않습니다.

위와 같이 변수 c 에 a 와 b의 합을 선언하였지만 반환해주지 않아서 아무런 동작이 하지 않는것을 볼 수 있습니다.

 

- Hoisting

호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.

var은 사용불가.

let foo = 1;
{
  console.log(foo);
  let foo = 2;
}

- 동기(Sync)와 비동기(Async)에 대한 개념

일반적으로 "동기로 실행된다" 라고 함은, 먼저 실행된 코드의 결과가 나올때까지 대기하는것을 말합니다

일반적으로 "비동기로 실행된다" 라고 함은, 실행된 순서와 관계 없이 결과가 나오는것을 말합니다.

** 자바스크립트는 비동기로 실행된다.

-Blocking Model & Non-Blocking Model

Blocking Model이란, 코드의 실행이 끝나기 전까지 실행 제어권을 다른곳에 넘기지 않아 다른 작업을 하지 못하고 대기하는 것을 말합니다.

Non-blocking Model이란, 코드의 실행이 끝나지 않아도 실행 제어권을 다른곳에 넘겨 다음 코드가 실행될 수 있는것을 말합니다

자바스크립트는 Async + Non-blocking Model을 채용하여 현재 실행중인 코드의 실행이 끝나지 않아도 다음 코드를 호출합니다.

결론적으로 자바스크립트는 Non-blocking model을 가지며 각 명령이 순서대로 실행될 수 있게 구현되어 있지만, Non-blocking model에 의해 명령이 아닌 모든 함수는 비동기적으로 실행됩니다.

function first() {
  console.log('First');
}

setTimeout(first, 1000); // 1000ms(1초) 뒤에 first 함수를 실행해준다.

console.log('Middle');
console.log('Last');

// Print: Middle
// Last
// First

 

- 프로미스 (promise)

JavaScript 에서 코드가 순차적으로 일어나는 처리를 동기 처리라 하며,

특정 코드가 처리될 때 까지 기다리지 않고 다음 코드를 먼저 처리하는 걸 비동기 처리라 한다.

이러한 비동기 처리에서 콜백 지옥(Callback Hell) 등의 문제를 해소하기 위해 사용하는 객체,

즉 비동기 처리에서 순차적 처리를 행하기 위해 사용되는 객체가 프로미스(Promise)이다.

//이는 error 를 관리하기 힘들 뿐더러 코드 가독성도 떨어지는 콜백 지옥(Callback Hell)에 빠지기 쉽상이다.
function test() {
    $.ajax({
        url: '...',
        data: '...,
        type: 'post',
        success: function(response) {
            $.ajax({
                url: '...',
                data: '...',
                type: 'post',
                success: function(response) {
                    $.ajax({
                        url: '...',
                        data: '...',
                        type: 'post',
                        success: function(response) {
                            //...
                        },
                        error: function(error) {
                        }
                    });
                },
                error: function(error) {
                }
            });
        },
        error: function(error) {
        }
    });
}

Pending(대기) : Promise 객체를 생성하고, 처리 성공 또는 처리 실패 이전까지의 미완료 상태
Fulfilled(이행) : 처리가 성공적으로 이루어져 Promise 결과 값을 return 해준 상태
Rejected(실패) : 처리가 실패해 오류가 발생한 상태

 

위의 코드를 이렇게 바꿀 수 있다.

 - 콜백 지옥 탈출

function test1() {
    return new Promise(function(resolve, reject) {
        $.ajax({
            url: '...',
            data: '...',
            type: 'post',
            success : function(response) {
                resolve(); //통신 성공하면 resolve()
            },
            error: function(error) {
                reject();  //통신 실패하면 reject()
            }
        }); 
    });
}
    
function test2() {
    return new Promise(function(resolve, reject) {
        $.ajax({
            url: '...',
            data: '...',
            type: 'post',
            success : function(response) {
                resolve(); //통신 성공하면 resolve()
            },
            error: function(error) {
                reject();  //통신 실패하면 reject()
            }
        });
    }); 
}
 
function test3() {
    return new Promise(function(resolve, reject) {
        $.ajax({
            url: '...',
            data: '...',
            type: 'post',
            success : function(response) {
                resolve(); //통신 성공하면 resolve()
            },
            error: function(error) {
                reject();  //통신 실패하면 reject()
            }
        });
    });
}

//처리 성공 함수
function testSuccess() {
    console.log("성공");
    return false;
}

//처리 실패 함수
function testError() {
    console.log("실패");
    return false;
}

test1()            //test1 실행
.then(test2)       //test1 성공하면 test2 실행
.then(test3)       //test2 성공하면 test3 실행
.then(testSuccess) //test3 성공하면 처리성공함수 실행
.catch(testError); //test1, test2, test3 에서 각각 처리 실패할 때마다 처리실패함수 실행

비동기 함수의 결과 값은 항상 Promise 객체로 resolve된다

비동기 함수 안에서만 await 연산자를 사용할 수 있다.

await 연산자를 사용하면 Promise가 fulfill되거나 rejected될 때 까지 함수의 실행을 중단하고 기다릴 수 있습니다.

async function 함수이름() {
	const result = await 'Test!';
	console.log(result);
}

함수이름();
// Print: 'Test!';

퀴즈 

1) async 함수의 반환 값은 무엇일까요?

- async 함수의 결과값은 항상 Promise 객체로 resolve 되기 때문에 값은 동일

2) async 함수 안에서 Promise 객체를 반환하면 어떤 결과가 나올까요?

- async 함수 안 어딘가에서 에러가 발생하지 않았다면 async 함수의 반환 값은 무조건 Promise 객체