[JS] 타이머API[setTimeout,setInterval() ] / (node.js)-fs.readFile(path[, options], callback)

📌 슬슬 비동기 시간 부터 시작해서 머리가 복잡과 어렵기 시작했다.. 앞으로 서버 주고 받고 네트워크 형성이라고 해야하나? 할려면 비동기 계속 쓸텐데… 극복해야한다 하겠지?

 

타이머 관련 API

setTimeout(), clearTimeout() // setInterval(), clearInterval(id)

setTimeout(callback, millisecond)

일정 시간 후에 함수를 실행

• 매개변수(parameter): 실행할 콜백 함수, 콜백 함수 실행 전 기다려야 할 시간 (밀리초)
• return 값: 임의의 타이머 ID

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

clearTimeout(timerId)

setTimeout 타이머를 종료

• 매개변수(parameter): 타이머 ID
• return 값: 없음

const timer = setTimeout(function () {
  console.log('10초 후 실행');
}, 10000);
clearTimeout(timer);
// setTimeout이 종료됨.

setInterval(callback, millisecond)

일정 시간의 간격을 가지고 함수를 반복적으로 실행

• 매개변수(parameter): 실행할 콜백 함수, 반복적으로 함수를 실행시키기 위한 시간 간격 (밀리초)
• return 값: 임의의 타이머 ID

setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
// 345

clearInterval(timerId)

setInterval 타이머를 종료

• 매개변수: 타이머 ID
• return 값: 없음

const timer = setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
clearInterval(timer);
// setInterval이 종료됨.

---

학습 목표

• callback, Promise, async/await 구현 방법을 이해한다.
• Promise 실행 함수가 가지고 있는 두 개의 매개변수 resolve 와 reject를 활용할 수 있다.
• new Promise()를 통해 생성한 Promise 인스턴스가 사용할 수 있는 메서드의 용도를 이해한다.
• Promise의 세 가지 상태는 각각 무엇인지 설명할 수 있다.
• async/await 키워드와 함께 실행되는 함수는 어떤 타입이어야 하는지 이해한다.
• await 키워드를 사용할 경우 어떤 값이 리턴되는지 설명할 수 있다.

 

타이머API -> part

01_callback.js

const delay = (wait, callback) => {
  setTimeout(callback, wait);
}

02_promiseConstructor.js

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

// catch 쓸땐?

const sleep = (wait) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('에러'));
    }, wait);
  });
};

script.js

// 콜백
function runCallback() {
  resetTitle();
  playVideo();

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

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

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

// Promise
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)
    .catch(err => {           //catch +
      console.log(err);
    })
}

// async await
async function runAsync() {
  resetTitle();
  playVideo();

  await sleep(1000);
  pauseVideo();
  displayTitle();

  await sleep(500);
  highlightTitle();

  await sleep(2000);
  resetTitle();
}

 

 

• Promise 실행 함수가 가지고 있는 두 개의 파라미터 resolve 와 reject 는 각각 무엇을 의미하나요?
  • executor는 resolve 및 reject 인수를 전달할 실행함수.
  • 비동기 작업을 실행한 후 모든 작업을 끝내면 resolve를 호출해 프로미스를 이행, 오류가 발생한 경우 reject를 호출해 거부

 

• resolve, reject함수에는 전달인자를 넘길 수 있습니다. 이때 넘기는 전달인자는 어떻게 사용할 수 있나요?
  • 프로미스에서 resolve(arg)가 실행될 경우.then(arg)를 이용해 인자를 받을 수 있다.
  • 프로미스에서 reject(arg)가 실행될 경우.then().catch(arg)를 이용해 인자를 받을 수 있다.

 

• new Promise()를 통해 생성한 Promise 인스턴스에는 어떤 메서드가 존재하나요? 각각은 어떤 용도인가요?
  • catch()
    • 프로미스가 거부된다면 catch()가 호출되고 콜백의 반환값을 받을 수 있다.
  • then()
    • 프로미스가 이행된다면 then을 이용해 반환값을 이용할 수 있고 새 프로미스를 반환할 수도 있다..
  • finally()
    • 프로미스 이행 여부에 관계없이 무조건 호출된다.
    • reseolve → 성공 값, reject → 실패 값

 

• Promise.prototype.then 메서드는 무엇을 리턴하나요? → resolve의 전달인자로 넘겨준 값

...then((data, error) => { })

• Promise.prototype.catch 메서드는 무엇을 리턴하나요? → reject의 전달인자로 넘겨준 값

 

• Promise의 세 가지 상태는 각각 무엇이며, 어떤 의미를 가지나요?
  • Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
  • Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
  • Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

• await 키워드 다음에 등장하는 함수 실행은 어떤 타입을 리턴할 경우에만 의미가 있나요?
  • Promise 타입을 리턴한 경우에만 의미가 있다.
• await 키워드를 사용할 경우, 어떤 값이 리턴되나요?
  • Promise 에서 fulfill된 값
  • 만약 Promise가 reject되면, await 문은 reject된 값

---

Node.js 모듈 사용법

Node.js 내장 모듈 (Node.js built-in modules)에는 다양한 모듈이 존재합니다. 파일을 읽거나 저장하는 기능 등을 제공하는 Node.js 내장 모듈은

File System

모듈입니다.

파일을 읽을 때는

readFile

메서드, 파일을 저장할 때는

writeFile

Node.js 에서는 자바스크립트 코드 상단에 require 구문을 이용하여 다른 파일을 불러올 수 있습니다.

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

---

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

→ 비동기적으로 파일 내용 전체를 읽습니다.

→ 이 메서드를 실행할 때에는 전달인자 세 개를 받습니다.

• path \<string> | \<Buffer> | \<URL> | \<integer>

 

path에는 파일 이름을 전달인자로 받습니다.

네 가지 종류의 타입을 넘길 수 있지만 일반적으로 문자열(<string>)의 타입을 받습니다.

filename or file descriptor

 

 

다음은 `'etc/passwd' 라는 파일을 불러오는 예제입니다.

fs.readFile('/etc/passwd', ..., ...)

• options \<Object> | \<string>

대괄호로 감싼 두 번째 전달인자 options는 넣을 수도 있고, 넣지 않을 수도 있습니다.

대괄호는 선택적 전달인자를 의미합니다.

options는 문자열 또는 객체 형태로 받을 수 있습니다.

문자열로 전달할 경우 인코딩을 받습니다. 밑의 예제에서는 'utf8' 을 두 번째 전달인자로 받는 것을 확인할 수 있습니다.

options를 객체 형태로 받는 것은 두 번째 예제를 참고해주세요.

If options is a string, then it specifies the encoding: →

// /etc/passwd 파일을 'utf8'을 사용하여 읽습니다.
fs.readFile('/etc/passwd', 'utf8', ...);

[코드] 두 번째 전달인자 options에 문자열을 전달한 경우

let options = {
  encoding: 'utf8', // utf8 인코딩 방식으로 엽니다
  flag: 'r' // 읽기 위해 엽니다
}

// /etc/passwd 파일을 options를 사용하여 읽습니다.
fs.readFile('/etc/passwd', options, ...)

[코드] 두 번째 전달인자 options에 객체를 전달한 경우

• callback \<Function>
  • err \<Error> | \<AggregateError>
  • data \<string> | \<Buffer>

콜백 함수를 전달합니다. 파일을 읽고 난 후에 비동기적으로 실행되는 함수입니다.

콜백 함수에는 두 가지 매개변수가 존재합니다.

에러가 발생하지 않으면 err 는 null 이 되며,

data 에 문자열이나 Buffer 라는 객체가 전달됩니다.

data 는 파일의 내용입니다.

 

질문: data 에는 문자열이나 Buffer 가 전달됩니다. 어떤 경우에 문자열로 전달되는 것일까요? 힌트는, 공식 문서의 다음 내용에 나와 있습니다.

If no encoding is specified, then the raw buffer is returned. → 인코딩을 지정하지 않으면 원시 버퍼가 반환됩니다.

---

예제 코드 >>

JavaScript 파일이 실행되는 디렉토리에, 적당한 텍스트 파일(test.txt)을 새롭게 생성한 후 실행하세요.

텍스트 파일의 내용은 어떤 것이든 괜찮습니다.

const fs = require("fs"); // fs 추가

fs.readFile('test.txt', 'utf8', (err, data) => {
  if (err) {
    throw err; // 에러를 던집니다.
  }
  console.log(data);
});

// node test.js -> test.txt 내용(asdfasdfasdf) 출력

// asdfasdfasdf