[D+66] Web Architectures

 

 

D+66

-  Web Architectures -

(Web Service,

Keywords about Web Service Architecture,

HTTP, AJAX, )

 

---

 

 

Web Service Architecture

 

웹 서비스 아키텍처는 크게 클라이언트, 서버, DB로 구성되어 있다.

 

우리는 클라이언트, 서버 DB를 하나하나 세밀하게 알아보기 전

각자가 하는 역할에 대해 전반적으로 이해해야 할 필요가 있다.

 

먼저, 클라이언트는 유저와 상호작용을 담당하는 곳으로

사용자가 요청을 하는 주체라고 할 수 있다.

 

그리고 서버는 클라이언트에서 유저가 요구한 요청을 처리해 답변을 주는 곳으로

리소스 요청과 응답에 대한 처리를 담당하는 곳으로 자원을 제공해 주는 주체라고 할 수 있다.

 

마지막으로 DB는 리소스를 저장하는 곳으로 일종의 저장소라고 생각하면 좋을 것 같다.

 

오늘 우리는 클라이언트와 서버와의 관계를 알아야 하기 때문에 각 사용되는 관련 키워드들에 대해 알아야만 한다.

 

 

---

Keywords about Web Service Architecture

 

 

Browser

브라우저는 사용자가 요청한 자료를 서버로부터 가져와 우리가 쉽게 볼 수 있도록 하는 소프트웨어이다.

 

컴퓨터는 2진수 만을 알아듣지만 우리가 홈페이지를 제작할 때 사용하는 코드는 2진수가 아니다.

 

하지만 그럼에도 불구하고 잘 작동되는 모습을 볼 수 있는 것은

바로 브라우저가 우리가 작성한 코드를 서버로 보낼 때 서버에서 알아들을 수 있게 하며,

또 그에 따른 응답 값을 우리가 알아볼 수 있도록 해주기 때문이다.

 

Server

서버는 자원을 제공해주는 주체로 쉬운 예를 들자면 커피 주문을 받는 점원이라고 생각할 수 있을 것 같다.

 

손님이 점원에게 커피를 주문하면 주문을 받은 점원은 커피 원두를 가져와서 주문받은 커피를 제작한 후에 다시 손님에게 건넬 것이다.

 

이처럼 서버도 클라이언트에서 요청을 하면 요청을 받은 서버는

DB에 해당하는 값을 찾은 뒤에 다시 클라이언트에게 돌려주는 역할을 하게 된다.

 

API

위에 설명에서 알 수 있듯이 서버는 클라이언트의 주문을 통해 값을 주게 되는데

이때 클라이언트에게 데이터베이스에 있는 리소스들을 잘 활용할 수 있도록 인터페이스를 제공해 주게 되는데

이것이 바로 API이다.

 

마치 커피점원이 손님에게 원활한 주문을 위해 메뉴판을 제공해 주는 것과 같은 것이라고 할 수 있다.

 

 

---

HTTP (HyperText Transfer Protocol)

• 웹 브라우저의 기본 프로토콜 ( 프로토콜 - 규약, 규칙 )

 

• 클라이언트와 서버가 통신할 때 사용하는 방식

 

 

작동 방식

• 클라이언트와 서버 간에는 항상 요청과 응답으로 이루어진다.

 

• 만약 클라이언트에서 메시지를 달라고 요청했을 시에는 해당 메시지를 응답으로 돌려준다.

 

• 만약 클라이언트가 원하는 메시지가 없을 경우에는 없다는 응답을 보내주어야 한다.

 

• 받은 요청은 무시할 수 없다. (에러 발생)

 

구성

• 각각의 응답과 요청은 header와 body로 구성되어 있다.

 

속성

• stateless

http의 각 요청은 모두 독립적이다.

내가 만약 무언가를 요청했을 경우 서버는 해당 요청에 대한 값만 응답할 뿐

내가 이전에 했던 요청을 근거 삼아 다른 응답을 제시할 수 없다.

 

• connectionless

한 번의 요청은 한 번의 응답을 한 이후에는 연결이 끊겨서 더 이상 응답을 진행할 수 없다.

 

메서드

• get - 서버에 자원을 요청

 

• post - 서버에 자원을 생성

 

• put - 서버에 자원을 수정

 

• delete - 서버의 자원을 제거

 

 

---

AJAX (Asynchronous Javascript And XML)

AJAX는 서버에서 데이터를 요청하는 것으로 자바스크립트 라이브러리 중 하나이며,

이때에 요청받은 데이터를 화면 전환(페이지 깜빡임)을 통해서 웹페이지 전체를 전환해 보여주는 것이 아니라

바꾸고자 하는 부분만 자바스크립트와 돔을 활용해 바꿀 수 있다.

 

 

---

fetch

• fetch는 서버로부터 자원을 가져오기 위한 함수

 

 

fetch 말고는 없는 것인가?

간단하게 답을 먼저 말하자면 아니다.

 

서버로부터 자원을 가져오는 것은 fetch 말고도 여러 개가 있으며,

심지어 fetch는 가장 나중에 등장한 이유이다.

 

간단하게 몇 가지를 살펴보자면

 

 

XHR과 jQuery도 마찬가지로 서버로부터 자원을 받아올 수 있는 역할을 담당하고 있다.

 

하지만 사용하는 과정에서 복잡함을 느끼게 된 개발자들은

XHR과 jQuery처럼 리소스를 가지고 올 수 있으면서 좀 더 강력하고 유연한 조작이 가능한

fetch를 등장시키게 한 것이다.

 

fetch 이해하기

fetch('http://52.78.213.9:3000/messages') // fetch안에 url을 받는다.
	.then(function(response) { // url에서 response를 일단 받는다.
    	return response.json(); // response를 json화 시킨다.
    })
    .then(function(json) {
    
    // json 형태로 전달받은 서버로부터의 응답
    
    });

fetch의 사용법은 먼저 fetch를 통해 url을 받은 다음,

url에서 response를 받아온 다음 response를 json화 시켜준다.

 

json화 시켜준 다음에 내가 부분적으로 바꾸고자 했던 부분을 

함수한에 적절히 넣어주면 완성이다.