[Node.js] HTTP Client

---

 

#1. HTTP Client

1. HTTP Client

1) HTTP Client란?

• URL을 통해 다른 웹 컨텐츠에 접속하여 내용을 가져오는 기술을 말한다.
• URL이 웹 페이지인 경우 HTML 코드를 가져온다.
  • 웹 페이지가 실행되는 과정에서 JS에 의해 동적으로 변경되는 내용은 가져오지 못한다.
• URL이 text, xml, json 인 경우 원본 내용을 가져온다.

 

2) 웹 브라우저에서의 HTTP Client

• 웹 브라우저에서는 XMLHttpRequest 클래스를 통해서 같은 기능을 구현할 수 있다. (Ajax)
• Ajax가 사용되면 페이지 새로고침 없이 다른 URL의 내용을 js 만으로 로딩해서 특정 DOM요소에 출력할 수 있게 된다.
• 단, 웹 브라우저 자체의 CORS 제약으로 인해 현재 브라우저가 접근 하고 있는 html이 속한 도메인과 다른 도메인의 URL은 접근 불가능하다. (Ajax로는 해결 할 수 없다)

 

3) 백엔드에서의 HTTP Client

• XMLHttpRequest가 아닌 일반 응용프로그램이 사용하는 Socket 통신 기술을 사용하기 때문에 어떤 도메인으로 접근 가능
• Node.js 에서는 http 라는 내장 모듈을 사용하지만, 사용성이 다소 번거롭기 때문에 코드의 효율적인 작성을 위해 개선된 라이브러리가 사용되고 있다. → Axios

npm install --save axios

또는

yarn add axios

 

2. 서버에 접속하기

1) http 활용

• Node에 기본 내장되어 있는 모듈 사용

// (1) 모듈참조
import http from 'http';

// (2) 접속할 서버의 호스트 이름과 요청 정보(path) 설정
const url = '접속할 서버의 주소';

// (3) GET 방식으로 접속하기 위한 객체 생성
const req = http.get(url, function(res) {
  // 응답이 수신되는 경우 (수신 데이터의 용량에 따라서 여러번 호출될 수 있다.)
  let resData = '';
  res.on('data', function(chunk) {
    resData += chunk;
  });

  // 응답 수신이 종료된 경우 (읽은 데이터를 처리한다.)
  res.on('end', function() {
    console.debug(resData);
  });
});

// (4) 접속객체에 error 이벤트 리스너 설정
req.on('error', function(err) {
  console.error(err);
  console.error('에러 발생: ' + err.message);
});

 

2) Axios 활용

• Axios 라이브러리 사용

// (1) 모듈참조
import axios from "axios";

// (2) 접속할 서버의 호스트 이름과 요청정보(path) 설정
const url = '접속할 서버의 주소';

// (3) GET방식으로 접속하기 위한 객체 생성 (promise 방식)
axios
  .get(url)
  .then(response => {
    // 지정된 url의 컨텐츠를 성공적으로 가져온 경우 호출된다.
    // -> 응답을 성공적으로 수신했다고 표현함.
    console.log(response.data);
  })
  .catch(err => {
    // 지정된 url로의 요청에 실패한 경우 호출된다.
    // 에러 내용에서 상태코드(숫자)와 에러 메세지만 추출
    // [HTTP 상태코드] - 200(OK), 404(Page Not Found), 401(권한 없음, 로그인 필요), 403(접근금지, 폴더에 접속한 경우)
    //                 50x(접속 대상에서 에러가 나고 있는 경우)
    const errorMsg = `[${err.response.status}] ${err.response.statusText}`;
    console.log(errorMsg);
  })
  .finally(() => {
    // 성공, 실패 여부에 상관 없이 마지막에 무조건 호출된다.
    // 필요 없다면 이 부분은 구현하지 않아도 된다.
    console.log(':)');
  });

  console.log('Promise 방식으로 HTTP 요청');

 

3) async & await 활용

• Axios와 async & await 사용

// (1) 모듈참조
import axios from "axios";

// (2) 접속할 서버의 호스트 이름과 요청정보(path) 설정
const url = '접속할 서버의 주소';

// (3) async/await 방식을 즉시 실행 함수 형태로 정의
(async () => {
  let result = null;

  try {
    const response = await axios.get(url);

    // 정상적으로 처리에 성공한 경우  promise 방식의 첫 번째 then 역할은 이 위치에서 자연스럽게 코드가 이어진다.
    // 첫 번째 then의 callback 함수에 전달되던 파라미터는 앞에서 리턴 받은 response
    result = response.data;
  } catch(err) {
    // 에러가 발생한 경우 실행되는 부분
    // promise 방식의 catch에 해당
    const errorMsg = `[${err.response.status}] ${err.response.statusText}`;
    console.log(errorMsg);
    return;
  }

  // promise 방식의 마지막 then은 뒷부분에 일반 코드로 작성한다.
  console.log(result);
})();

console.log('async & await + 즉시 실행 함수 방식으로 HTTP 요청');