Web Architectures
:↓ 아래의 문제를 참고해보자, 간략하게 흐름에 대해 기술하였다.
정답: 브라우저,api,HTTP
API(Application Programming Interface)
: 서버의 리소스를 클라이언트에서 사용할 수 있도록 마련해둔 인터페이스
(쉽게 스타벅스 메뉴판 으로 생각하자)
| 제목 | 설명 |
|---|---|
| API ( Application Programming Interface ) | 프로그래밍 되어있는 어플리케이션과 의사소통이 가능한 매개체 |
| UI ( User Interface ) | 유저와 의사소통이 가능한 매개체 |
*interface - 인간과 사물의 의사소통이 가능하도록 만들어진 물리적,가상적 매개체(접점)
client
웹브라우저를 통해서 서버에 원하는 정보를 요청한다
browser
: 컴퓨터는 2진수만 알아듣는다, html,js,css만으로도 우리가 사이트를 볼 수 있는이유는 브라우저 덕분이다.
↓ 웹 브라우저가 하는일을 그린 만화이다.
server
: 자원을 serve하는 주체
- 클라이언트의 요청을 받고 리소스를 조합해서 클라이언트에 다시 돌려주는 역할을 담당한다.
HTTP(HyperText Transfer Protocol)
: 서버와 클라이언트 사이의 규칙, 통신규약
클라이언트와 서버가 통신하기 위해서 HTTP 라는 규약 혹은 규칙을 지키며 통신을 한다.
작동방식은 항상 요청과 응답으로 이루어진다
ㄴ 항상 이렇게 있으면 있다, 없으면 없다 응답을 돌려주어야한다
1. HTTP 메소드
| 메소드 종류 | 설명 |
|---|---|
| GET | GET 메서드는 특정 리소스의 표시를 요청합니다. GET을 사용하는 요청은 오직 데이터를 받기만 합니다. |
| HEAD | HEAD 메서드는 GET 메서드의 요청과 동일한 응답을 요구하지만, 응답 본문을 포함하지 않습니다. |
| POST | POST 메서드는 특정 리소스에 엔티티를 제출할 때 쓰입니다. 이는 종종 서버의 상태의 변화나 부작용을 일으킵니다. |
| PUT | PUT 메서드는 목적 리소스 모든 현재 표시를 요청 payload로 바꿉니다. |
| DELETE | DELETE 메서드는 특정 리소스를 삭제합니다. |
| CONNECT | CONNECT 메서드는 목적 리소스로 식별되는 서버로의 터널을 맺습니다. |
| OPTIONS | OPTIONS 메서드는 목적 리소스의 통신을 설정하는 데 쓰입니다. |
| TRACE | TRACE 메서드는 목적 리소스의 경로를 따라 메시지 loop-back 테스트를 합니다. |
| PATCH | PATCH 메서드는 리소스의 부분만을 수정하는 데 쓰입니다. |
MDN : HTTP 요청 메서드 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
2. HTTP 구조( header와 body )
2-1. header
: HTTP 본문(body)및 요청/응답에 대한 정보를 포함한다.
본문에 대한 정보는 본문 컨텐츠 길이 등 본문 컨텐츠와 관련이 있다.
[참고] header 의 유형 표
일반(General Header)
요청/응답(Request / Response Header)
엔터티(Entity Header)| 종류 | 설명 | 예시 |
|---|---|---|
| 일반 | 본문 컨텐츠와 관계x, [요청/응답 ,날짜, 시간] 등 일반정보 | Date :Wed,15,Oct 2020 21:33:15 GMT |
| 요청 | 요청한 URL, 메소드(Get,Post,Head),요청 생성에 사용 된 브라우저 및 기타정보 | User-agent:"Mozilla /5.0/2015/01/01 chrome/41.0" |
| 응답 | 사용자가 특정 페이지, 리소스에 대한 요청을 보낸 후 서버에서 브라우저에 의해 수신되며 컨텐츠에 사용 된 인코딩, 서버 시스템에서 응답을 생성하는 데 사용되는 서버 소프트웨어 및 기타정보를 포함 | Server:nginx |
| 엔터티 | 실제 메시지 또는 전송중인 HTTP 본문에 대한 정보가 포함된다. 컨텐츠 길이,컨텐츠 언어, 인코딩, 만료 날짜 등 중요한 정보 | Contents-Length:4956 |
2-2. body
: 실제 데이터 컨텐츠/메시지 본문.
컨텐츠에는 요청한 리소스에 따라 HTML 코드, 이미지, CSS 스타일 시트, js파일이 포함될 수 있다
Ajax (Asynchronous JavaScript and XMLHTTPRequest)
: 자바스크립트를 사용한 비동기 통신, 클라이언트와 서버간 데이터를 주고받는 기술
Ajax를 통해 클라이언트는 필요한 데이터만 서버를 통해 비동기적으로 받고,페이지의 일부만 동적으로 업데이트 할 수 있다.
컨텐츠를 하나 누를때마다 새로운 페이지를 내려받는다 라고 생각하면, 예전에는 문제가 없겠지만 현대의 웹 애플리케이션에서는 그닥 유쾌한 경험은 아닐것이다, Ajax는 필요한 부분만 업데이트를 할 수 있게 해준다.
대표적으로,
- XMLHttpRequest
- jquery ajax
- fetch
가 있다.여러가지의 문제로, 보다 쓰기 쉬운 fetch API를 이용하는 추세
그러나, 여전히 XMLHttpRequest도 많이 쓰이는 기술이다, 각각의 차이점을 확인 후 사용하는 것이 좋다
fetch
:네크워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어있다.
서버 자원을 가져오기위해 사용한다.
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});