image.png

1. Browser

  • 사용자 컴퓨터 단말기(PC,태블릿,스마트폰,스마트TV등등)의 웹브라우저를 통해 인터넷망 기반에서 특정 웹사이트에 접속하면 해당 웹사이트를 제공하는 서버컴퓨터내의 웹서버를 통해 제공되는 HTML 페이지 나 HTML결과물을 웹 브라우저가 수신,해석(Interpreting)하여 사람이 알아볼수 있게 Display해주고 주로 텍스트 및 그림 형태로 특정정보들을 제공하거나 관리해주는 서비스

  • 주소입력란(URL)을 통해 웹사이트 웹 페이지를 요청하고 웹서버,웹사이트에서 제공된 HTML 코드를 사람들이 이해할수 있는 구조로 HTML를 해석해주는 일종의 HTML번역기로 HTML코드로 표현된 언어를 사람이 인지할수 있는형식(텍스트+이미지=컨텐츠)으로 보여주는 역할을 제공

  • IE,Chrome,Safari,Opera...

2. HTTP

image.png

image.png

HTTP (Hyper Text Transfer Protocol)

  • HTTP는 www 상에서 정보를 주고 받는 프로토콜이다.
  • 클라이언트인 웹 브라우저가 서버에 HTTP를 통해 웹페이지나 이미지 정보를 요청하면 서버는 이 요청에 응답하여 요구하는 정보를 제공하게 된다.
  • 웹브라우저(Client)와 서버(Server)간의 웹페이지 같은 자원을 주고 받을 때 쓰는 통신 규약이다.

  • http는 텍스트 교환이다. 즉, 데이터가 평문으로 전송된다.
  • html 페이지도 텍스트다. 바이너리 데이터로 되어있는 것도 아니고 단순 텍스트를 주고 받기 때문에 누군가 네트워크에서 신호를 가로채어 본다면 내용이 노출된다.

image.png

HTTPS

  • 위의 http의 보안상 문제를 해결해주는 프로토콜이 https다.
  • http하고 역할도 거의 같지만 모든 통신 내용을 암호화한다.
    • 1) SSL 기반의 통신
    • 2) 암호화된 데이터를 전송
    • 3) 종단간 신뢰성을 확보

  • HTTP를 직관적을 풀어보면 HyperText를 전송할 때 지켜야하는 통신규칙이란 뜻이며 여기서 HyperText란 HTML이라고 하는 인터넷망에 존재하는 자원을 말합니다.
  • HTTP란 인터넷 통신망에서 HTML이란 자원(리소스)를 요청하고 응답할 때 사용되는 통신규칙(규약)(Protocol)입니다.

실제 웹 기반 서비스 관점의 시나리오로 리얼하게 표현 하면 사용자 컴퓨터 내에 설치된 웹 브라우저란 클라이언트 S/W에 웹사이트의 주소와 웹 페이지를 요청하면 해당 주소와 웹 페이지 리소스(URI)를 기반으로 관련 서비스를 제공하는 서버 컴퓨터를 찾아 서버컴퓨터 내에 설치되어있는 웹 서버 S/W와 그 안에 존재하는 다양한 웹 사이트 내에 있는 웹 페이지(html을 만들어내는 각종 웹 페이지)를 요청하고 그 응답의 결과물인 HTML결과물을 인터넷 망을 통해 응답 할 때 준수 해야 하는 통신규칙(규약)을 말합니다.

3. Server

  • client && server && database
    image.png

  • client && server && database
    image.png

  • client && server && database

  • HTTP && API
    image.png
    Web application process flow

4. API

  • API(Application Programming Interface)란
    • 데이터와 기능의 집합을 제공하여 컴퓨터 프로그램간 상호작용을 촉진하며, 서로 정보를 교환가능하도록 하는 것
    • 서로간의 CRUD 할 수 있게 하는 것
    • 상호간의 소통방식
  • 예) Korean JSON

image.png

image.png

image.png

4-1. Rest API?

  • REST API의 정의

    • REST 기반으로 서비스 API를 구현한 것
    • 최근 OpenAPI(누구나 사용할 수 있도록 공개된 API: 구글 맵, 공공 데이터 등), 마이크로 서비스(하나의 큰 애플리케이션을 여러 개의 작은 애플리케이션으로 쪼개어 변경과 조합이 가능하도록 만든 아키텍처) 등을 제공하는 업체 대부분은 REST API를 제공한다.
  • REST API의 특징

    • 사내 시스템들도 REST 기반으로 시스템을 분산해 확장성과 재사용성을 높여 유지보수 및 운용을 편리하게 할 수 있다.
    • REST는 HTTP 표준을 기반으로 구현하므로, HTTP를 지원하는 프로그램 언어로 클라이언트, 서버를 구현할 수 있다.
  • 누가봐도 알아보기 쉬운 API를 만드는 것이 가장 중요

  • 보기 편-안-한 코드

image.png

image.png

image.png

The samples below show how to call the REST methods in an easy way. In order to have a look at all methods and their parameters, you can study the REST API Reference at https://antmedia.io/rest which has a good look and feel. Thanks to the Swagger.

5. Ajax

  • Ajax란?

    • Ajax(Asynchronous JavaScript and XML, 에이잭스)

    • 동기 와 비동기의 차이
      image.png

    • 동기
      image.png

    • 비동기
      image.png

  • Ajax 비동기 통신 모델

    • 전통적인 웹 : 클릭 할때마다 HTML 문서 요청하여 해석
    • Ajax : 데이터 처리를 위해 서버와 HTTP 객체로 통신
  • 서버에 요청한 결과를 다 받기 전에 다른 작업 병행 가능

  • 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법

    • 표현 정보를 위한 HTML(또는 XHTML)과 CSS
    • 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
    • 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XMLhttpReqeust, XSLT
  • DHTML이나 LAMP와 같이 Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, HTML, CSS , JS 등함께 사용하는 기술의 묶음을 지칭하는 용어

  • Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 할 수 있게 해줌

  • 즉, Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그결과를 웹 페이지의 일부분에만 표시할 수 있음

  • 전통적인 웹에서는 데이터 처리한 후 응답 페이지를 HTML로 작성

  • Ajax는 처리한 결과에서 필요한 데이터만 가벼운 형태의 XML,CSV,JSON 데이터로 전송

    • 클라이언트에서 이를 받아서 결과 페이지를 작성
  • 데이터 처리속도와 인터페이스의 입출력 반응속도가 현저하게 증가

    • ex) 검색창 제시어
  • Ajax의 장점

    • 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 가능
    • 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있음
    • 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있음
    • 백그라운드 영역에서 서버로 데이터를 보낼 수 있음
  • Ajax 구동 방식

image.png

  1. user clicks, invoking an event handler

  2. handler's code creates an XMLHttpRequest object

  3. XMLHttpRequest object requests page from server

  4. server retrieves appropriate data, sends it back

  5. XMLHttpRequest fires an event when data arrives

    • this is often called a callback
    • you can attach a handler function to this event
  6. your callback event handler processes the data and displays it

    • 예-1 (get , error처리)
      new Ajax.Request("url", {
      method: "get",
      onSuccess: functionName,
      onFailure: ajaxFailure,
      onException: ajaxFailure
      });
      ...
      function ajaxFailure(ajax, exception) {
      alert("Error making Ajax request:" + 
       "\n\nServer status:\n" + ajax.status + " " + ajax.statusText + 
       "\n\nServer response text:\n" + ajax.responseText);
      if (exception) {
      throw exception;
      }
      }
    • 예-2 (post)
      new Ajax.Request("url", {
      method: "post",
      parameters: {name: value, name: value, ..., name: value},
      onSuccess: functionName,
      onFailure: functionName,
      onException: functionName
      });
    • 예-3 (fetch, post)
      fetch('https://koreanjson.com/posts/1')
      .then(response => response.json())
      .then(json => console.log(json))
      .catch(error => console.log(error));

참고