[TIL] 2020. 07. 01. Web_Architecture

달밤·2020년 7월 1일

TIL

목록 보기

57/110

브라우저(Browser)는 자바스크립트의 런타임(Runtime)이다.
기본적으로 컴퓨터는 이진수만 해석 할 수 있다. 그렇다면 자바스크립트 언어로 작성한 코드들을 컴퓨터는 어떻게 이해하는가?
브라우저(Browser)가 HTML, CSS, JavaScript 작성된 코드를 내부 엔진으로 해독하여 컴퓨터에게 전달해주기 때문에 가능하다.

클라이언트(Client)는 인터넷에 연결된 사용자의 디바이스, 또는 웹에 접근할 수 있는 소프트웨어를 뜻한다. 컴퓨터의 경우 그 자체만으로 서버와 연결되지는 않는다. 따라서 사용자의 디바이스와 서버를 연결시켜줄 수 있는 프로그램이 필요한데 이 중 대표적인 예로 브라우저(Browser)가 있다.
클라이언트(Client)는 서버(Server)에 정보를 요청(Request)하고 그에 대한 응답(Response)을 화면에 표시한다.
클라이언트는 서버에 어떤 정보를 요청하는 주체이며, 그 응답을 사용자의 화면에 표시해주는 주체이기도 하다.

API : 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. (광의의 정의)
API는 웹 환경에서만 쓰이는 용어는 아니며, 응용프로그램에서 사용할 수 있도록 미리 만들어놓은 인터페이스를 뜻한다.
커피숍에서 직원에게 커피를 주문하기 위해서는 가게의 메뉴판이 필요할 것이다.
가게의 메뉴판 역할을 하는 것이 API이다.
그렇다면 웹에서는?
클라이언트가 어떻게 서버에게 데이터를 요청할 수 있는가를 생각해보자.
서버와 통신하기 위한 매개체로서, 서버의 자원을 어떻게 사용할 수 있을지 명시해 둔 인터페이스API를 활용해 서버로 하여금 필요한 데이터를 가져올 수 있다.
웹 API: HTTP 요청으로 원격 서버에 요청(RPC: Remote procedure call)할 수 있도록 외부로 노출된 추상화된 인터페이스
클라이언트는 서버가 어떤식으로 요청을 처리하는지에 대해선 구체적으로 알 필요없이, 추상화된 인터페이스(API)를 바탕으로 서버에 요청을 하고, 응답에 대해 적절한 형태로 화면에 표시하게 된다.
한편, 이렇게 클라이언트와 서버가 서로 요청과 응답을 주고받을 수 있는 것은 HTTP라는 통신 규약 덕분이다.

클라이언트와 서버는 프로토콜(Protocol)이라고 불리는 정해진 규약에 따라 메시지를 교환한다.
HTTP는 클라이언트와 서버가 HTML 등의 문서를 주고받는 데 주로 사용하는 프로토콜(Protocol)이다.
HTTP는 요청(Request)과 응답(Response)의 형식을 가지고 있다.
HTTP는 Stateless(특정한 상태를 담고 있지 않다; 이전 요청이나 다음 요청을 기억하고 있지 않다), Connectionless(한 번의 요청에는 한 번의 응답만 한다.) 한 속성을 가지고 있다.
HTTP 메소드
- GET : URL에 해당하는 특정 리소스를 가져오도록 요청
- POST : 데이터를 서버에 추가하도록 요청. 서버 상태의 변화를 일으킴
- PUT : POST와 비슷하나, 기존 데이터를 교체하는 용도로 쓰인다.
- DELETE : 특정 리소스의 삭제를 요청

AJAX는 비동기적이고 동적인 웹애플리케이션 제작을 위한 개발 기법이다.
AJAX를 통해 클라이언트는 1. 필요한 데이터만 서버를 통해 비동기적으로 받고, 2. 페이지의 일부만 동적으로 업데이트 할 수 있다.
1. 비동기적으로 작동하는 XHR(XMLHteepRequest), JQuery, Fetch와 같은 API의 등장으로 가능해졌다.
2. XHR가 등장하기 전에는 데이터를 동기적으로 받아 올 수 밖에 없었기 때문에 데이터를 새로 받아서 업데이트 하기 위해서는 페이지의 전체를 다시 랜더링해야만 했지만(정적), 현재는 JavaScript와 DOM을 이용해 필요한 부분만 업데이트 하는 것(동적)이 가능하다.
AJAX의 등장으로 Dynamic Web Application의 개발이 가능해졌다.

다 늦은 밤, 달밤의 개발일기