JavaScript fetch 사용

이번에 웹 어플리케이션을 만들면서 fetch를 사용할 일이 있었습니다.
이전에 node.js 환경에서 querystring.stringify와 fetch를 각각 import 했던 경험 때문에 이번 프로젝트에서도 아래와 같이 선언하고 시작했지만, 개발간에 무수히 많은 에러를 만났습니다.

const querystring = require('querystring');
const fetch = require('node-fetch');

그리고 결론적으로 아래와 같이 수정했습니다.
이러한 결론을 얻기까지 찾아본 내용에 대해 간단히 정리하겠습니다.

import {stringify} from "../node_modules/querystring/index";
//import {fetch} from "../node_modules/node-fetch";  ==> 사용안함

⁉️ 에러의 원인

1. Browser의 Client-side JavaScript에는 require이 없다.

   Client-side에서 node.js 모듈을 사용하기 위해선 html <script> 태그로 소스를 불러오거나, webpack의 사용으로 의존성 있는 모든 모듈을 번들시키는 방법이 있습니다.

2. Client Browser에는 fetch가 있다.
   

   Internet Explorer을 제외한 대부분의 browser에서 fetch를 지원합니다. => 때문에 fetch를 import 할 필요가 없었습니다.
   그 외 node.js 환경에선 ‘node-fetch’ 또는 ‘unfetch’와 같은 라이브러리를 통해 사용할 수 있습니다.

3. ES6 import문으로 node modules 가져오기 위해선 함수를 정확히 명시해야된다.

   사실 이부분은 정확하진 않습니다만,, error log의 늬앙스가 그러하였습니다.

   /node_modules/querystring/index.js이 다음과 같습니다. export되는 함수와 import 문의 이름을 일치시켰을 때 에러없이 진행됐습니다.

   'use strict';
   exports.decode = exports.parse = require('./decode');
   exports.encode = exports.stringify = require('./encode');
   

   
   

📚 Reference

[자바스크립트] fetch() 함수로 API 호출하기
Client on Node.js: Uncaught ReferenceError: require is not defined