[05.16] 비동기/node.js

0
  • 비동기
  • node.js

📌 동기와 비동기

  • 동기(synchronous) : 특정 코드의 실행이 완료될때까지 기다리고 난 후 다음 코드를 실행
  • 비동기(Asynchronous execoution) : 코드의 실행이 완료될때까지 기다리지 않고 동시 실행

타이머 관련 API

  • setTimeout(callback, mlilisecond)
    : 일정 시간 후에 실행되는 함수

    • 2개의 매개변수를 받고 있다 : (실행할 콜밴함수, 콜백함수 실행 전 기다려야 할 시간(밀리초))
  • clearTimeout(timerId)
    : 실행중인 타이버를 종료시킴
    [예시] 실행중인 타이머와 실행중이었을 타이머를 종료시킨 타이머

  • setInterval(callback, millisecond)
    : 일정 시간을 주고 함수를 반복적으로 실행하기

    • 2개의 매개변수를 바도 있다. : (실행할 콜백함수, 반복적으로 함수를 실행시킬 시간 간격(밀리초))
      [예시] 반복적으로 실행중

  • clearInterval(timerId)
    : 타이머를 종료


Callback

: callback 함수로도 비동기로 작동되는 코드를 제어할 수 있음

const printString = (string, callback) => {
  setTimeout(function () {
    console.log(string);
    callback();
  }, Math.floor(Math.random() * 100) + 1);
};

const printAll = () => {
  printString('A', () => {
    printString('B', () => {
      printString('C', () => {});
    });
  });
};

printAll();

// A
// B
// C

⇒ 하지만, 현재 작성되어진 코드가 짧지만 무한대로 코드가 많아지면 Callback hell(콜백지옥)으로 빠질 수 있음

💡이를 보완하고자 나온게 바로 Promise!

Promise

: Promise는 callback 지옥을 보완하기 위해 나온 빌트인 객체

  • 비동기 처리를 수행할 콜백함수(executor)를 인수로 전달받고 이 콜백함수는 resolve, reject 함수를 인수로 전달 받음
    • resolve : 콜백함수의 코드가 정상작동일 경우 호출됨

    • reject : 콜백함수의 코드에서 에러가 발생할 경우 호출됨

      const promise = new promise ((resolve, reject) => {
      //Promise 함수의 콜백함수 내부에서 비동기 처리 실행
      	if(/*비동기 처리 성공*/) {
      		resolve(result);
      	} 
      	else {
      	/* 비동기 처리 실패 */
      	reject('failure reason);
      	}
      });

Promise 객체의 내부 프로퍼티

: promise는 내부 프로퍼티(state, result)를 가지는데 직접 접근이 되지 않고, .then, .catch, .finally 메서드를 사용해서 접근이 가능

비동기 처리를 수행하는 함수가

  • state [Promie의 기본 상태는 pending(대기)상태] : 정상적으로 작동됐다면 fulfilled(이행)하고 에러가 발생하면 reject(거절)
  • result [처음은 undefined, resolve(value)] : 정상적으로 작동됐다면 resolve(value)가 호출되면 value로, 에러가 발생하여 reject(error)호출되면 error로 반환

메서드


출처 : MDN

  • Then : 콜백함수가 정상적으로 처리가 되었다면 resolve 함수 호출하고 .then 메서드로 접근이 가능
    let promise = new Promise((resolve, reject) => {
    	resolve("성공");
    });
    //.then 안에서 리턴한 값이 promise면 내부 result를 다음 .then 콜백 함수의 인자로 받음
    promise.then(value => {
    	console.log(value);
    	// "성공"
    })
  • Catch (then과 동일하게 동작함) : 콜백함수에서 에러가 발생했을 경우 reject 함수를 호출하고 .catch 메서드로 접근가능
    let promise = new Promise(function(resolve, reject) {
    	reject(new Error("에러"))
    });
    
    promise.catch(error => {
    	console.log(error);
    	// Error: 에러
    })
  • Finally : 콜백함수의 정상,에러 처러 여부와 상관없이 .finally 메서드로 접근 가능
    let promise = new Promise(function(resolve, reject) {
    	resolve("성공");
    });
    
    promise
    .then(value => {
    	console.log(value);
    	// "성공"
    })
    .catch(error => {
    	console.log(error);
    })
    .finally(() => {
    	console.log("성공이든 실패든 작동!");
    	// "성공이든 실패든 작동!"
    })

Promise chaining

: 비동기 작업을 순차적으로 진행

→ .then, .catch, .finally의 메서드들은 promise를 리턴하기 때문

Promise.all()

: 여러개의 비동기 작업을 동시에 처리하고 싶을때 사용

  1. 인자는 배열
  2. 배열에 있는 모든 프로미스에서 콜백함수에 작성했던 코드들이 정상 처리되면 그 결과를 배열에 담음
  3. 그리고 최종 프로미스를 반환
  4. 만약에 인자로 받는 배열중에 에러가 발생하면 그 즉시 종료
const promiseOne = () => new Promise((resolve, reject) => setTimeout(() => resolve('1초'), 1000));
const promiseTwo = () => new Promise((resolve, reject) => setTimeout(() => resolve('2초'), 2000));
const promiseThree = () => new Promise((resolve, reject) => setTimeout(() => resolve('3초'), 3000));

// promise.all
Promise.all([promiseOne(), promiseTwo(), promiseThree()])
  .then((value) => console.log(value))
  // ['1초', '2초', '3초']
  .catch((err) => console.log(err));

⇒ promise로 비동키 코드의 순서 제어가 가능하지만 코드가 길어질수록 promise hell이 발생

Async/Await

: 사용 목적은 여러 promise의 동작을 동기스럽게 사용가능케함

  • async(await식이 포함) : 함수의 실행을 일시 중지하고 전달된 promise의 해결이 된 다음에 async함수의 실행을 다시 시작하고 완료 후 반환함
  • await(async안에서만 유효) : Promise가 fulfill되거나 reject될때까지 async 함수의 실행을 일시정지 → Promise가 reject되면 await문은 reject된 값을 throw함
const printString = (string) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
      console.log(string);
    }, Math.floor(Math.random() * 100) + 1);
  });
};

const printAll = async () => {
  await printString('A');
  await printString('B');
  await printString('C');
};

printAll();

//A
//B
//C

📌  Node.js

Node.js란?

: 비동기 이벤트 기반 자바스크립트 런타임 (특정 언어로 만든 프로그램을 실행할 수 있는 환경)

→ 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 하는 자바스크립트 실행기!

모듈 사용 방법

  • 모든 모듈을 사용하기 위해 불러옴 (script태그 이용)
    <script src="불러오고싶은_스크립트.js"></script>

3rd-party모듈 사용법

: 프로그래밍을 도와주는 플러그인이나 라이브러리 등을 만드는 회사

→ 편리하고 효율적인 개발을 할 수 있음 (제 3자로서의 중간다리 역할을 하는것)

ex) node.js에서 underscore는 공식문서에 없는 모듈이기 때문에 서드파티 모듈이며, 이를 다운 받기 위해서는 npm을 사용해야 함.

npm install underscore
const _ =require('underscor');

fs module?

: 파일 처리와 관련된 전반적인 작업을 하는 모듈

const fs = require('fs'); // 파일 시스템 모듈을 불러옵니다
const dns = require('dns'); // DNS 모듈을 불러옵니다

// 이제 fs.readFile 메서드 등을 사용할 수 있습니다!

fs.readFile(path[, options], callback)

: read(읽다) 비동기적으로 파일 내요을 읽음/ 전달인자를 3개를 받음

  • path : 파일 이름
  • options (선택적 전달인자) : 문자열이나 객체를 받음(문자열일경우, utf8입력)
  • callback : 비동기적 콜백함수
    • 2가지 매개변수 : error(에러 발생하지 않을 경우 ⇒ null), data

0개의 댓글