브라우저는 어떻게 동작 할까 - Basic Web Architecture

드디어 클라이언트와 서버 간의 요청과 응답을 주고받는 과정을 공부하고 있다. 매일 사용하는 브라우저와 그 안의 웹페이지 뒷단에서 통신이 이루어지는 과정을 배우는 건 흥미진진하고 놀라운 일이다. 이렇게나 복잡한 과정을 통해 이루어지는 일들을 나는 정말 무심하게 당연하게 사용하고 있었구나 라고. 하지만 알아둬야 할 내용이 상당히 많다. 

---

Browser

• HTML로 작성된 웹페이지를 볼 수 있도록 해주는 응용 소프트웨어다. (크롬, 사파리, IE 등)
• 컴퓨터는 2진수만 이해할 수 있지만, 우리가 작성한 코드를 컴퓨터가 이해할 수 있는 것은 브라우저 덕분.
• 브라우저는 사용자가 선택한 자원을 서버에게 요청하고, 받은 내용을 다시 브라우저에 나타낸다. 다시 말하면,
  사용자가 웹브라우저를 통해 웹서버에게 Request 한다  => 웹서버는 브라우저의 요청을 처리하고 Response 한다. 
• 레퍼런스 : 브라우저는 어떻게 동작하는가?

 

Client 와 Server

• Client : 서비스를 사용하는 사용자 혹은 사용자의 단말기.
• Server : 자원을 Serve 하는 주체. 서버는 클라이언트의 요청을 DB에 리소스 요청과 응답에 대한 처리를 하는 컴퓨터.
  • TCP - Transmission Control Protocol (전송 제어 규약)
  • IP - Internet Protocol (인터넷 규약)
  • DNS - Domain Name System Server (웹사이트를 위한 일종의 주소록)

 

HTTP (Hypertext Transfer Protocol: 하이퍼텍스트 전송 규약)

클라이언트와 서버가 통신하기 위한 언어를 정의하는 애플리케이션 규약이다. (Protocol)

• 항상  요청과 응답으로 이루어진다.
• 속성
  • stateless(무상태성) : http의 각 요청은 모두 독립적이다. 이전 요청에 대한 컨텍스트를 가지고 있지 않는다.(이전 요청을 기억 못 함)
  • connectionless(비연속성) : 한 번의 요청에는 한 번의 응답만 가능하다. 응답 직후 연결이 종료되어 추가로 응답할 수 없다.
  • 클라이언트의 요청에 반드시 응답한다. 없거나 잘못된 요청에도 없다, 잘못된 요청이다를 응답한다.
• URL : 인터넷에 있는 자원을 주소로 담아 나타내는 방식. HTTP 요청은 URI를 통해 할 수 있다.
  • scheme: http:// 또는 보안이 적용된 https:// 로 시작하고 명사로 표기한다.
  • 도메인 이름
  • port : 웹서버 상의 리소스에 접근하는데 사용되는  gate.
  • path: 웹 서버상의 리소스 경로
  • query: 웹 서버에 제공되는 추가적인 파라미터
  • 프래그먼트: 특정 앵커(브라우저에게 특정 북마크된 지점에 위치한 콘텐츠를 보여주기 위한 방법)을 가리킴
• HTTP 메시지의 구성: Header와 Body로 구성됨.
  • Header : 요청을 보낸 곳, 콘텐츠 타입, 이용한 클라이언트 등의 정보를 담는다.
  • body: 서버에 보낼 데이터를 담는다.
• 메서드
  
  • GET - 서버로부터 자원을 요청(조회). 데이터를 서버로 보내야 한다면 쿼리스트링을 사용한다.
  • POST - 서버에 자원을 생성(body에 추가된 정보를 담아서 전달한다)
  • PUT - 서버의 자원을 수정(body에 변경된 정보를 담아서 전달한다. 정보를 전부 수정하는 경우 PUT을 쓴다)
  • PATCH - PUT과 유사하나 보통 정보의 일부를 변경할 때 사용한다.(body에 변경된 정보를 담아서 전달한다)
  • DELETE -  서버의 자원을 제거(body에 데이터를 담지 않는다)

 

API(Application Programming Interface)

• 클라이언트가 서버 자원을 잘 가져다 쓸 수 있도록 만든 인터페이스. 일종의 메뉴판 역할.
• 직접 원하는 데이터를 담은 서버와 DB를 구성하지 않고, API를 통해 원하는 결괏값을 클라이언트에 구현할 수 있다.
• 레퍼런스 : 그런 REST API로 괜찮은가

 

Ajax(Asynchronous JavaScript and XML)

화면에 업데이트가 필요할 때 페이지 전체를 다시 렌더링 하던 옛날 방식과 달리, 현재는 필요한 부분만 렌더링 하고 있다.

• Dynamic web page : 서버에서 응답을 받을 때마다 페이지를 리로딩하지 않고 브라우저 내 비동기적 요청/응답 처리를 통해서 필요한 부분만 업데이트하는 웹 페이지. 보다 애플리케이션 다운 web app의 등장이 가능해짐.
• Ajax :  자바스크립트를 이용해 비동기적으로 서버에 요청을 할 수 있는 기술을 말한다.
  • 페이지 깜빡임 없이 seamless 하게 동작한다. (JS DOM 이용)
  • 이전에는 서버와의 통신을 위해 XMLHttpRequest를 사용했지만, 보다 쓰기 쉬운 표준 API를 만들자는 목적으로 fetch API라는 것이 등장함.

 

fetch API란?

Ajax를 구현하는 여러 가지 방식 중 하나. 서버의 리소스를 가져오기 위한 인터페이스를 제공해주는 새로운 API. . XMLHttpRequest와 비슷하지만 상대적으로 코드를 읽기 쉽고 유연한 조작이 가능하다.

• 일반적인 오브젝트로 Request와 Response가 포함되어 있다.
• fetch()는 Promise 객체를 반환한다.
• fetch(서버주소).then(callback).then(callback)...catch(error callback)
• then()의 콜백들이 순차적으로 진행되고 과정에서 에러가 발생하면 catch로 바로 넘어가 에러를 출력한다.