Interaction with Server

Browser

When a user requests a web page from a particular website, the web browser retrieves the necessary content from a web server and then displays the page on the user’s device.

Not the same thing as a search engine. For a user, a search engine is just a website that provides links to other websites. However, to connect to a website’s server and display its web pages, a user must have a web browser installed.

Feature

Allow users to set bookmarks and browse in a private mode. They also can be customized with extensions, and some of them provide a sync service.

  • Allow the user to open multiple pages at the same time, either in different browser windows or in different tabs of the same window.
  • Back and forward buttons to go back to the previous page visited or forward to the next one.
  • A refresh or reload and a stop button to reload and cancel loading the current page. (In most browsers, the stop button is merged with the reload button.)
  • A home button to return to the user’s home page.
  • An address bar to input the URL of a page and display it.
  • A search bar to input terms into a search engine. (In some browsers, the search bar is merged with the address bar.)

client

  • 서버에 데이터 요청, 받아서 보여줌

server

to share data as well as to share resources and distribute work

A single server can serve multiple clients, and a single client can use multiple servers

client 요청을 처리하고, data 관리

resource 요청과 응답에 대한 처리

HTTP(Hypertext Transfer Protocol)

an application-layer protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes.

Properties

  • stateless: server does not keep any data (state) between two requests
  • connectionless: no more connection after connection

Request Method

  • Get: requests a representation of the specified resource
  • Post: sends data to the server (서버 상태의 변화를 일으킴/ ex. form 제출/ 넣어 줄 내용이 있기 때문에 payload 존재하고 json 형태로 들어감/ Content-Type : application/json)
  • Put: creates a new resource or replaces a representation of the target resource with the request payload (연속적인 요청시에도 같은 효과를 가져오기에, 서버에 있는 resource update)
  • Delete: deletes the specified resource

Virtually all URLs on the Web start with either http: or https: which means the browser will retrieve them with the Hypertext Transfer Protocol (HTTP). In the case of https:, the communication between the browser and the web server is encrypted for the purposes of security and privacy

Step 1 도메인 이름 탐색

  • Domain Name Server(DNS)에 접속한 후, www.google.com가 실제로 어떤 ip를 가지고 있는지 요청
  • DNS가 요청에 대항 응답으로 ip를 return
  • 못찾으면, unknown을 NAME_NOT_RESOLVED return
  • 각자 컴퓨터는 고유의 ip를 가지고 있음(local or global)
http://www.google.com/intl/ko_kr/about/
protocol domain name routing(여러 갈림길, 디테일 주소)

Step 2 웹 서버(http) 요청

  1. 웹 서버의 routing(주소 탐색 규칙)에 따라 요청 처리
  • 단순 정적 파일만 제공하는 경우, URL 조회
webserverroute/intl/ko_kr/about (주소)
  • 서버가 비즈니스 로직 실행 하도록 요청가능
webserverroute/search?q=codestates (명령어)
webserverroute/preferences

2. 서버가 요청에 대한 응답을 자원(resource: HTML/JS file)의 형태로 전달

3. 서버가 보내주는 자원을 브라우저에서 처리

서버와 클라이언트가 주로 html등의 문서를 주고 받는데 사용하는 protocol

  • 주로 TCP/UDP 80번 port 사용
http://www.someURL.com:8080/(보통 :8080/ 생략)
  • RFC 2616: spec 체크
  • 요청과 응답은 Start/Status line, Header, Body로 이루어져 있음
HTTP Request
Header request line http verb GET, POST, ...
URI /home.html
http version # HTTP/1.1

Optional Request Headers name: value, name: value
(describe specific properties about a request)
Blank separates header and bodyBody(optional) any other info. about the request we want to send along to the server
HTTP Response
Header status line http verb GET, POST, ...
status code 200, 404, ...
reason phrase in English

Optional Response Headers name: value, name: value
(describe specific properties about a request)
Blank separates header and bodyBody(optional) contains data that the client requested

URI(Uniform Resource Identifier)

  • http 요청
  • 주소창을 통해 하는 요청은 전부 GET Request
  • 예전에는 파일을찾기 위해 URL(Uniform Resource Locator)을 사용했지만, 현재는 비즈니스 로직도 처리하기 때문에 URI로 사용

http response status code

  • 404: not found(요청 받은 resource 못찾았을 때)
  • 400: bad request
  • 304: 요청에 대한응답이 수정되지 않음(cache)
  • 403: forbidden(컨텐츠 접근 권한)
  • 500: internal server error(서버가 처리할 수 없는 요청)
  • 200: 정상적인 응답

API(application programming interface (API))

  • It can also provide extension mechanisms so that users can extend existing functionality in various ways and to varying degrees.
  • 서버 자원을 잘 쓸 수 있는 메뉴판
  • client는 서버에 뭐가 있는지 모르고, 어떤 식으로 보내야되는 지 모름
  • backend server가 api를 잘 제공해야 client가 주문 가능

open api

  • 정부나 회사가 공공의 이익을 위해 database에 접근할 수 있도록 api를 제공
  • 날씨, 지도 등등..

AJAX (“Asynchronous JavaScript and XML”)

  • Update a web page without reloading the page
  • Send data to a web server — in the background
  • 도입 전에는 정적으로 렌더링이 처리가 되었지만 ajax 도입 후 부분적으로 동적 렌더링이 가능해짐
  • XML: data format in JSON
  1. XMLHttpRequest(XHR) : 비동기 적으로 서버에서 가져오고 error 처리가 편함
  2. XMLHttpRequest using JQuery
  3. Fetch API: 대중적

JSON(JavaScript Object Notation)

  • 클라이언트가 사용하는 언어에 관계 없이 통일된 데이터를 주고 받을 수 있으며 일정한 패턴을 지닌 문자열 생성해 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장, 표시할 수 있음
JSON         JSON.stringify() | JSON.parse()
Fetch API response.json()

reference: wikipedia, MDN

Consistency achieves everything https://github.com/paigekim29