Interaction with server

LANA·2020년 6월 7일
0

WEB

목록 보기
1/1

 웹아키텍처의 전반적인 구성도

브라우저

컴퓨터는 사실상 0,1 (2진수)만 알아듣지만 (binary data),
브라우저를 통해 컴퓨터가 알아들을 수 있도록 코드 작성 가능해짐
html, js, css로 작성한 코드를 컴퓨터가 알 수 있게 한다.
브라우저 작동 원리 : https://d2.naver.com/helloworld/59361

Server

요약: 자원을 server하는 주체
서버는 스타벅스다!( 무언가를 제공하는 주체)
ex)
1. 손님(client)曰: 커피주세요.
2. starbucks(server): 커피창고(DB)에서 커피꺼내와서 커피제조
3. starbucks -> client 커피 제공

API

서버 자원을 잘 가져다 쓸 수 있게 만들어 놓은 Interface
api 정의: server의 resource를 client에서 사용하기 쉽게 마련해 둔 interface
한마디로 메뉴판!

서버도 메뉴판이 필요하다.


HTTP

HyperText Transfer Protocol
Protocol의 의미: 규약, 규칙
우리는 HyferText Transfer라는 규칙에 따라서 통신을 한다는 것을 의미.
클라이언트와 서버가 통신할 때 사용.
TCP/IP : seven layer/ five layer로 구성.
client가 server에 무언가를 요청할 때, server는 컴퓨터가 알아들을 수 있는 말로 해석해서 컴퓨터에 전달.
컴퓨터가 응답하면 그걸 또 server는 client가 알아들을 수 있는 말로 해석해서 전달.
TCP/IP가 보이는 그림 참고하기.

작동방식: 항상 요청과 응답으로 이루어진다.
client가 요청하면 server가 응답하는 형식.  있으면 있다고, 없으면 없다고 응답을 줌.
클라이언트의 요청에 오류가 있을때도 무시하지 않음. 오류가 있다고 말해줌

구성:
Header: reference (아직업뎃안됨)
Body: reference (아직업뎃안됨)
// 응답(response)도 header와 body를 가진다.

속성:
1)stateless: http의 각 요청은 모두 독립적이다.
http의 매 요청은 독립적이기 때문에 state라는 것이 없다. 문맥형성이 안됨
ex) 오늘:  client- 삼겹살 먹으러 가자! server : 그래!!! // 내일: client: 먹으러가자! server: 뭘?
2)connectionless: 한번의 요청에는 한번의 응답을 한다. 응답 이후에는 연결이 끊기기 때문에, 응답을 두번 보낼 수는 없다.
ex)밥먹으러가자. 알겠어 -- end.  // 밥먹으러 가자. 알겠어.'뭐먹을거야?'(X)

Method
1. get - 서버에 자원을 요청
2. post - 서버에 자원을 생성.
3. put - 서버의 자원을 수정.
4. delete - 서버의 자원을 제거.

AJAX

서버 자원을 가져오기 위해서.
클라이언트가 fetch!를 요청하면 서버는 resource를 주는 식으로 되어있음

dynamic web page의 등장
:단순한 web page가 아닌, 보다 애플리케이션 다운 web 등장

  • 서버와 자유롭게 통신할 수 있고,
  • 페이지 깜빡임 없이 seamless하게 작동하는,

XMLHttpRequest는 코드가 난해하고 쓰기 어려워서
jQuery가 개발되었으나, 이도 난해하다고 여겨져서
fetch API가 개발됨. 보다 쓰기 쉬운 표준 API. json 형태로 전달받은 서버로부터의 응답
fetch와 관련된 resource

Why we use fetch?

서버 자원을 가져오기 위해서.
클라이언트가 fetch!를 요청하면 서버는 resource를 주는 식으로 되어있음
1. XMLHttpRequest : 아직도 쓰이긴 하지만 low하다는 느낌이 듦.
2. jQuery ajax : XMLHttpRequest보다는 나음. chaining방식. 그래도 난해하고 복잡함.
3. fetch
: fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있음.
XMLHttpRequest와 같은 비슷한 API가 존재하지만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능함.
4.  etc...

profile
Let's code like chord !

0개의 댓글