2019-05-29 비동기식 처리 모델과 Ajax , REST API 등

비동기식 처리 모델과 Ajax

Web Server  -> HTML , CSS, Javascript , jpg, svg, XML 등등 이것들(정적이다)을 제공해주는 것을 웹서버라고한다.

                     웹서버는 대부분 어플리케이션서버를 포함한다.

Application Server

Database Server

 

웹페이지가 뜨는 과정.

주소창에 네이버를 검색하면, 주소창 뒤에 숨겨진 index.html이란 파일을 서버에 요청(request) 서버에서는 그 요청을 받아서 자기 서버에 있는 index.html파일을 찾아서 읽어들이고 메모리에 저장후에 이진수들이 랜선을 타고, 클라이언트가 받아서(response) 메모리에 쌓고 다왔다라고 인식을 하면 실행함(다운로드 및 실행)

 

Rest API에서 API를 붙인 이유. 

함수 쓰듯이 해서 ( 리턴이 항상 있고, 인수를 줄때가 있고 안줄때가 있고 )

 

fetch('URI')
   // then은 promise를 리턴함
  .then(res => res.json())  // response에서 json형식으로 오는데 그것을 객체화 하는것(역직렬화)
  .then(todosfromServer => {  // 객체화하면 
    todos = todosFreomServer;  // 객체를 todos에 담고 
    
    console.log('[GET\n', todos);
    render();  // 렌더링, 렌더링이 이 함수 밖에 있으면, 데이터가 안온것처럼 동작한다.
  });

 

Ajax(Asynchronous JavaScript and XML)

 

XML : 예전에 JSON이 나오기이전에 서버와 클라이언트 데이터 교환용으로 쓰던 파일 포맷

XML 단점: 데이터가 크다.(태그랑 어트리뷰트가 내용이 많음) -> 서버와 통신할때 너무 오래걸려버림.

 

JSON (javaScript Object Notation): 객체 리터럴 처럼 생긴 String이다. (= 표기법이다)

 

AJax로 보낼거면, 태그안에 name이 있어야한다. -> name이 key값으로 들어가기 때문에

 

form태그안에는 

method는 get또는 post / action은 데이터를 보낼 서버(보내면 받을 애)

GET을 쓰면, 브라우저가 코딩을 안해도 우리의 주소창에 있는 주소에 뒤에 자동으로 붙여서 보낸다.

데이터가 주소창에 보여져버림, 서버는 URI를 보고 뒤에만 잘라서 쓴다. 

장점은 사용하기가 간편하다. 단점은 데이터가 보여버림.

서버에서 데이터를 가지고 올때 쓰는 방식이다.

 

POST를 쓰면, 

데이터를 만들기는 하는데 주소창 뒤에 붙여서 넘기지 않고, response라는 객체에 body라는 영역에 담아서 보낸다. 

장점은 데이터를 숨겨서 보낼 수 있음(사람눈에 보이지 않음) 

POST 편지를 보낸다. 우리가 데이터를 보내면 뭔가 만들어라. (흡사 addTodo같은의미) 즉 생성할때 쓰는 방식이다.

 

DELETE방식은 하나를 뽑아서 지우던지, 싹지우던지 2가지 방법이 있다.

유니크한 값을 서버에 같이 보내주면, 그 해당 유니크값을 지운다. 안보내주면 다 지움.

 

PUT은 하나만 갱신 (유니크한값을 보내줘야함.)

PATCH 죄다 갱신

 

자바스크립트는 기본적으로 유니코드를 지원. 

전역함수에 URL 

 

<form method="GET" action="login.php">
  <input type="text" name="userid">
  <input type="text" name="userpw">
  <input type="submit" value="send">
</form>
  
 // login.php?userid=111&password=2222 뒤에 이런식으로 붙는다.

--> 치명적 단점 : 화면이 깜박한다(=갱신된다) 

 

주소창이 바뀌면 화면이 갱신된다. 

e.preventDefalut를 해서 기본적인 동작을 막고

원하는 html조각을 가져와서 껴넣는다.

 

Ajax를 쓰면, 데스크탑 애플리케이션과 유사한 UX를 구현할 수 있다.(안깜박거림)

모던한 자바스크립트는 기본적으로 Ajax를 쓴다.

 

***

SPA를 만들기 위해서 Angular , react, view 를 쓴다.

단순한 회사소개 홈페이지는 jquery정도만 써도 된다.

***

 

Ajax를 쓰기위해서는

XMLHTTPRequest = xhr  를 써야한다.

 

view를 만들기 위해서 서버와 통신하여, 얻어오고 지우고 등등을 하는게 Ajax이다.

 

아래 2개 함수가 중요하다.

JSON.stringify : 객체를 JSON 형식의 문자열로 변환

JSON.parse

 

// XMLHttpRequest 객체의 생성
const xhr = new XMLHttpRequest();
// 비동기 방식으로 Request를 오픈한다
xhr.open('GET', '/users');  // form태그안에 어트리뷰트 써준거와 같다.
// Request를 전송한다
xhr.send();

--> send를 하면 request를 해서 간다.

     response는 이벤트로 받는다.

 

XMLHttpRequest.open(method, url[, async])   -> 준비

XMLHttpRequest.send  -> 보내기 시작

 

 

• POST는 request의 Body영역에 담아서 보내준다.
• Body에 담기는 데이터는 form-urIencoded방식으로 보내진다. 
• payload = Body에 담기는 데이터

 

• 우리가 원하는 데이터는 body에 있다.
• 데이터를 body에서 꺼내여야함.
• 나머지 정보들은 추가적으로 정보를 알고 싶을때 쓴다.

 

 

 

 

 

2진수를 보냈다는 의미 = 파일(예를들어 이미지파일)을 보냈다 라는 의미.

 

send를 쓸때 인수로 

기본적으로 GET방식은 비워서 보낸다.(인수없이)

POST방식은 payload를 즉 send안에 인수를 채워서 보내야한다. 

xhr.send(null);
// xhr.send('string');
// xhr.send(new Blob()); // 파일 업로드와 같이 바이너리 컨텐트를 보내는 방법
// xhr.send({ form: 'data' });
// xhr.send(document);

만약, GET방식인데 인수를 넣으면 무시가 되버린다. 

 

 

XMLHttpRequest.setRequestHeaderrequest요청에 headr를 수정하고싶을때 사용

 

Content-type

request body에 담아 전송할 데이터의 MIME-type 정보를 표현

타입서브타입

text 타입	text/plain, text/html, text/css, text/javascript
Application 타입	application/json, application/x-www-form-urlencode  ( json형식 / key = value  key = value 형식 )
File을 업로드하기 위한 타입	multipart/formed-data(파일보낼때)

Accept 

// 서버가 센드백할 데이터의 MIME-type 지정: json
xhr.setRequestHeader('Accept', 'application/json');

Ajax response

const xhr = new XMLHttpRequest();

// XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다 onreadystatechange 이벤트 핸들러가 호출된다.
xhr.onreadystatechange = function (e) {    // readystatechange라는 이벤트
  // readyStates는 XMLHttpRequest의 상태(state)를 반환
  // readyState: 4 => DONE(서버 응답 완료)     
  if (xhr.readyState === XMLHttpRequest.DONE) {    // readtstate라는 프로퍼티
    // status는 response 상태 코드를 반환 : 200 => 정상 응답
    if(xhr.status === 200) {       // 성공
      console.log(xhr.responseText);   // responseText -> response body안에 들어있는 값이 text로 들어있다.
    } else {                      // response 실패
      console.log('Error!');
    }
  }
};

 

 Load JSONP

 

동일 출처 원칙

요청에 의해 웹페이지가 전달된 서버와 동일한 도메인의 서버가 다른경우에 

보안상의 이유로 다른 도메인(http와 https, 포트가 다르면 다른 도메인으로 간주한다)으로의 요청(크로스 도메인 요청)은 제한된다. 

 

 

동일출처원칙을 회피하는 방법 3가지

1. 웹서버의 프록시 파일

서버에 원격 서버로부터 데이터를 수집하는 별도의 기능을 추가하는 것이다. 이를 프록시(Proxy)라 한다.

2. JSONP

3. Cross-Origin Resource Sharing ( = CORS) -> 백엔드가 처리해준다.

우리(프론트엔드)는 백엔드에 요청만 해주면 된다.(node.js에는 처리해주는 패키지가 있음.)

 

*** 비동기로 하면, Ajax콜을 하는순간 끝날때까지 안기다리고 바로 뒤에 있는 일부터 해버린다. 

일이 끝나면, 끝난 다음에야 다음 일이 들어옴. 

엄청빠르게하니까 동시에 하는 것처럼보임 -> 비동기

<=> 동기는 순처적으로 실행

 

 

Ajax는 비동기라서 비동기는 요청하고 바로 다음 일처리를 시작해버림. 

비동기 함수는 동기함수처럼 쓰지 못한다.

<!DOCTYPE html>
<html>
<head>
  <title>Promise example</title>
</head>
<body>
  <h1>Promise example</h1>
  <script>
    // 비동기 함수
    function get(url) {
      // XMLHttpRequest 객체 생성
      const xhr = new XMLHttpRequest();

      // 서버 응답 시 호출될 이벤트 핸들러
      xhr.onreadystatechange = function () {
        // 서버 응답 완료
        if (xhr.readyState === XMLHttpRequest.DONE) {
          if (xhr.status === 200) { // 정상 응답
            /*
              비동기식 처리 모델은 처리 완료를 기다리지 않고 즉시 다음 태스크를 실행한다.
              따라서 비동기 함수 내에서 처리 결과를 반환(또는 전역 변수에의 할당)하면
              기대한 대로 동작하지 않는다.
              비동기 함수의 결과에 대한 처리는 함수 내에서 처리해야 한다.
            */
            console.log(xhr.response);
            return xhr.response;
          } else { // 비정상 응답
            console.log('Error: ' + xhr.status);
          }
        }
      };

      // 비동기 방식으로 Request 오픈
      xhr.open('GET', url);
      // Request 전송
      xhr.send();
    }

    const url = 'http://jsonplaceholder.typicode.com/posts/1';

    /*
      get 함수는 비동기 함수이므로 처리 완료를 기다리지 않고 즉시 다음 태스크를 수행한다.
      즉, 함수의 실행이 완료하여 함수의 반환값을 받기 이전에 다음 태스크로 진행한다.
      따라서 res는 undefined이다.
    */
    const res = get(url);
    console.log(res); // undefined
  </script>
</body>
</html>

 

비동기 함수를 외부에서 말고 내부에서 처리를 해줘야한다. 근데 문제점이 2가지가 있다

1. 에러처리를 할 수 없다.

 

2. 콜백헬이라는 현상이 발생한다.

=> 여러 개의 콜백 함수가 네스팅(nesting, 중첩)되어 복잡도가 높아지는 현상  -> 가독성이 매우 안좋아짐.

 

 

 

REST(Representational State Transfer) API

REST의 기본원칙 2가지

1. URI는 정보의 자원을 표현해야 한다.

# bad
GET /getBooks/1

# good
GET /books/1

2. 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE 등)으로 표현한다.

# bad
GET /books/delete/1        // 1번데이터 지워주세요 굳이 delete를 안써도됨.

# good
DELETE /books/1      

 

GET	index/retrieve	모든/특정 리소스를 조회
POST	create	리소스를 생성
PUT	update	리소스를 갱신
PATCH	update all	리소스를 일괄 갱신
DELETE	delete	리소스를 삭제

주로 위 5가지를 사용해서 CRUD를 구현한다.

** POST, PUT, PATCH(어떻게o, 무엇을x), DELETE는 payload가 반드시 필요하다.

 

json-server

json파일을 가지고 있으면, 데이터베이스처럼 쓸 수 있다.