1. 2일 전

    Date, JSON 객체

    Date, JSON 객체의 이모저모

  2. 19일 전

    ES6 - Generator

    Generation 함수 사용하기

  3. 26일 전

    ES6 - iteration & for ... of

    iteration과 활용

  4. 1달 전

    ES6 - Symbol

    왜 Symbol이 필요할까?

  5. 1달 전

    ES6 - Rest/Spread 연산자

    코드를 더 간결하게

  6. 2달 전

    ES6 - Promise

    콜백 지옥을 벗어나자

  7. 2달 전

    Webpack(3) - Plugin

    Plugin으로 더 강력한 Webpack

  8. 2달 전

    ES6 화살표 함수

    화살표 함수에 대해 깊게 이해하기

  9. 2달 전

    32. 이벤트

    이벤트 루프

  10. 2달 전

    JS가 객체지향언어라 할 수 있는 이유

    대체가능성, 내적동질성

  11. 3달 전

    Webpack(2) - Loader

    Loader로 다양한 파일 다루기

  12. 3달 전

    비동기 처리

    JavaScript에서 비동기 처리

  13. 3달 전

    19. 클로져

    JavaScript에서 클로저란?

  14. 3달 전

    18. 실행컨텍스트

    JavaScript에서 실행컨텍스트

  15. 3달 전

    17. this

    JavaScript에서 this

  16. 3달 전

    Webpack(1) - 기본편

    Webpack 대한 기본 이해

  17. 4달 전

    Babel(4) - polyfill

    더 많은 브라우저 지원하기

  18. 5달 전

    Babel(3) - 설정편

    설정하는 다양한 방법

  19. 5달 전

    Babel(2) - 실행편

    실습을 통한 더 깊은 이해

  20. 5달 전

    Babel(1) - 기본편

    babel에 대한 기본 이해

Tamm자바스크립트 웹 개발 환경을 좋아하고 사람들에게 재미를 주는 것에 관심이 많은 개발자 입니다.

비동기 처리

JavaScript에서 비동기 처리

featured image thumbnail for post 비동기 처리

Ajax | PoiemaWeb

Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미한다.

전체 웹 페이지를 다시 불러 오지 않은 채로 점진적으로 또 부분적으로 그 사용자 인터페이스(와 페이지 내용)를 갱신할 수 있다.

흥미로웠던것은 Ajax가 ActiveX가 원형이라는 것,,

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
  // 요청에 대한 콜백
  if (httpRequest.readyState === xhr.DONE) {
    // 요청이 완료되면
    if (httpRequest.status === 200 || httpRequest.status === 201) {
      console.log(httpRequest.responseText);
    } else {
      console.error(httpRequest.responseText);
    }
  }
};
httpRequest.open("GET", "http://www.example.org/some.file", true);
httpRequest.send();

send에는 우리가 보내고 싶은 body 내용 들.

httpRequest.setRequestHeader(
  "Content-Type",
  "application/x-www-form-urlencoded"
);
xhr.setRequestHeader("Accept", "application/json");
httpRequest.send("age=15&from=korea");

Response


  • http_request.responseText – 서버의 응답을 텍스트 문자열로 반환할 것이다.
  • http_request.responseXML – 서버의 응답을 XMLDocument 객체로 반환하며 당신은 자바스크립트의 DOM 함수들을 통해 이 객체를 다룰 수 있을 것이다.

JSON 형태라면 JSON.parse(httpRequest.responseText) 로 손쉽게 객체로 만들어낼 수 있다.

사용할 일은 거의 없겠지만 XML이라면,,

<?xml version="1.0" ?>
<root>
    I'm a test.
</root>

var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);

크로스 도메인 이슈 (CORS)

웹 개발시 주요한 이슈중 하나로, 웹 개발을 하다보면 어떤 경로던 이 이슈를 마주하게 된다. 동일 출처 정책(same-origin-policy)은 하나의 웹 페이지에서 다른 도메인 서버에 요청하는 것을 제한하는 것이다. 제한하는 이유는 간단한데, 내가 네이버라고 가정해보자. 누군가 다른 포탈 서비스를 만들고, 네이버에서 검색한 결과만 가져온다면 문제가 되지 않을까? 때문에 보통의 브라우저에서는 외부 도메인으로의 Ajax로 요청을 보낼 때, cors를 체킹한다. 아래는 크롬에서 발생하는 cors 에러창이다.

그런데 어떤 경우에는 이러한 제한이 또다른 문제를 발생시킨다는 것이다. 이번엔 내가 카카오라 하자. 카카오톡 앱에서는 #검색으로 다음에서의 검색 결과를 가져오는 서비스가 있다. 이때, 다음과 카카오는 다른 도메인을 사용하기 때문에 cors문제가 발생하게 된다. 특정 사용자에게는 허용을 해줘야 하는 경우가 생기게 된다. (심지어 https://abc.com:8080과

https://abc.com:8888

사이에서도 CORS문제는 발생한다!!!)

이러한 문제를 해결할 수 있는 여러 방법들이 있지만, 제일 일반적인 방법인 헤더를 이용하는 방법과 jsonp에 대해서 소개한다. 먼저 헤더를 이용하는 방법이다.

  • response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
  • POST, GET, OPTIONS, DELETE 요청에 대해 허용하겠다는 의미.
  • response.setHeader("Access-Control-Max-Age", "3600");
  • HTTP Request 요청에 앞서 Preflight Request 라는 요청이 발생되는데, 이는 해당 서버에 요청하는 메서드가 실행 가능한지(권한이 있는지) 확인을 위한 요청. Preflight Request는 OPTIONS 메서드를 통해 서버에 전달된다. (위의 Methods 설정에서 OPTIONS 를 허용해 주었다.)

여기서 Access-Control-Max-Age 는 Preflight request를 캐시할 시간. 단위는 초단위이며, 3,600초는 1시간. Preflight Request를 웹브라우저에 캐시한다면 최소 1시간동안에는 서버에 재 요청하지 않음.

  • response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); 이는 표준화된 규약은 아니지만, 보통 AJAX 호출이라는 것을 의미하기 위해 비공식적으로 사용되는 절차. JQuery 또한 AJAX 요청 시, 이 헤더(x-requested-with)를 포함하는 것을 확인하실 수 있음. 여기서는 이 요청이 Ajax 요청임을 알려주기 위해 Header 에 x-request-width를 설정. Form을 통한 요청과 Ajax 요청을 구분하기 위해 사용된 비표준 규약지만, 많은 라이브러리에서 이를 채택하여 사용. (참고로 HTML5 부터는 Form 과 Ajax 요청을 구분할 수 있는 Header가 추가됨.)
  • response.setHeader("Access-Control-Allow-Origin", "*"); * 는 모든 도메인에 대해 허용하겠다는 의미. 즉 어떤 웹사이트라도 이 서버에 접근하여 AJAX 요청하여 결과를 가져갈 수 있도록 허용하겠다는 의미. 만약 보안 이슈가 있어서 특정 도메인만 허용해야 한다면 * 대신 특정 도메인만을 지정할 수 있음.

출처: 이러쿵저러쿵

JSONP

CORS를 해결하는 유명한 방법 중 하나가 JSONP를 사용하는 것이다 jsonp의 원리는 다음과 같다.