9/23[TIL]Web Architecture

Api -application programming interface

ui – user interface

 

interface는 의사소통이 가능하도록 만든 매개체라고 생각할 수 있다.

 

웹 아키텍처를 간단하게 본다면 아래와 같은 그림으로 볼 수 있는데

출처 : https://slides.com/codestates/introweb-architecture#/16

Client

client는 유저와 상호작용 담당하며 서버에 데이터를 요청하고 받아서 보여주는 역할을 한다.

 

기존에는 새로운 페이지를 내려 받아 화면 전환을 하는 페이지 전부를 로딩을 했지만 

 

ajax는 유저가 보는 부분을 담당하고 필요한 부분만 수정 가능하게 해주는 역할을 한다. 쉽게 말해 서버에 필요한 정보를 요청 js로 DOM만 바꾸는 것이다.

 

서버와 자유롭게 통신할 수 있고(xmlHttpRequest XHR의 등장, jQuery ajax(가독성이 떨어지고 복잡함)) -> 지금은 fetch api 이용

페이지 깜빡임 없이 원활하게 작동하는 web app 등장(js,DOM이용)

이를 ajax(asynchronous javascript and xml)라고 하는 것이다.

 

지금 현재는 서버 자원을 가져오기 위해서 fetch 메소드를 사용하는데 보다 가독성 있고 유연함)

 

browser 는 컴퓨터가 우리가 작성한 코드를 이해할 수 있도록 해주며 이는 쉽게 말해 컴퓨터는 이진수만 읽을 수 있는데 각종 언어(js,DOM,CSS)를 표현해주는 것을 도와준다고 생각하면 된다.

browser는 코딩한 것을 해독하는 엔진(v8)으로 2진수로 컴퓨터에 넘겨주고 컴퓨터는 데이터를 처리한 결과를 브라우저에 보여주는 과정을 거치게 되는 것이다.

 

http 은 client와 server 통신할 때 사용하는 규약, 규칙이며 항상 요청과 응답으로 이루어진다.

없으면 없다고 응답(404?) 주게 되며 없다고 요청을 돌려주어야 하는데 요청을 무시할 시 오류가 나게 된다.

요청은 헤더와 바디를 가지게 되는데 

헤더는 어디서 보내는 요청인지? 콘텐츠의 타입은? 어떤 클라이언트를 이용했는지?를 포함하고 

바디는 서버에 데이터를 보내기 위한 공간이며 가질 수도 있고 안 가질 수 도 있다.

응답도 헤더와 바디를 가짐

 

http는 stateless / connectionless이라는 속성을 가지고 있는데 

http의 요청은 모두 독립적이기에 state라는 것이 없고, 한번 요청에는 한번 응답하며 응답 이후 연결이 끊기기에 더 이상 응답할 수 없다는 것을 알 수 있다.

 

메소드

GET(서버에 자원을 요청)

POST(서버에 자원을 생성)

PUT(서버에 자원을 수정)

DELETE(서버에 자원을 제거)

 

Server

리소스 요청과 응답에 대한 처리를 하며 자원을 서브하는 주체이다. 클라이언트의 요청을 받으면 리소스를 바탕으로 응답하며

클라이언트의 요청을 처리하고 데이터를 관리하는 역할을 한다.

 

api 는 메뉴판이라고 생각하면 될 것 같다. 앞서 말한 server가 스타벅스라면 api는 메뉴판으로..

클라이언트가 어떠한 데이터가 있는지 제공해주는 역할을 하고 서버 자원을 잘 가져다 쓸 수 있게 만들어 놓은 인터페이스라고 보면 된다.

 

메소드

GET/message(메세지 전달)

POST/message(메세지 저장)

 

DB

나중에 따로 배우겠지만 지금은 리소스를 저장하는 곳으로 이해하고 있으면 될 것 같다.