browser, http, server , API , fetch

1. 브라우저(browser)에 관하여... 

브라우저는 웹 브라우저(web browser)라고도 합니다.

웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어이다.
웹 브라우저는 대표적인 HTTP 사용자 에이전트의 하나이기도 하다.
주요 웹 브라우저로는 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러/마이크로소프트 엣지, 오페라, 사파리가 있다.

 

2. 클라이언트(client) 와 서버(server)에 대하여...

그림 두개를 참조해보자...

클라이언트는 서버에게 요청을 하고 서버는 클라이언트에게 반환을 한다.

클라이언트는 서버와 다르게 여러개가 존재한다.  서버 하나에 여러개의 클라이언트가 붙는다는 것이다.

그렇다면 이제 클라이언트와 서버가 무엇인지 정리해보자.

 

클라이언트(client)

컴퓨터 네트워크에서 클라이언트(client, 문화어: 의뢰기)는 네트워크를 통하여 서버라는 다른 컴퓨터 시스템 상의 원격 서비스에 접속할 수 있는 응용 프로그램이나 서비스를 말한다. 

구체적으로 말하면 클라이언트-서버 구조에서 서버에서 그 서버가 제공하는 서비스를 요청하고, 또는 서비스 요청을 위해 필요 인자를 서버가 원하는 방식에 맞게 제공하며, 서버로부터 반환되는 응답에 사용자에게 적절한 방식으로 표현하는 기능을 가진 프로그램이나 시스템이다.

클라이언트/서버(client/server) 구성에서 사용자측. 사용자가 서버에 접속했을 때 클라이언트는 사용자 자신을 지칭할 수도 있고, 사용자의 컴퓨터를 가리키기도 하며, 컴퓨터에서 동작하고 있는 프로그램이 될 수도 있다.

서버(server)

네트워크나 데이터 서비스를 제공하기 위해 컴퓨터 네트워크를 통한 요청에 응답하는 시스템.
근거리통신망에서 집약적인 처리기능을 서비스하는 서브시스템

 

서버와 클라이언트의 공통점

두개다 시스템이다.

 

서버와 클라이언트의 관계

클라이언트는 서버에게 요청을 하고..

서버는 클라이언트에게 반환을 한다.

 

그렇다면 요청과 반환의 의미는?

요청

필요한 어떤 일이나 행동을 청함. 또는 그런 청.

반환

빌리거나 차지했던 것을 되돌려줌.

 

TCP/IP에 대해서

TCP/IP는 패킷 통신 방식의 인터넷 프로토콜인 IP (인터넷 프로토콜)와 전송 조절 프로토콜인 TCP (전송 제어 프로토콜)로 이루어져 있다. IP는 패킷 전달 여부를 보증하지 않고, 패킷을 보낸 순서와 받는 순서가 다를 수 있다.

(unreliable datagram service) TCP는 IP 위에서 동작하는 프로토콜로, 데이터의 전달을 보증하고 보낸 순서대로 받게 해준다. HTTP, FTP, SMTP 등 TCP를 기반으로 한 많은 수의 애플리케이션 프로토콜들이 IP 위에서 동작하기 때문에, 묶어서 TCP/IP로 부르기도 한다.TCP/IP는 패킷 통신 방식의 인터넷 프로토콜인 IP (인터넷 프로토콜)와 전송 조절 프로토콜인 TCP (전송 제어 프로토콜)로 이루어져 있다. 

IP는 패킷 전달 여부를 보증하지 않고, 패킷을 보낸 순서와 받는 순서가 다를 수 있다.(unreliable datagram service) TCP는 IP 위에서 동작하는 프로토콜로, 데이터의 전달을 보증하고 보낸 순서대로 받게 해준다. 

HTTP, FTP, SMTP 등 TCP를 기반으로 한 많은 수의 애플리케이션 프로토콜들이 IP 위에서 동작하기 때문에, 묶어서 TCP/IP로 부르기도 한다.

 

 

3. HTTP에 대해서...

HTTP(HyperText Transfer Protocol, 문화어: 초본문전송규약, 하이퍼본문전송규약)는 WWW 상에서 정보를 주고받을 수 있는 프로토콜이다. 
인터넷에서, 웹 서버와 사용자의 인터넷 브라우저 사이에 문서를 전송하기 위해 사용되는 통신 규약을 말한다.

그럼 하이퍼텍스트란(HyperText)??

하이퍼텍스트는 문서 중간중간에 특정 키워드를 두고 문자나 그림을 상호 유기적으로 결합하여 연결시킴으로써, 서로 다른 문서라 할지라도 하나의 문서인 것처럼 보이면서 참조하기 쉽도록 하는 방식을 의미한다.

 

HTTP의 속성

 무상태성(stateless) : http 요청은 독립적이고 일회적이다. 이전 요청에 대한 컨텍스트를 공유하지 않아서 독립적인 요청이 진행된다. 컨텍스트 공유을 위해서는 인증이라는 과정을 통해서 보완을 해야 한다.

 비연속성(connectionless) : 1요청 1응답의 구조, 응답 직후 연결은 종료(연결 상태를 유지하지 않음)한다.

HTTP의 작동 방식

 클라이언트 요청에 반드시 응답한다.(있다, 없다, 잘못된 요청이다 등)

URI : 인터넷에 있는 자원을 주소로 담아 나타내는 방식으로 scheme에 HTTP를 넣는 꼉우 http 프로토콜을 통해 uri를 작성할 수 있다.

scheme: http:// 혹은 보안이 적용된 https://로 시작하고 동사가 아닌 명사로 표기

도메인 이름

포트: 웹 서버 상의 리소스에 접근하는데 사용 되는 기술적인 "문(gate)"

경로: 웹 서버 상의 리소스 경로쿼리: 웹 서버에 제공되는 추가적인 파라미터

프래그먼트: 특정 앵커(브라우저에게 그런 "북마크된" 지점에 위치한 컨텐츠를 보여주기 위한 방법)를 가리킴

HTTP 메세지 구성 : Header와 Body

 Header: 어디서 보내는 요청인가? ..컨텐츠 타입은 무엇인가?.. 어떤 클라이언트를 이용해 보냈는가? 등의 정보를 담는다.

 Body : 서버에 데이터를 보내기 위한 공간, post/put/patch 등은 body라는 내용에 정보를 많이 그리고 감춰서 전달하고 get이나 delete는 body에 정보를 담지 않는다.

Method(crud를 실행하는 방법) : get , pos, put, delete

 get : 서버로부터 데이터를 받아온다(조회에 해당), body 대신 주소에 쿼리 스트링으로 데이터를 동봉함

delete : 서버에서 데이터를 제거 

                 get이나 delete에는 본문을 담았을 때 어떻게 처리 하라는 것인지 명확하지 않아서 본문을 담지 않는다. 

post : 서버 족에 데이터를 추가, body에 추가된 정보를 담아서 전달

 put : 서버 쪽에 수정, 변경된 정보를 body에 담아서 전달, 보통 정보를 전부 바꿀 때 사용. 

 patch : put과 기능 유사, 정보 일부를 특정 방식으로 바꿀 때 사용, 변경될 상세 정보는 body에 담아서 전달

 

4. API : Application Programming Interface

API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 
운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 
주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.

 

5. AJAX : Asynchronous Javascript and XML

ajax 기술에 대하여... 

서버에서 응답을 받을때마다 페이지를 리로딩 하지 않고 브라우저 내에서 비동기적 요청/용답 처리를 통해서 페이지 전체 리로딩 없이 필요한 부분만 업데이트 하는 기술.. 페이지는 -> web app이라고 부른다.

사용방법은 XMLHttpRequest, jQuery ajax, fetch 등에서 ajax를 메소드로 제공

fetch API:  promise 객체로 값을 가져온다.

fetch(‘http://서버주소’)
 .then(function(resp) {
   // 응답 형식에 따라 resp.text(), resp.html(), resp.json 등이 될 수 있음
   return resp.json();
   .then(function(json) {
   // api의 정보 set을 이용해서 하고 싶은 작업 삽입
   });

POST시 fetch API 형턔

let newPost = { "userId": 1, "title": "새 글을 써봤습니다", "body": "안녕하세요?"}
 
fetch('http://서버주소/posts', {
   method: 'POST',
   body: JSON.stringify(newPost),
   headers: {
     "Content-Type": "application/json"
     }
   }).then(function(resp) {
      return resp.json();
   }).then(function(json) {
      console.log(json); // { id: 123 }
 });