TIL

<TIL 20.07.01> Web Architecture

유댕2 2020. 7. 1. 11:31

이번 스프린트의 주제는 API를 활용해 UI를 만드는 내용이다.


- API ( Application Programming Interface )
: 프로그래밍돼있는 애플리케이션과 의사소통 가능한 매개체
- UI ( User Interface )
: 유저와 의사소통 가능한 매개체
- Interface

: 사물 간 or 사물과 인간 간의 의사소통이 가능하도록 만들어진 매개체 (상호작용하는 곳)

 

Browser

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 사용자가 연결된 주소의 서버에 데이터 요청을 하게 되면, 서버로부터 데이터를 다운로드한 것을 가지고 웹브라우저가 그것을 해석해서 사용자가 보는 UI를 완성해 준다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C (World Wide Web Consortium)에서 정한다. 컴퓨터는 2진수만 해석할 수 있지만, 브라우저로써 우리가 작성한 코드(html, js, css)를 컴퓨터에서 볼 수 있게 한다.

 

  • 클라이언트와 서버는 프로토콜(Protocol)이라고 불리는 정해진 규약에 따라 메시지를 교환
  • 클라이언트는 서버가 어떤식으로 요청을 처리하는지에 대해선 구체적으로 알 필요없이, 추상화된 인터페이스(API; Application programing Interface)를 바탕으로 원격 서버에 요청(RPC; Remote Procedure Call)을 하고, 응답에 대해 적절한 형태로 화면에 표시


Server  && DB

서버(Server)는 자원을 제공(serve)하는 주체이다. 클라이언트(브라우저)의 요청을 받아서 처리한 후 결과를 클라이언트에 전송해 준다. 예를 들면 요청받고 응답을 해주는 콜센터이다.

데이터베이스(DB)는 우리 서비스의 모든 리소스를 저장하는 공간이다. 데이터베이스에서 데이터를 꺼내는 언어와 넣는 언어가 다르다.


API

Application Programing Interface의 줄임말로, 사용자가 서버 자원을 잘 가져다 쓸 수 있게 만들어 놓은 인터페이스이다. 예를 들면 메뉴판이다. 클라이언트가 데이터베이스가 어떻게 생겼고 어떤 방식으로 리소스가 저장되어있는지 알지 못하더라고 그를 잘 이용할 수도록 한다.


HTTP

Hyper Text Transfer Protocol의 줄임말로, 클라이언트와 서버가 통신할 때 사용하는 규약이다.

클라이언트가 서버에 요청을 보내거나 그에 대한 응답을 서버가 보낼 때 요청과 응답에 대한 정보를 담고 있는 메시지가 오고 가는데, 그 메시지를 HTTP 메시지라고 한다.

HTTP 메시지에는 헤더(Header)와 바디(Body)로 이루어져 있다.헤더는 항상 어디서 보내는 요청인지, 어떤 클라이언트를 이용해 보냈는지 등의 정보를 담고 있다. 바디는 서버에 데이터를 보내기 위한 공간으로 활용된다.

HTTP의 특징 두가지로는 크게 무상태성(Stateless)과 무연결성(Connectionless)을 말할 수 있다. 무상태성은 http의 각 요청은 독립적이며, 특정 클라이언트의 요청 내용을 기억하지 않는 것을 뜻한다. 무연결성은 한 번의 요청에는 한 번의 응답을 하기 때문에 응답 이후에는 연결이 끊기기 때문에 더 이상 응답을 할 수 없다는 것을 뜻한다.

     대표적인 4가지 method

     메서드는 요청의 종류를 나타낸다.

  • get - 서버에 자원을 요청
  • post - 서버에 자원을 생성
  • put - 서버의 자원을 수정
  • delte - 서버의 자원을 제거


AJAX

Asynchronous JavaScript And XML의 줄임말로 비동기식 자바스크립트와 XML을 말한다. JS의 XMLHTTPRequest객체를 이용해 XML 기반으로 비동기식으로 통신하는 기법이다. (최근에는 XML대신 JSON도 많이 이용한다고 함) 즉, AJAX는 JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이라고 할 수 있다.
강력한 특징은 페이지를 새로고침 하지 않고서도 서버에 요청되어 데이터를 로드하는 것이다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지 중 한 부분이 변경된 걸 표현하려고 전체 페이지를 갱신하는 것이 아닌 일부분만을 업데이트한다.

(Ajax서버에 필요한 정보를 요청해 Js로 DOM만 바꿈)

- Jquery와의 시너지

일반 Javascript만으로 Ajax를 하게 되면 코딩량도 많아지고 브라우저별로 구현 방법이 다른 단점이 있는데 jquery를 이용하면 더 적은 코딩양과 동일한 코딩 방법으로 대부분의 브라우저에서 같은 동작을 할 수 있게 된다. jquery ajax를 사용하면, HTTP Get방식과 HTTP Post방식 모두를 사용하여 원격 서버로부터 데이터를 요청할 수 있다.

 

 

용어 정리

*Protocol (프로토콜) : 컴퓨터나 통신장비들이 메시지를 주고받을 때 지켜야 하는 규약과 규칙들의 체계적인 집합

*Architecture (아키텍처) : 시스템 목적을 달성하기 위해 시스템의 상호작용 등의 시스템 디자인에 대한 제약 및 설계

(최적화를 목표로 두고 시스템 구성과 동작원리 그리고 시스템의 구성환경 등을 설명 및 설계하는 청사진 또는 설계도)

*URL (Uniform Resource Locator) : 인터넷상의 주소, 인터넷 상에 존재하는 리소스의 위치를 지정하기 위해 URL이 고안되었다