[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 4주차 회고록 ch. 1 Node.js, 비동기 처리, 분해 할당, ...연산자, rest

[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기]
4주차 회고록

 

서울 기숙사에 입주한 날이 엊그제 같은데

버티고 버티다보니

벌써 4주째 회고록입니다!!

 

아직 8주가 더 남았지만..

인생은 ~ 버티는 거야~~

8주 뒤에 이 글을 다시본다면

참으로 뿌듯 하겠지 ? 

아자자 지현아 ~

 

 

그렇다면 본격적인

수업 회고록!

이번 주에 Node.js 를 본격적으로 시작했다

시작부터 머리가 살짝 아픈~

휴..

또 한번 버텨보자~~

 

 

Node.js란?

특징 1. javascript언어를 사용한다.

 

특징 2. Single Thread

 

프로세스 

- 실행 중인 프로그램

- 운영체제에서 할당하는 작업 단위

 

Thread(스레드)

- 프로세스 내에서 실행되는 흐름의 단위

- 하나의 프로세스에는 n개의 스레드가 존재하며 동시에 작동할 수 있다.

 

 

-> 예외를 처리하지 못하면 

프로그램이 아예 중단 됨

 

특징3. Non - Blocking I/O

 

동기 (Synchronous)

- 데이터 요청과 결과가 한자리에서 동시에 일어나는 것
- 한 요청에 서버의 응답이 이루어질 떄까지 계속 대기

 

비동기(Asynchronous)

 동시에 일어나지 않는 것
- 요청한 후 응답을 기다리지 않고 다른 활동을 함

 

I/O작업 : 파일 시스템 접근 (읽기, 쓰기, 만들기 등),

네트워크 요청

 

Node.js 는 표준 라이브러리의 모든 i/o메서드를 

비동기 방식으로 제공한다.

 

 

특징 4. Event - driven

- Event - Driven :이벤트가 발생할 때 미리 지정해둔 작업을 수행

ex. 클릭, 네트워크 요청, 타이머 등

 

- 이벤트 리스너

: 이벤트 등록 함수

 

-콜백 함수

: 이벤트가 발생했을 때 실행되는 함수

 

 

모듈(Module)

 

- 특정한 기능을 하는 함수나 변수들의 집합

 - 재사용 가능한 코드 조각

 

장점 :

코드 추상화, 코드 캡슐화,

코드 재사용, 의존성 관리

 

 

모듈 만들기 

1. 하나의 모듈 파일에 여러개 만들기

const a="a변수";
const b="b변수";

module.exports={
  a,
  b
 };

 

2. 하나의 모듈 파일에 하나 만들기

function connect() {
   return a+b;
  }
  
  module.exports=connect;

 

 

 

 

비동기 처리

 

 

setTimeout()

setTimeout(code, delay);

// delay동안 기다리다가 code 함수를 실행

 

 

콜백 지옥 정리하기

 

Promise

- 비동기 함수를 동기 처리하기 위해 만들어진 객체

- 성공과 실패를 분리하여 반환

- 비동기 작업이 완료된 이후에 

다음 작업을 연결시켜 진행할 수 있는 기능을 가짐

 

 

promise 사용법

 

function promise1(flag){
            return new Promise(function(resolve, reject){
                if(flag){
                    resolve( `promise상태는 fullfilled! tnen으로 연결됩니다 \n 이때의 flag가 ${flag}입니다. `)
                }else{
                    reject(`promise상태는 rejected! catch로 연결됩니다.\n 이때의 flag는 ${flag}입니다.`)
                }
            })
        }

 

- resolve(value) : 작업이 성공한 경우, 그 결과를 value와 함께 호출

 

- reject(error) : 에러(rejected) 발생 시 에러 객체를 나타내는 error와 함께 호출

 

 

- resolve( ) : then 메서드 실행

 

-reject( ) : catch 메서드 실행

 

 function goMart(){
            console.log('마트에 가서 어떤 음료를 살지 고민한다.');
        }
        function pickDrink(){
            return new Promise(function(resolve, reject){
                setTimeout(function(){
                    console.log('고민 끝!!');
                    product ='제로 콜라';
                    price = 2000;
                    resolve();
                }, 3000);
            })
        }
        let product;
        let price;
        goMart();
        pickDrink().then(function (){
            console.log(`상품명 : ${product}, 가격: ${price}`);
        });

 

Promise 체이닝 사용 안한 경우

function add(n1, n2, cb){
            setTimeout(function(){
                let result = n1 + n2;
                cb(result);
            }, 1000);
        }
        function mul(n, cb){
            setTimeout(function(){
                let result = n * 2;
                cb(result);
            }, 700);
        }
        function sub(n, cb){
            setTimeout(function(){
                let result = n - 1;
                cb(result);
            }, 500);
        }

 

 add(4, 3, function(x){
            console.log('1: ', x);
            mul(x, function(y){
                console.log('2: ', y);
                sub(y, function(z){
                    console.log('2: ', z);
                });
            });
        });

-> 콜백 함수 사용 시, 콜백 지옥이 생김

 

 

Promise 체이닝 사용한 경우

 

function add(n1, n2){
            return new Promise(function(resolve, reject){
                setTimeout(function(){
                    let result = n1+ n2;
                    resolve(result);
                }, 1000);
            });
        }
        function mul(n){
            return new Promise(function(resolve, reject){
                setTimeout(function(){
                    let result = n * 2;
                    resolve(result);
                }, 700);
            });
        }
        function sub(n){
            return new Promise(function(resolve, reject){
                setTimeout(function(){
                    let result = n - 1;
                    // resolve(result);
                    reject(new Error('의도적으로 에러를 일으켜 봤음!'));
                }, 500);
            });
        }

add(4, 3)
         .then(function(result){
            console.log('1: ', result);
            return mul(result);
         })
         .then(function(result){
            console.log('2: ', result);
            return sub(result);
         })
         .then(function(result){
            console.log('3: ', result);
         })
         .catch(function(err){
            console.log('실패!');
            console.log(err);
         });

 

Promise 체이닝 사용 시

장점 1. 

then 메서드 연속 사용 -> 순차적인 작업이 가능하다

콜백 지옥에서 탈출 가능하다.

 

장점2.

 

예외처리 간편

마지막 catch 구문에서 한 번에 예외 처리 가능하다

 

 

Promise -> async / await

 

프로미스 기반 코드를 좀 더 쓰기 쉽고 읽기 쉽게 하기 위해 등장

비동기 처리 패턴 중 가장 최근에 나온 문법

 

 

 

배열 구조 분해

 순서가 중요하다!

//배열 구조 분해
//특징 : 구조 분해 당시 순서가 중요 !
const lists = ["apple", "grape"];
console.log(lists[0]);
[item1, item2, item3 = "peach"] = lists;
console.log(item1, item2, item3);

function test() {
  return ["one", "two", "three"];
}

const [one, two, three, four] = ["one", "two", "three"];
console.log(one, two, three, four);

//swap
let a = 10;
let b = 20;
console.log(a, b);
[a, b] = [b, a];
console.log(a, b);

결과>

 

 

객체 구조 분해

-> 키 값이 중요하다!

// 객체 구조 분해
// 특징 : 키 값이 중요하다!
const obj = {
  key1: "one",
  key2: "two",
};
console.log(obj.key1);
console.log(obj["key1"]);
const { key1: newKey1, key2, key3 = "three" } = obj;
obj.key3 = "three";
console.log(obj);

const { key2: newKey2, key1, obj3 = "three" } = obj;
console.log(newKey2, key1, obj3);

 

결과>

 

 

... 연산자

...spread 문법이란?

 

 

const a = [1, 2, 3];
        const b = [4, 5];
        const spread = [...a, ...b];
        console.log(spread);

        const c = [..."Hello"];
        console.log(c);

결과>

 

Rest 파라미터

Rest파라미터는 매개변수 이름 앞에 세개의 점(...) 을 붙여서

정의한 매개변수를 의미한다.

Rest파라미터는 함수에 전달 된 인수들의 목록을

배열로 전달 받는다.

 

 const values = [10, 20, 30];
        function get(a, ...rest) {
            console.log(rest); //[20, 30]
        }
        get(...values);

 

Rest 파라미터는 이름 그대로 

먼저 선언된 파라미터에 할당 된 인수를 제외한 

나머지 인수들이 모두 배열데 담겨 할당된다.

 

따라서 Rest 파라미터는 반드시 마지막 파라미터 이어야 한다.