Browser, Server, API, HTTP, AJAX

박상록(Sangrok Park)·2020년 11월 11일
0

TIL(긴 글)

목록 보기
1/12

Browser

브라우저: 웹 브라우저 또는 브라우저는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램. 브라우저는 가장 익숙한 타입의 사용자 에이전트(User Agent)(출처: MDN)

사용자 에이전트란(User Agent)?

사용자 에이전트는 사용자를 대표하는 컴퓨터 프로그램. 웹 환경에서는 브라우저가 사용자 에이전트를 의미.

이밖에, 다운로드 매니저, 여타 웹에 접속하는 app 등이 사용자 에이전트라 볼 수 있다. Server에 요청할 때, 브라우저는 UA String(User Agent String)이라 불리는, 스스로를 나타낼 수 있는 User-Agent HTTP Header를 포함하여 요청한다. 이를 통하여 브라우저의 종류, 버전 넘버, 호스트 운영체제(Host OS System)를 identify(신원을 확인)할 수 있다.

So?

우리는 브라우저를 이용하여서 세상 반대편에 있는 지식, 사진, 비디오, 정보들을 볼 수 있다. 브라우저는 우리가 선택한 정보를 서버에 요청하고, 이 정보를 받아서 브라우저 엔진에서 그것을 해석하여 우리에게 텍스트, 이미지, 동영상같은 것들로 보여준다.

그럼 이 때 브라우저가 서버에 요청할 때, 서버가 다시 브라우저에게 정보를 줄 때 어떤 일이 일어날까?

HTTP

HyperText Transfer Protocol(HTTP)

Protocol: 협약, 규약
HyperText: hyper(초월) + text(문서), 독자가 한 문서에서 다른 문서로 하이퍼링크를 통해 즉시 접근할 수 있는 문서(기존의 문서의 한계를 초월한 형태의 문서)

  • 기존의 문서(text)형식은, 저자가 써 놓은 순서대로 읽어야한다.
  • 하지만, 이 Hypertext는 독자(user)가 원하는 순서대로, 하이퍼링크로 연결된 문서들을 원하는 링크를 따라가며 원하는 순서대로 읽을 수 있다.
  • 기존의 문서에서 불가능한 형태였기에 컴퓨터가 발달함에 따라 새로생긴 신조어였다.

HTTP는 이런 HyperText를 전송할 때 필요한 규약

클라이언트는 이 HTTP규약에 맞추어, 요청을 서버에 보내고, 서버는 HTTP에 맞추어 응답을 클라이언트에 보내주는 형식이라고 이해하고 있다.

Server

"클라이언트(다른 컴퓨터 or 소프트웨어)를 위해 기능을 수행하는 컴퓨터 혹은 소프트웨어"
서버는 data제공, 연산 등을 클라이언트를 위해 수행한다. 하나의 서버가 여러 클라이언트에게 "Sever"의 역할 즉"service"를 제공하고, 하나의 클라이언트는 여러 곳의 서버를 이용할 수 있다. 보통 서버는, 데이터베이스 서버, 파일 서버, 웹 서버, 메일 서버, 게임 서버, 어플리케이션 서버 등이 있다.(출처: 위키백과)

출처: 쉽게 배우는 운영체제(조성호)

API

Application Program Interface

  • 내가 이해한 바로는, 내가 만들고 있는 어플리케이션이 다른 곳의 정보를 받아올 수 있게끔 하는 매개체(interface).

  • 그 정보를 받아올수 있는 방법은 고유의 API URL을 받아서 그것을 통해 받아오는 것.

  • 받아온 정보로 뭘하는지는 어플리케이션 제작자 마음. ex)날씨의 "지역명"을 예쁘게 표시해서 보여준던가, "온도"부분을 애니메이션을 준다던가 등등.

To the browser, also known as the client, Facebook’s server is an API. This means that every time you visit a page on the Web, you interact with some remote server’s API.

An API isn’t the same as the remote server — rather it is the part of the server that receives requests and sends responses.(출처:https://www.techopedia.com/definition/15763/host-operating-system)

한 마디로, 우리가 서버에 접근하는 방식은 "request and reponse"인데 우리가 웹 사이트에 접속할 때마다 우리는 API를 사용한다. 즉, 서버에 직접 접근 할 수 없고, API를 통해 주문(request)을 넣고, 결과(reponse)를 전달 받는다.

하드웨어 운영체제에의 커널안 시스템 호출의 역할이라고 보면 될 것 같다.

다양한 3rd party API를 웹, 앱 제작에 사용할 수 있고, 무료, 유료 API가 있다.

위의 링크에 따르면, 객체지향 프로그래밍으로 치면, API는 다른 객체, 즉 캡슐화 되있고, 어떤 객체에서 다른 객체의 메소드를 쓰고, 프로퍼티에 접근하려면 다른 객체를 거쳐야만 쓸 수 있듯이, 어떤 서버의 정보에 접근해서 그 정보를 쓰려면 그 서버에서 제공한 고유의 API URL을 통해서만 접근 및 받아오기가 가능하다.

AJAX

Asychronous Javascript and XML

AJAX 이전의 웹

  • 클라이언트에서 정보 및 요청 전달
  • 서버에서는 그것을 받아 페이지를 갱신하여 새 페이지 전달 -
  • 클라이언트는 전달받은 새 페이지로 아예 페이지를 새로 보여줌

지금과같이 많은양의 데이터가 전송되는 시대에는 비효율적인 방법인 것 같다.

Dynamic Web의 탄생

  • 필요한 부분만 render할 수 있음(페이지 새로고침 없음)
    => XMLHttpRequest(XHR)의 등장

  • 서버와 자유롭게 통신, 페이지전체를 새롭게 렌더할 필요없이 작동
    => Javascript와 Dom 이용

    위 두가지 내용을 합쳐서 AJAX라 한다.

웹페이지가 아니라, 웹 어플리케이션의 등장

profile
한 줌의 소금과 같이 되고 싶은 개발자

1개의 댓글

comment-user-thumbnail
2024년 4월 11일

정리를 참 잘해두시는 것 같습니다. 본받겠습니다!

답글 달기