클라이언트-서버 아키텍처 : 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처
서버(Sever)
: 리소스를 제공(serve)하는 곳.클라이언트(client)
: 리소스를 사용하는 앱.요청
해야 한다.응답
한다.데이터베이스
: 리소스를 저장하는 공간을 별도로 마련해 두는 공간프론트엔드 영역.
백엔드 영역.
클라이언트
는 보통 플랫폼에 따라 구분.서버
는 무엇을 하느냐에 따라 종류가 달라집니다.프로토콜
: 통신 규약. (즉, 약속을 뜻한다.)HTTP
웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용해서 서로 대화를 나눕니다.
HTTP 메시지
: HTTP를 이용해 주고받는 메시지
예를 들어 커피를 주문할 때,
이러한 방법 하나하나 전부 프로토콜이다.
같은 일을 하기 위해 "다양한 방법"이 존재할 수 있다.
API (Application Programming Interface)
API
: 서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스(interface)를 제공해 줘야 한다.HTTP API
디자인을 잘 하는 방법HTTP API 디자인에는 Best Practice가 존재
메서드
라는 개념이 등장기억해야 할 다섯 가지 메서드
URL
은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타냅니다.scheme
, hosts
, url-path
로 구분scheme
, hosts
, url-path
에 더해 query
, fragment
를 포함부분 | 명칭 | 설명 |
---|---|---|
file:// , http:// , https:// | scheme | 통신 프로토콜 |
127.0.0.1 , www.google.com | hosts | 웹 페이지, 이미지, 동영상 등의 파일이 위치한 웹 서버, 도메인 또는 IP |
:80 , :443 , :3000 | port | 웹 서버에 접속하기 위한 통로 |
/search , /Users/username/Desktop | url-path | 웹 서버의 루트 디렉토리로부터 웹 페이지, 이미지, 동영상 등의 파일이 위치까지의 경로 |
q=JavaScript | query | 웹 서버에 전달하는 추가 질문 |
IP
와 포트IP address
(Internet Protocol address, IP 주소)DNS
Domain name
DNS
HTTP
HTTP Messages
요청(Requests)과 응답(Responses)은 다음과 같은 유사한 구조를 가진다.
start line
: start line에는 요청이나 응답의 상태를 나타냅니다. 항상 첫 번째 줄에 위치합니다. 응답에서는 status line이라고 부른다.HTTP headers
: 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합입니다.empty line
: 헤더와 본문을 구분하는 빈 줄이 있다.body
: 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함합니다. 요청과 응답의 유형에 따라 선택적으로 사용.이 중 start line
과 HTTP headers
를 묶어 요청이나 응답의 헤드(head)라고 하고, payload
는 body라고 이야기.
Stateless
Stateless는 말 그대로 상태를 가지지 않는다는 뜻.
HTTP로 클라이언트와 서버가 통신을 주고받는 과정에서, HTTP가 클라이언트나 서버의 상태를 확인하지 않는다.
지금은 Stateless(무상태성)가 HTTP의 큰 특징이라고 기억하는 것으로 충분하다.
HTTP Requests
Start line
Start line에는 세 가지 요소가 있다.
수행할 작업(GET, PUT, POST 등)이나 방식(HEAD or OPTIONS)을 설명하는 HTTP method를 나타낸다.
요청 대상(일반적으로 URL이나 URI) 또는 프로토콜, 포트, 도메인의 절대 경로는 요청 컨텍스트에 작성됩니다. 이 요청 형식은 HTTP method 마다 다르다.
- origin 형식 :
'?'와 쿼리 문자열이 붙는 절대 경로
입니다. GET, POST, HEAD, OPTIONS 등의 method와 함께 사용합니다.
POST / HTTP 1.1
GET /background.png HTTP/1.0
HEAD /test.html?query=alibaba HTTP/1.1
OPTIONS /anypage.html HTTP/1.0
- absolute 형식 : 완전한
URL 형식
으로, 프록시에 연결하는 경우 대부분 GET method와 함께 사용한다.
GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
- authority 형식 : 도메인 이름과
포트 번호
로 이루어진 URL의 일부분입니다. HTTP 터널을 구축하는 경우, CONNECT와 함께 사용할 수 있다.
CONNECT developer.mozilla.org:80 HTTP/1.1
- asterisk 형식 : OPTIONS와 함께 별표(*) 하나로 서버 전체를 표현.
OPTIONS * HTTP/1.1
Headers
요청의 Headers는 기본 구조를 따릅니다.
헤더 이름(대소문자 구분이 없는 문자열), 콜론( : ), 값을 입력.
General headers : 메시지 전체에 적용되는 헤더로, body를 통해 전송되는 데이터와는 관련이 없는 헤더.
Request headers : fetch를 통해 가져올 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더를 의미.
Representation headers : 이전에는 Entity headers로 불렀으며, body에 담긴 리소스의 정보(콘텐츠 길이, MIME 타입 등)를 포함하는 헤더.
HTTP Responses
Status line
HTTP Responses는 서버가 클라이언트에게 보내는 메시지.
응답의 첫 줄을 Status line이라고 부른다.
Headers
General headers : 메시지 전체에 적용되는 헤더로, body를 통해 전송되는 데이터와는 관련이 없는 헤더.
Response headers : 위치 또는 서버 자체에 대한 정보(이름, 버전 등)와 같이 응답에 대한 부가적인 정보를 갖는 헤더로, Vary, Accept-Ranges와 같이 상태 줄에 넣기에는 공간이 부족했던 추가 정보를 제공.
Representation headers : 이전에는 Entity headers로 불렀으며, body에 담긴 리소스의 정보(콘텐츠 길이, MIME 타입 등)를 포함하는 헤더.
body
AJAX (Asynchronous JavaScript and XML)
JavaScript
, DOM
, Fetch
, XMLHttpRequest
, HTML
등의 다양한 기술을 사용하는 웹 개발 기법.AJAX
의 두 가지 핵심 기술AJAX를 구성하는 핵심 기술은 JavaScript와 DOM, 그리고 Fetch입니다.
전통적인 웹 애플리케이션에서는 <form>
태그를 이용해 서버에 데이터를 전송해야 했습니다. 또한 서버는 요청에 대한 응답으로 새로운 웹 페이지를 제공해 주어야 했습니다.
그러나 Fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있습니다.
Fetch는 사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신할 수 있도록 합니다.
즉, 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용.
또한 JavaScript에서 DOM을 사용해 조작할 수 있기 때문에, Fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있다.
XHR과 Fetch
Fetch 예제
// Fetch를 사용
fetch('http://52.78.213.9:3000/messages')
.then (function(response) {
return response.json();
})
.then(function (json) {
...
});
XMLHttpRequest 예제
// XMLHttpRequest를 사용
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://52.78.213.9:3000/messages');
xhr.onreadystatechange = function(){
if(xhr.readyState !== 4) return;
// readyState 4: 완료
if(xhr.status === 200) {
// status 200: 성공
console.log(xhr.responseText); // 서버로부터 온 응답
} else {
console.log('에러: ' + xhr.status); // 요청 도중 에러 발생
}
}
xhr.send(); // 요청 전송
AJAX
의 두 가지 핵심 기술<form>
태그를 이용해 서버에 데이터를 전송해야 했다. XHR과 Fetch
Fetch 예제
// Fetch를 사용
fetch('http://52.78.213.9:3000/messages')
.then (function(response) {
return response.json();
})
.then(function (json) {
...
});
XMLHttpRequest 예제
// XMLHttpRequest를 사용
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://52.78.213.9:3000/messages');
xhr.onreadystatechange = function(){
if(xhr.readyState !== 4) return;
// readyState 4: 완료
if(xhr.status === 200) {
// status 200: 성공
console.log(xhr.responseText); // 서버로부터 온 응답
} else {
console.log('에러: ' + xhr.status); // 요청 도중 에러 발생
}
}
xhr.send(); // 요청 전송
AJAX의 장점
서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있다.
표준화된 방법
유저 중심 애플리케이션 개발
더 작은 대역폭
AJAX의 단점
Search Engine Optimization(SEO)에 불리.
뒤로가기 버튼 문제
SSR
(Server Side Rendering)Server Side Rendering
이라고 한다.CSR
(Client Side Rendering)SSR, CSR차이점
SSR 사용
CSR 사용