AJAX와 서버

AJAX는 Asynchronous JavaScript And Xml의 약자로
서버와 비동기적으로 데이터를 주고 받는 자바스크립트 기술을 의미한다.
그런데 이 말이 조금은 생소해보일지도 모른다.
‘비동기적’ 이라는 말과 ‘서버’라는 말부터 어려워보여서 그럴까.

그래서 서버에 대해서 먼저 간략하게 정리하고자 한다.
서버는 사용자가 데이터를 요청(Request)하면 요청한 데이터를 보내주는(Response) 프로그램이다.
그런데 서버에게 데이터를 요청할 때는 아무런 방법으로나 요청하는 것이 아니라
정해진 방법에 따라서 요청을 해야지 서버는 해당 요청에 대해 응답을 한다.
즉, 서버에 데이터를 요청할 땐 데이터의 정확한 URL을 알아야 하고
해당 URL로 GET 요청을 해야지만 서버는 해당 데이터에 대해 응답한다.

URL과 GET method

보통 서버의 데이터에 접근하는 URL은 서버의 개발자가 알고 있어 명시하거나
전달 받을 수 있고 본인이 서버의 개발자라면 더더욱 알고 있을 것이다.

그렇다면 남은건 해당 URL로 GET요청을 하는 것인데
GET요청을 하는 방법은 크게 3가지 방법이 있다.
첫 번째로는 주소창에 해당 URL과 정규표현식을 이용해 직접 입력하는 방법이고
두 번째는 form 태그에 action과 type을 작성해 버튼으로 날리는 방법이다.
그런데 두 방법 모두 데이터를 요청할 때마다 페이지가 새로고침되는 치명적인 아쉬움이 있다.
예컨대, 인스타그램 피드를 데이터로 받아온다고 가정할 때 웹은 데이터를 받아올 때마다
새로운 페이지로 고치고 데이터를 보여줄 것이고 굉장히 부자연스러운 동작으로 보일 것이다.
리액트로 SPA를 구성하는 것과 같은 이유다. 카테고리마다 새로고침되는 것이 생각보다 곤란하다.
그래서 나온 방법이 세 번째 방법이다.
세 번째는 AJAX를 사용해 GET요청을 날리는 것이다.
결국 AJAX의 핵심은 새로고침 없이도 서버에게 GET 요청을 할 수 있는 상당한 JS코드이다.

AJAX 작성

1. 정통

   var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            console.log(ajax.responseText)
        }
    };
    ajax.open("GET", "URL", true);
    ajax.send();
   

2. 현대

   // fetch().then(() = > {}).then(() = > {}).catch(() = > {})
   fetch('URL')
   .then((res) = > {
       if(!res.ok){
       throw new Error('Error Msg');
       }
       return res.json();
   })
   .then((result) = > {
       console.log(result);
   })
   .catch((err) = > {
       console.log(err);
   })
   

3. JQUERY + AJAX

   $.ajax ({
   // URL은 필수 요소이므로 반드시 구현해야 하는 Property입니다.
   url : "url", // 요청이 전송될 URL 주소
   type : "GET", // http 요청 방식 (default: ‘GET’)
   async : true,  // 요청 시 동기화 여부. 기본은 비동기(asynchronous) 요청 (default: true)
   cache : true,  // 캐시 여부
   timeout : 3000, // 요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error 콜백을 호출.(단위: ms)
   data  : {key : value}, // 요청 시 포함되어질 데이터
   processData : true, // 데이터를 컨텐트 타입에 맞게 변환 여부
   contentType : "application/json", // 요청 컨텐트 타입
   dataType : "json", // 응답 데이터 형식 (명시하지 않을 경우 자동으로 추측)
   beforeSend : function () {
   	// XHR Header를 포함해서 HTTP Request를 하기전에 호출됩니다.
   },
   success : function(data, status, xhr) {
   	// 정상적으로 응답 받았을 경우에는 success 콜백이 호출되게 됩니다.
   	// 이 콜백 함수의 파라미터에서는 응답 바디, 응답 코드 그리고 XHR 헤더를 확인할 수 있습니다.
   },
   error	: function(xhr, status, error) {
   	// 응답을 받지 못하였다거나 정상적인 응답이지만 데이터 형식을 확인할 수 없기 때문에
   	// error 콜백이 호출될 수 있습니다.
   	// 예를 들어, dataType을 지정해서 응답 받을 데이터 형식을 지정하였지만,
   	// 서버에서는 다른 데이터형식으로 응답하면  error 콜백이 호출되게 됩니다.
   },
   complete : function(xhr, status) {
   	// success와 error 콜백이 호출된 후에 반드시 호출됩니다.
   	// try - catch - finally의 finally 구문과 동일합니다.
   }
   })
   .done(function(data, textStatus, xhr) {
   	// 성공 후처리
   })
   .fail(function(xhr, textStatus, errorThrown) {
   	// 실패 후처리
   })
   .always(function(data|xhr, textStatus, xhr|errorThrown) {
   	// 성공 여부에 관계없이 항상 마지막에 실행
   })
   // success / error 형태
   $.ajax({
   	url: 'URL',
   	type: 'POST',
   	data: yourData,
   	datatype: 'json',
   	success: function (data, textStatus, xhr) { },
   	error: function (xhr, textStatus, errorThrown) { },
   	complete: function(xhr, status) { }
   });
   
   // .done() / .fail() 형태
   $.ajax({
   url: 'URL',
   type: 'POST',
   data: yourData,
   datatype: 'json'
   })
   .done(function(data, textStatus, xhr) { })
   .fail(function(xhr, textStatus, errorThrown) { })
   .always(function(data|xhr, textStatus, xhr|errorThrown) { })
   .then(function(data, textStatus, xhr|errorThrown) { });
   

4. Axios 현재 내가 리액트로 가장 많이 쓰는 방법이다.

axios({
    url: 'url',
    method: 'method'
})
.then((res) => {
    if(res.status === 200){
        // the code to run
    }
})
.catch((err) => {
    console.log(err);
})

CORS 에러

AJAX를 사용하다보면 생각보다 빈번하게 CORS 에러를 마주할 수 있다.
CORS에러는 다른 서버에 요청을 날리는 경우 발생하는데,
보안 이슈 관련된 것이라 사전에 차단해둔 것이다.
보안 이슈 관련이니 끄지 않는 것이 당연 좋겠지만
혹여라도 꺼야한다면 헤더에

Access-Control-Allow-Origin

을 추가하거나

var cors = require('cors');
app.use(cors());

로 CORS 정책 기능을 끄면 된다.