🦁_21.12.27 TIL

21년 12월 27일

📝 코드라이언 - 일단 만드는 node.js

📃 Chapter_2 Node.js와 친해지기

📎 node.js

• Javascript 런타임
  => 런타임: 프로그래밍 언어가 구동되는 환경
• 이벤트 기반, non-blocking I/O 모델을 사용
  => 가볍고 효율적

node.js의 등장 이전

• 브라우저 내에서 JavaScript가 독점적으로 이용할 수 있었으나, 브라우저 내에서만 사용할 수 있으므로 확장성이 좋지 않았다.
• node.js의 등장으로 브라우저 뿐만 아니라 서버, 머신러닝 데스크탑 앱 등 JavaScript라는 프로그래밍 언어가 구동될 수 있는 환경이 확장되었다.
  => JavaScript를 이용할 수 있는 분야를 넓힘

📎 이벤트 기반 : 이벤트 발생 시 미리 지정해둔 작업을 수행하는 방식

// 설명을 위한 예시 코드
function delay() {
  // 시간이 오래 걸리는 작업
  console.log("작업 끝");
}

console.log("시작");
setTimeout(delay(), 3000); // 딜레이 되는 지점
console.log("끝");

1. 실행 순서대로 호출스택에 쌓기
   호출스택 : [시작, delay(), 끝]

2. 백그라운드 필요작업은 백드라운드로 이동
   setTimeout()함수는 백드라운드가 필요하다
   => delay()함수 백그라운드로 이동

3. 백그라운드에서 작업이 완료되면 태스크 큐로 이동
   태스크 큐 : [작업 끝]
   => 태스크 큐에서 계속 대기를 하고 있다가

4. 호출스택들이 다 완료되면 이벤트 루프가 태스크 큐에 있는 작업을 호출 스택으로 이동시키면서 호출 스택에 있는 작업이 실행된다.
   호출스택 : [작업 끝]

=> 호출 스택, 백그라운드, 태스크 큐, 이벤트 루프라는 이벤트 기반 시스템을 통해서 코드들을 더 효과적이고 효율적으로 실행시키도록 만들어 준다.

📎 논 블로킹 I/O, 블로킹 I/O

논 블로킹 I/O (Non-blocking Input/Output)

1. 이전 작업이 완료될 때까지 기다리지 않고, 다음 작업들을 수행
2. 오래 걸리는 작업은 백그라운드에서 처리

시간이 오래 걸리는 작업은 백그라운드에서 처리를 하고, 작업을 요청하는 동안 클라이언트는 계속해서 요청을 보낼 수 있다.
=> 서버에서 요청이 완료되는 즉시 바로 응답
=> 기다리지 않고 요청과 응답을 할 수 있는 구조

블로킹 I/O

클라이언트가 서버에게 3분정도 걸리는 요청을 했다고 가정
=> 서버가 3분 동안 일을 처리하고, 그 3분 동안 클라이언트는 자신의 작업을 중지해야 한다.
=> 서버가 일을 마치면, 그 응답 값을 클라이언트에게 주고 요청과 응답이 끝나게 된다.

• 치명적인 단점 : 클라이언트가 3시간 정도의 긴 시간이 걸리는 요청을 했을 경우, 클라이언트는 3시간 동안 대기를 해야한다. 서버가 그 작업을 끝내지 않은 경우, 다음 작업을 수행할 수 없다.
  예시) sns에서 실수로 좋아요를 눌렀는데 이 작업이 30분 정도 걸린다고 가정
  => 30분 동안 움직이지 않는 sns 서비스를 보면서 대기를 해야한다.

=> 시간이 길어지는 작업의 경우 효율적이지 못한 구조를 가짐
=> 이 문제를 해결하기 위해 논 블로킹 I/O가 등장하게 됨

📎 싱글 스레드

• 주어진 작업을 한 개의 스레드가 처리하는 방식
  => 스레드 : 작업을 실행하는 단위

  브라우저에서 스레드로 요청을 보내고, 스레드는 작업이 완료되면 브라우저로 응답을 보내는 방식

싱글스레드

1. 주어진 작업을 혼자 처리하는 방식
2. 스레드에 문제가 생길 시 전체에 문제가 생길 가능성이 있음
3. 메모리나 기타 자원을 효율적으로 사용 가능

멀티스레드

1. 여러 개의 스레드가 일을 나눠 처리
2. 하나의 스레드가 문제 생겨도 다른 스레드로 대체 가능
3. 스레드 간의 작업 전환 비용, 놀고 있는 스레드 문제 발생

📎 노드의 장단점

장점

• 싱글 스레드, 논 블로킹 I/O에 따른 빠른속도
• 컴퓨터 자원을 덜 사용
• I/O 작업이 많은 서버로 적합(채팅, 스트리밍)
• JavasSript를 사용하기에 프론트엔드 개발자 사용 용이
• 빠르게 개발이 가능하므로 생산성이 높음

단점

• 싱글 스레드 기반이라 자원을 많이 먹는 작업이 오면 부하가 크게 걸림
• 싱글 스레드는 CPU 코어 한 개만 사용 => CPU 작업 많은 서버로 부적합(게임 서버 등)
• 로직이 복잡한 경우 콜백함수의 늪에 빠질 수 있음
• 에러가 발생하면 프로세스 자체가 죽어버림

📎 노드가 어울리는 서비스

1. 간단한 로직으로 구성된 서비스
2. 빠른 응답시간이 요구되는 서비스
3. 빠른 개발이 요구되는 서비스
4. 비동기 방식에 어울리는 서비스(채팅, 스트리밍 서비스)
   => 넷플릭스, 페이팔, 링크드인, 페이스북 등에서 사용

📎 node.js 설치

---

📃 Chapter_3 Node.js를 위한 ES6

📎 var, let, const 알아보기

var

• function scope를 가지고 있는 변수 선언 방식
  => scope(범위) : 변수에 접근할 수 있는 범위
• JavaScript는 유연한 변수 선언 방식 가짐
  => 변수를 여러 번 초기화 하는 것 자체가 잘못된 코드를 작성하기 쉬우므로 이런 방식을 지양해야한다.

=> ES6 이후 새로운 변수 선언 방식 2가지가 생김

let

• 값을 재정의 할 수 있는 변수 선언 방식 = 변수
• var와 같이 같은 변수명으로 초기화를 할 수 없다.
• function scope가 아닌 중괄호 scope를 가짐

const

• 값을 재정의 할 수 없는 변수 선언 방식 = 상수
• 변하지 않는 값이므로 한 번 정의하면 바뀌지 않는 값에 사용
• 중괄호 scope를 가짐

📎 Arrow function

• function 키워드 보다 간단히 함수 표현 가능

// 함수 작성
function foo() {
  console.log("arrow function");
}

// 화살표 함수 작성 방법
const foo = () => {
  console.log("arrow function");
};

foo(); // arrow function

// 매개변수가 있는 경우
const foo = (x) => {
  return x;
};

// 매개변수가 1개인 경우 소괄호 생략 가능
const foo = x => {
  return x;
};

// 함수가 바로 값을 반환할 경우 중괄호 생략 가능
// 함수 내의 코드가 여러 줄인 경우 중괄호 이용
const foo = x =>  x;

// 매개변수가 2개이고 함수가 바로 반환하는 경우
const foo = (x, y) => x + y;

📎 비구조화 할당

• 객체, 배열 안의 값을 추출해서 변수, 상수에 바로 선언하는 문법

const object = { a: 1, b: 2 };

// 객체 안의 키를 통해 값을 받아올 수 있다.
// 만약 객체에 많은 갯수의 key 값이 있다면 아래와 같은 방식은 비효율적이다.
const a = object.a;
const b = object.b;

console.log(a); // 1
console.log(b); // 2

=> 이를 해결하기 위해 비구조화 할당이 생겨남

• 객체 안에 있는 값을 쉽게 상수 또는 변수 안에 할당시킬 수 있도록 하는 문법
• 객체 뿐만 아니라 배열에서도 사용 가능

// 객체
const object = { a: 1, b: 2 };

// 중괄호(비구조화 할당)를 이용해서 object의 key를 바탕으로
// key값 출력 가능
const { a, b } = object;

console.log(a); // 1
console.log(b); // 2

// 배열
const arr = [1, 2];

// arr라는 배열을 받아와서
// arr의 첫 번째 자리에 있는 1을 one라는 상수에 할당
// arr의 두 번째 자리에 있는 2를 two라는 상수에 할당
const [one, two] = arr;

console.log(one); // 1
console.log(two); // 2

📎 promise, async, await

• JavaScript의 가장 큰 특징 = 비동기
  => 비동기 : 태스크, 코드의 흐름을 기다리지 않고 각자 수행을 한 다음 결과값을 끝나는대로 알려주는 방식
  • 동기적 : 1 -> 2 -> 3 순서대로 진행
  • 비동기적 : 1, 2, 3이 동시에 작동 후 먼저 끝나는 순서대로 출력
    => 각각의 태스크가 언제 끝날지 모르는 상황을 맞이할 수 있다.
    => 태스트를 순차적으로 실행하고 싶을 때 비동기적인 특성을 가질 경우 이 순서를 보장할 수 없다.

=> 함수를 실행하고 바로 뒤를 이어서 함수를 실행시킬 수 있도록 하는 callback 방식을 취한다.

callback

• 어떤 함수가 실행되고 난 후 다음 함수를 실행시켜 일련적인 플로우를 만들어주는 역할을 해주고 있다.
• 하지만 callback 함수를 남발할 경우
  => callback hell이 발생

A((a) => {
  B(a, (b) => {
    C(b, (c) => {
      console.log("callback hell");
    });
  });
});

=> promise로 callback hell을 탈출할 수 있다.

promise

• promise의 3가지 상태

  • pending (대기상태)
  • pulfilled (이행상태)
  • refected (실패상태)

function sayHello() {
  // 성공했을 때 resolve를 호출
  // 실패했을 때 rejext를 호출
  return new Promise((resolve, reject) => {
    // 성공
    const hello = "Hello Hello";
    resolve(hello);
  });
}

sayHello().then((resolveData) => {
  console.log(resolveData); // Hello Hello
});

• sayHello라는 함수를 정상적으로 작동 후,
• then이라는 함수가 실행되면서 Promise를 가동
• 성공적으로 반환할 것이므로
• hello라는 상수값을 resolve로 넘겨주고,
• resolve를 통해 resolveData에 hello라는 string 값이 들어간다.
• 이것을 console.log로 출력
• 다음과 같이 primise는 하나의 함수를 실행하고
• 그 다음 연속적으로 then을 통해 일련의 흐름을 제어할 수 있도록 하는 유용한 문법

서버 입장에서 서버가 잘 작동하다가 오류가 발생했을 경우, 에러 핸들링 필요
=> reject를 통해 에러 핸들링

function sayHello() {
  // 성공했을 때 resolve를 호출
  // 실패했을 때 rejext를 호출
  return new Promise((resolve, reject) => {
    // 실패
    reject(new Error());
  });
}

sayHello()
  .then((resolveData) => {
    console.log(resolveData);
  })
  .catch((error) => {
    console.log(error);
  });

• reject에 error가 발생하게 되고,
• reject를 호출했을 때 catch가 실행되어 error메시지를 출력한다.
• 이것으로 에러 핸들링

then을 연속적으로 사용하기

function sayHello() {
  return new Promise((resolve, reject) => {
    resolve("hello!!!");
  });
}

sayHello()
  .then((resolveData) => {
    console.log(resolveData); // hello!!!
    return resolveData;
  })
  .then((resolveData) => {
    console.log(resolveData); // hello!!!
    return resolveData;
  })
  .then((resolveData) => {
    console.log(resolveData); // hello!!!
    return resolveData;
  })
  .catch((error) => {
    console.log(error);
  });

=> then을 이용해서 callback이 많이 만들어지는 것을 방지했으나, then도 많이 사용하면 복잡해 보일 수 있다.
=> 이것을 해결하기 위해 async와 await가 등장!

async와 await

function sayHello() {
  return new Promise((resolve, reject) => {
    resolve("hello!!!");
  });
}

// await을 쓰기 위해 function 앞에 async를 작성해준다
async function test() {
  // await을 작성하지 않을 경우, 밑에 있는 코드들이 바로 실행될 수 있으므로
  // sayHello()가 실행되고 난 후 바로 밑의 코드들을 실행하겠다는 것을
  // await 키워드를 통해 동작
  const hello = await sayHello();
  console.log(hello); // hello!!!
}

test();

• 장점
  • 일반적인 코드 작성 규칙에서 async 키워드와 await키워드를 사용하여 코드 스타일링을 할 수 있다.
    => .then을 사용하는 문법은 JavaScript에 특화된 문법이기 때문에 기존의 문법과는 차이가 있다.

---

마무리

• 엇..! 노드 강의 좋다!
  => 열심히 듣겠습니다아
• Futurama 과제 하느라 시간이 정신없이 지나갔다.
  => 힘들었지만 뿌듯했다아!