삼품 정보같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨것
리소스를 저장하는 공간은 데이터베이스 (+3티어 아키텍쳐)
클라이언트와 서버 간 통신은 요청과 응답으로 구성되며, 요청이 있어야 응답이 존재
통신 규약,즉 통신하기 위한 약속 (가게에서 주문 규칙과 같은 역할)
웹 애플리케이션 아키텍쳐에서는 HTTP라는 프로토콜을 이용해 통신함
API : applicatioin programming interface (가게에서 메뉴판과 같은 역할)
서버가 어떻게 구성되어 있는지 서버가 클라이언트에게 리소스를 제공하는 것
보통 웹 애플리케이션의 데이터를 요청할 때에 HTTP 프로토콜을 사용하며,
주소(URL, URI)를 통해 접근 - 파라미터 사용
HTTP요청 - 메서드
GET
: 조회
POST
: 추가
PUT
: 갱신
DELETE
: 삭제
URL
uniform resource locator
서버가 제공되는 환경-네트워크상-에 존재한 파일의 위치
URI
uniform resource identifier
url + query, bookmark
IP
internet proctocol address
:
네트워크에 연결된 특정 PC의 주소를 나타내는 체계
localhost
, 127.0.0.1
:0.0.0.0
, 255.255.255.255
: 로컬 네트워크에 접속된 모든 장치와 소통하는 주소PORT
ip 주소가 가리키는 pc에 접속할 수 있는 통로,
사용 중인 포트는 중복해서 사용할 수 없다
22
: SSH
80
: HTTP
443
: HTTPS
ip 주소가 지번 또는 도로명 주소라면, 도메인은 해당 주소에 위치한 상호임
= 웹 브라우저를 통해 특정 사이트에 진입 시 ip 주소를 대신하여 사용하는 주소
DNS domain name system, 호스트의 도메인 이름을 ip 주소로 변환하거나
반대의 경우를 수행할 수 있도록 함
form 태그로 정보를 서버에 전송하면 페이지가 한번 전환이 되어야 하는데,
페이지 전환으로 인해 필요하지 않은 부분까지 전부 로딩을 해야함
그래서 원하는 부분만 로딩을 하기 위해 서버와 자유롭게 통신할 수 있는
XMLHttpRequest
와
페이지 깜빡임 없이 seamless하게 작동하는 Javascript와 DOM을 이용하는Ajax
가 개발됨 = > 현재는 더 쉬운fetch API
가 많이 사용됨
function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();
$.ajax({
url: 'http://example.com',
method: 'GET',
dataType: 'json'
})
.done(function(json) {
console.log(json)
})
.fail(function(xhr, status, errorThrown) {
})
.always(function(xhr, status) {
console.log('요청완료')
});
fetch('http://example.com')
.then(res => res.json())
.then(data => {
console.log(data);
})
.catch(err=>{
console.error(err)
});
http
=hypertext transfer protocol
html과 같은 문서를 전송하기 위한 프로토콜
웹 브라우저와 웹 서버의 소통을 위해 디자인 됨
클라이언트가 http messages 양식에 맞춰 요청을 보내면
서버도 http messages 양식에 맞춰 응답
http는 특정 상태를 유지하지 않는 특정이 있음 - stateless(무상태성)
request와 responses 유형이 있으며 파일, api, 기타 인터페이스가 자동으로 완성시킴
페이지가 렌더링 되는 위치에 따라서 나뉨
브라우저가 리소스 로드를 허용해야하는 원본이 아닌 다른 원본을 서버가 나타낼 수 있도록 하는 HTTP 헤더 기반 메커니즘 =>
api를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올수 있으며
다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야함
여기에서 출처는 protocol과 host, 그리고 port까지 모두 합친 것을 의미
= 서버의 위치를 찾아가기 위해 필요한 가장 기본적인 것들