[7/27~28] 24, 25일차 회고록(JS/Node 비동기2)

원지렁·2022년 7월 28일
0
post-thumbnail

오늘의 학습내용

1. 타이머 API

1) setTimeout

  • setTimeout(callback, millisecond)

: 일정 시간 후, callback 함수를 실행시켜 줌

setTimeout(function () {
  console.log('1초 후 실행');
}, 1000);

2) 비동기 코드 Q&A

  • delay 함수와 sleep 함수의 차이점은?
    (동일 기능)
    delay : Callback 함수를 사용하여 setTime 매소드 구현
    sleep : Promise 함수를 사용하여 setTime 매소드 구현
// delay
function runCallback() {
  resetTitle();
  playVideo();

  delay(1000, () => {
    pauseVideo();
    displayTitle();

    delay(500, () => {
      highlightTitle();

      delay(2000, resetTitle);
    });
  });
}

// sleep
function runPromise() {
  resetTitle();
  playVideo();

  sleep(1000)
    .then((param) => {
      console.log(param);
      pauseVideo();
      displayTitle();
      return "world";
    })
    .then((param) => {
      console.log(param);
      return sleep(5000);
    })
    .then(highlightTitle)
    .then(sleep.bind(null, 2000))
    .then(resetTitle)
    .then(resetTitle)
    .catch(err => {
  console.log(err);
})
}
  • resolve, reject함수에는 전달인자를 넘길 수 있습니다. 이때 넘기는 전달인자는 어떻게 사용할 수 있나요?
    : 함수 실행 시 전달인자를 전달하여 사용할 수 있으며, 프로미스 체인을 통해 전달인자를 통한 결과값을 반복하여 전달인자로 사용할 수 있다.

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("hello");
    }, wait);
  });
};

  sleep(1000)
    .then((param) => {
      console.log(param); // "hello"
      pauseVideo();
      displayTitle();
      return "world"; 
    })
    .then((param) => { 
      console.log(param); // "world" 
      return sleep(5000);
    })
  • await 키워드 다음에 등장하는 함수 실행은 어떤 타입을 리턴할 경우에만 의미가 있나요?
    : Promise 타입

  • await 키워드를 사용할 경우, 어떤 값이 리턴되나요?
    : Promise의 resolve로 전달된 값

2. Node.js

: 비동기 이벤트 기반 JavaScript 런타임

1) Node.js에서 내장 모듈 가져오기

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

2) 3rd-party 모듈 가져오기

npm install underscore // 터미널 실행
const _ = require('underscore'); // 내장 모듈처럼 사용 가능

3. fs모듈

: 로컬에 존재하는 파일을 읽어옴.

1) 사용법

fs.readFile(path[, options], callback)
  • path
    : string | Buffer | URL | integer 사용 가능(일반적으로 string 타입을 써줌)

  • [options]
    : 선택적 전달 인자
    : Object | string 사용 가능(인코딩 시 많이 사용 - 'utf8')

  • callback(Function)
    err : Error | AggregateError
    -> err가 없으면 err에 null을 넣어줌
    data : string | Buffer
    -> data가 없으면 data에 null을 넣어줌

const fs = require("fs");

const getDataFromFile = function (filePath, callback) {
  fs.readFile(filePath, 'utf-8', (err, data) => {
    
    if(err){
      callback(err,null);
    } else {
      callback(null, data);
    }
  });
};

module.exports = {
  getDataFromFile
};

2) JSON.parse()

  • JSON(JavaScript Object Notation)
    네트워크 통신 시 자주 사용되는 데이터 형식 중 하나(객체 형태)
    key는 무조건 String 형식으로 이루어지며 keyvalue는 자료형/배열/객체임

  • JSON.parse
    JSON의 내용을 읽어오고 객체를 생성하는 역할

{    
  "이름": "테스트",    
  "나이": 25,    
  "성별": "여",    
  "주소": "서울특별시 양천구 목동",    
  "특기": ["농구", "도술"],    
  "가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"},    
  "회사": "경기 수원시 팔달구 우만동" 
}

4. fetch API

: 정보를 원격 URL로부터 불러오는 경우

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));
profile
새싹 개발자 지렁이의 벨로그입니다.

0개의 댓글