setTimeout, fs.readFile, fetch

호팍이네 2022. 6. 1. 01:56

프로토타입부터 시작해서 점점 이해하기 어려워지고 강의를 들어도 페어활동을 해도 이해가 완벽하게 되지않고 똥싸다 만 느낌이 자꾸 든다. 이번에는 정말 엄청난 페어분을 만나서 명강의를 듣고 거의 1:1 과외를 받아서 잘 마치긴 했지만..

처음이라 그런건지 .. 공부가 부족했던건지 .. 암튼 여러번 반복하다보면 몸에 흡수가 될거라 생각한다.

복습하느라 빠듯해서 섹션1은 쓸지 안쓸지 모르겠다. 시간나면 써야지 ..

setTimout ( 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이 종료됨.

fs모듈

파일을 읽을 때에는 readFile이라는 메서드가 적합하다. 파일의 저장은 saveFile 이라는 메서드는 찾을 수 없지만, 비슷해 보이는 메서드가 있다. 파일을 저장할 때에는 writeFile을 쓰면 된다.

모든 모듈은 '모듈을 사용하기 위해 불러오는 과정'이 필요하다. 브라우저에서 다른 파일을 불러올 때에는 다음과 같이 <script> 태그를 이용했다.

<script src="불러오고싶은_스크립트.js"></script> //  HTML에서 JavaScript 파일을 불러오는 script 태그

Node.js 에서는 JavaScript 코드 가장 상단에 require 구문을 이용하여 다른 파일을 불러온다.

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

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

3rd-party 모듈을 사용하는 방법

해당 프로그래밍 언어에서 공식적으로 제공하는 빌트인 모듈(built-in module)이 아닌 모든 외부 모듈을 일컫는다. 예를 들어, Node.js에서 underscore는 Node.js 공식 문서에 없는 모듈이기 때문에 서드 파티 모듈이다. underscore 와 같은 서드 파티 모듈을 다운로드하기 위해서는 npm을 사용해야 한다.

터미널에서 다음과 같이 입력해 underscore 를 설치할 수 있다.

npm install underscore // underscore 모듈을 설치

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

메서드 fs.readFile 은 비동기적으로 파일 내용 전체를 읽는다. 이 메서드를 실행할 때에는 전달인자 세 개를 받는다.

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

path에는 파일 이름을 전달인자로 받는다. 4가지의 타입을 넘길 수 있다. 대부분 문자열인 string의 타입을 받는다.

options \<Object> | \<string>

대괄호로 감싼 두 번째 전달인자 options는 넣을 수도 있고, 넣지 않을 수도 있다. 대괄호는 보통 선택적 전달인자를 의미한다. options는 문자열 또는 객체 형태로 받을 수 있다. 문자열로 전달할 경우 인코딩을 받는다.

callback \<Function>

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

콜백 함수에는 두 가지 매개변수가 존재한다. 에러가 발생하지 않으면 err 는 null 이 되며, data 에 문자열이나 Buffer 라는 객체가 전달된다. data 는 파일의 내용이다.

fs.readFile 사용하기

Promise chaining을 이용하여 fs.readFile 사용하기(Promise의 함수를 이용)

* JSON.parse() : JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성한다. 선택적으로, reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있다.

? Promise.all 의 전달인자는 어떤 형태인가요?
// 배열의 형태
? Promise.all 을 사용할 경우에 then 메서드의 매개변수는 어떠한 형태인가요?
// 결과값으로 이루어진 배열
? Promise.all 에 두 개의 Promise 요청이 전달되고,
? 만일 그중 하나가 rejected 상태가 되는 경우,
? then 메서드, catch 메서드 중 어떤 메서드를 따라갈까요?
// catch 메서드, 배열 내 요소 중 어느 하나라도 오류가 나면 거부한다.

fetch

웹사이트는 시시각각 변하는 정보와, 늘 고정적인 정보가 따로 분리되어 있는 것을 확인할 수 있다. 이 중에서 최신 뉴스나 날씨/미세먼지 정보 같은것이 바로 동적으로 데이터를 받아야 하는 정보다.

웹사이트들은 해당 정보만 업데이트하기 위해 요청 API를 이용한다. 그중 대표적인 fetch API를 이용해 해당 정보를 원격 URL로부터 불러온다.

fetch API 사용법

let url = 'http://example.com/movies.json';
fetch(url)
  .then((response) => response.json())
  .then((data) => console.log(data));