Interaction with Server


  • 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.)


  • 유저와 상호작용
  • 서버에 데이터 요청, 받아서 보여줌


HTTP(Hypertext Transfer Protocol)

  • stateless: server does not keep any data (state) between two requests
  • connectionless: no more connection after connection
  • 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
  • Domain Name Server(DNS)에 접속한 후,가 실제로 어떤 ip를 가지고 있는지 요청
  • DNS가 요청에 대항 응답으로 ip를 return
  • 못찾으면, unknown을 NAME_NOT_RESOLVED return
  • 각자 컴퓨터는 고유의 ip를 가지고 있음(local or global)
protocol domain name routing(여러 갈림길, 디테일 주소)
  1. 웹 서버의 routing(주소 탐색 규칙)에 따라 요청 처리
  • 단순 정적 파일만 제공하는 경우, URL 조회
webserverroute/intl/ko_kr/about (주소)
  • 서버가 비즈니스 로직 실행 하도록 요청가능
webserverroute/search?q=codestates (명령어)
  • 주로 TCP/UDP 80번 port 사용보통 :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
  • http 요청
  • 주소창을 통해 하는 요청은 전부 GET Request
  • 예전에는 파일을찾기 위해 URL(Uniform Resource Locator)을 사용했지만, 현재는 비즈니스 로직도 처리하기 때문에 URI로 사용
  • 404: not found(요청 받은 resource 못찾았을 때)
  • 400: bad request
  • 304: 요청에 대한응답이 수정되지 않음(cache)
  • 403: forbidden(컨텐츠 접근 권한)
  • 500: internal server error(서버가 처리할 수 없는 요청)
  • 200: 정상적인 응답

API(application programming interface (API))

  • a computing interface that defines interactions between multiple software intermediaries and the kinds of calls or requests that can be made, how to make them, the data formats that should be used, the conventions to follow, etc.
  • 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가 주문 가능
  • 정부나 회사가 공공의 이익을 위해 database에 접근할 수 있도록 api를 제공
  • 날씨, 지도 등등..

AJAX (“Asynchronous JavaScript and XML”)

  • Read data from a web server — after the page has loaded
  • 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()



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store