자바스크립트로 웹 페이지를 긁어오는 두 가지 방법

자바스크립트로 웹 페이지를 긁어오는데는 두 가지 방법이 있다.

 

첫 번째 방법은, XML 비동기 통신을 이용한 방법이고,두 번째 방법은 http 모듈을 이용하는 것이다.

 

하지만 http 모듈을 이용하여 통신하는 것은, node.js 에서나 가능한 일이고,일반적으로 가능한 긁어오기는 XML 비통기 통신이다.

 

우리는 흔히 AJAX 통신이라 한다.

 

그렇다면 XML 비동기 통신이 갓갓한 기능인 것이냐?그건 또 아닌게, XML 비동기 통신은, CORS 라는, 장벽이 있다.

 

Cross Origin Resource Sharing.

 

즉, 같은 도메인 내에서만 긁어오기를 허락한다는 의미다.

 

쉽게 말하면, daum.net 에서 naver.com 을 못 긁어온다는 의미이다.또한 로컬 환경에서 긁어오는 방법도 안된다.
치명적인 단점이라 볼 수 있다. (보안만 두고 보자면 좋은거고...)

1. XML 비동기 통신으로 긁어오기

const request = new XMLHttpRequest();
const url = 'http://naver.com'; // 긁어오고 싶은 주소를 넣는다. 예제는 네이버

request.open('GET', url, true);
request.onload = function () {
  console.log(request.responseText); // 긁어온 내용 뿌리기
};
request.send();

이 방식은 브라우저에서 흔히 웹사이트를 긁어올 때 쓰는 방식이다.

 

하지만 위에서도 언급했듯이, CORS 문제도 있고, 로컬 환경에선 긁어올 수 없다는 단점도 가지고 있다.

 

만일 당신이 node.js, 또는 nwjs 등을 이용하고 있다면, 다음과 같이 써보자.

 

2.HTTP 모듈로 긁어오기

const http = require('http'); // http 모듈 불러오기
const url = 'http://naver.com'; // 긁어오고 싶은 주소를 입력.

http.get(url, stream => {
  let rawdata = '';
  stream.setEncoding('utf8');
  stream.on('data', buffer => rawdata += buffer);
  stream.on('end', function () {
    console.log(rawdata); // 긁어온 내용 뿌리기
  });
});

이 방식은 CORS 문제없이 웹 사이트를 긁어올 수 있다.

 

다만 웹 브라우저에서 사용은 불가능하다. 웹 브라우저에선 http 모듈을 지원하지 않기 때문이다.

 

전체적으로 총제적 난국(?)이므로, 이 두 개중 원하는 방식을 골라서 사용해야 한다.

 

출처 : http://blog.naver.com/izure/221020095236