node.js 환경에서 fetch API를 사용하는 방법

위와 같이 현재 Node.js에서 fetch API는 실험적으로 제공되고 있는 상태입니다.

따라서 fetch API를 브라우저 환경이 아닌

node.js 환경에서 바로 동작시키고 확인하고 싶은 경우

가장 쉬운 해결책은 fetch API 모듈을 설치하는 것입니다.

그다지 어렵지 않으니 잘 따라오시면 쉽게 할 수 있을거에요

🐕 먼저 빈 폴더를 만든다.

기존에 이미 폴더가 있으신 분들은 상관없습니다.

다만 위 실습에서는 package.json의 설정을 조금 변경하기 때문에

기존에 모듈을 ES6 방식이 아닌 다른 방식으로 불러오면서 코드를 작업하고 계시던 분들은

기존 코드와 충돌이 발생할 수 있으니 유의해주세요

ES6 방식은 다음과 같습니다.

export function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

export function sayGoodbye(name) {
  console.log(`Goodbye, ${name}!`);
}

import { sayHello, sayGoodbye } from './greeting.mjs';

sayHello('Alice'); // "Hello, Alice!" 출력
sayGoodbye('Bob'); // "Goodbye, Bob!" 출력

 

---

👻package.json을 만든다.

npm init -y

터미널에서 위 명령어를 입력해줍니다.

명령어가 잘 실행되었으면 package.json 파일이 생겼을 것입니다.

---

🥶 pacakage.json 파일에 type을 추가한다.

{
  "dependencies": {
    "node-fetch": "^3.3.1"
  },
  "name": "fds",
  "version": "1.0.0",
  "main": "das.js",
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "type": "module"
}

  "type": "module"

다른건 신경 안써도 되고 그냥 type에 모듈을 쓰겠다는 선언만 제대로 넣어주시면 됩니다.

---

🌞이제 js파일을 하나 만들고 fetch를 불러온다.

아무이름.js

import fetch from "node-fetch";

우린 module type을 쓸거란 선언을 위 package.json 과정에서 마쳤으니

ES6의 모듈 문법을 사용할 수 있어졌습니다.

따라서 리액트에서 하던것처럼 import 구문을 이용해 모듈을 불러올 수 있습니다.

---

😋fetch가 잘 되는지 확인을 해보자

import fetch from "node-fetch";

let fetchTest = fetch('https://jsonplaceholder.typicode.com/todos/1')

fetchTest.then(response => response.json()).then(response => console.log(response))

간단하게 jsonplaceholder 사이트에서 더미데이터를 받아온 다음

node.js의 콘솔창에 출력시키는 코드를 작성했습니다.

 

잘될지 한번 콘솔을 찍어보겠습니다.

{ userId: 1, id: 1, title: 'delectus aut autem', completed: false }

[Done] exited with code=0 in 0.302 seconds

so cool

여러분들도 한번 해보시기바랍니다.

---

이해했다고 생각할 때가 가장 무서울 때다.