15. Interaction With Server - Concepts

본격적인 웹개발에 들어갔습니다. 

(서버 구축에 대해서는 뒤에서 배우게 될 것이고,) 지금은 서버와 잘 통신하는 Client 페이지를 만들것이고, 이에 필요한 것을 배워보는 단계로, 이해한 것을 정리하도록 하겠습니다.

1. 개념

웹 서비스 아키텍쳐는 크게 다음과 같이 구성되어 있습니다. 

• Client는 User가 보는 부분이며, 이들과 상호작용을 담당하고
• Server는 리소스 요청과 응답에 대한 처리를 담당,
• Database는 리소스를 저장합니다.

 

 

 

 

 

 

그리고 이번 주제의 핵심인 '서버와 잘 통신하는 Client 페이지'를 만들기 위해서 중점을 두어야 할 개념들은

• browser
• server
• API
• HTTP
• Ajak

입니다. 이에 대해서 정리해보겠습니다. 

 

 

 

1) Client

Client는 Server에게 데이터를 요청하고, 받아서, 보여주는 역할을 합니다. (Server는 Client의 요청에 응답하는 역할을 할것입니다. )

더 구체적으로 말하면 웹 브라우저가 웹 서버에 요청을 보내고, 이 웹 브라우저가 설치된 컴퓨터를 Client라고 하는 것일라고 이해했습니다. 

(쉬운 설명이 필요할땐 언제나 찾아보는) 생활코딩에서는 이를 아래와 같이 설명하고 있습니다. 

웹브라우저가 설치된 컴퓨터와웹서버가 설치된 컴퓨터가서로 정보를 주고 받습니다.
이 중에서웹브라우저가 깔린 컴퓨터는정보를 요청하나요? 응답하나요?요청합니다.
또웹서버가 깔린 컴퓨터는정보를 응답하나요? 요청하나요?응답합니다.

자본주의 사회에서가장 중요한 관계가 무엇인가요?
부모와 자식?주인과 노예?아닙니다.
바로고객(갑)과 사업자(을)입니다.고객을 영어로는 클라이언트(client)라고 합니다.사업자를 영어로는 서버(server)라고 합니다.
 
인터넷을 만든 사람들은이 비유를 사용하기로 합니다.
요청하는 컴퓨터를 클라이언트 컴퓨터응답하는 컴퓨터를 서버 컴퓨터라고 부르기로 합니다.

웹브라우저는 어떤 컴퓨터에서 동작하나요?클라이언트 입니다.그래서 웹브라우저를 다른 말로는 웹 클라이언트라고 합니다.
웹서버는 어떤 컴퓨터에서 동작하나요?서버입니다.그래서 웹서버라고 하는 것입니다.

출처: https://opentutorials.org/course/3084/18890

2) Browser

Client를 알아보았으니( 대충 Client(⊃Browser) <=> Server의 관계도..) 그 Browser가 어떻게 작동하는 것인지도 알아보아야합니다. 

인터넷으로 컴퓨터를 통해 상호작용할때, 우리가 인간의 말(코드)로 요청사항을 작성할텐데, 컴퓨터는 0, 1밖에 알지 못하지 않습니까? 그런데 어떻게 우리의 명령을 이해할 수 있을까요? 바로 이 Browser 덕분입니다. 

javascript/css/HTML로 코드를 작성하면 → Browser는 내부의 엔진을 사용해 이 코드들을 해석하고, → 컴퓨터에 binary data를 넘겨주고 → 컴퓨터가 data를 처리한 결과를 Broser에 보여줍니다.

3) Server

Server는 Client의 요청에 응답(요청한 것을 제공)하는 역할을 한다고 하였습니다. 그러니까.. 

이렇게요! 정리하면, 

 

"클라이언트: 요청하는 주체

서버: 요청에 따른 응답을 주는 주체"

 

이 둘은 요청과 응답으로 연결되어 있는 것으로 생각됩니다. 그러면 Server는 Client의 요청을 어떻게 받아들이는지 알아보겠습니다.

 

 

 

 

3) API(Application Programming Interface.)

각 Client마다 다 다른 form으로 요청을 보내는게 바로 Server로 가면 Server는 얼마나 혼란스러울까요?

그래서 Server 자원을 잘 가져다 쓸 수 있게 만들어 놓은 Interface가 API입니다. 

 

쉽게 비유로 말해서, 

API는 손님(Client)이 마구잡이가 아니라 적절한 주문할 수 있게 메뉴(요청 목록)를 정리하고, 주문(요청)을 받으면 요리사(Server)와 상호작용하여 요청된 메뉴(응답)를 전달합니다.
쉽게 말해, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있습니다.

 

 

 

4) HTTP (HyperText Transfer Protocol)

지금까지를 정리해보면 "Client는 요청하는 주체 - API가 이 요청/응답을  정리해서 상호작용 매개 - Server는 응답하는 주체" 까지 입니다. 

그러면 Client와 Server는 상호작용(통신) 한다는 건데 여기서도 마구잡이로 하면 안되겠죠?! 그래서 Client와 Server는 HTTP라고 하는 규약, 규칙(Protocol)을 지켜서 통신합니다.

 

HTTP에 대해서 조금만 더 알아보면, 

① HTTP의 작동 방식:

항상 요청(by Client)과 응답(by Server)의 형식으로 이루어집니다. 이때 요청에 대한 응답은 반드시 주어야합니다. 무시하면 오류 발생.

② HTTP의 구성:

http는 기본적으로 헤더와 바디를 가집니다.

- header: 어디서 보내는 요청인가(origin), 컨텐츠 타입은 무엇인가(content-type), 어떤 클라이언트를 이용해 보냈는가(user-agent)

- body: (바디를 가지는 것도 있고 아닌 것도 있다. ) 서버에 데이터를 보내기 위한 공간으로 활용 - 각 HTTP의 method가 body를 가지는지는 mdn에서 확인해보면 된다.

③ HTTP의 속성

- stateless: http의 각 요청은 모두 독립적이다. (즉, 모든 요청이 개별적이라서 연결성, state가 없다. )

- connectionless: 한 번의 요청에는 한 번의 응답을 한다. (응답을 하는 순간, 요청-응답의 connection은 끊어지게 된다. )

④ HTTP의 메소드

• GET: 서버에 자원을 요청
• POST: 서버에 자원을 생성
• PUT: 서버의 자원을 수정
• DELETE: 서버의 자원을 제거

입니다.

 

5) AJAX (Asynchronous JavaScript And XML)

지금까지를 정리해보면 "Client는 요청하는 주체 - API가 이 요청/응답을  정리해서 상호작용 매개, 이때 상호작용은 HTTP라는 규약에 맞게! - Server는 응답하는 주체" 까지 입니다. 

그런데 Client가 Server로부터 요청에 대한 응답(데이터같은..)을 받아서 이를 보여줄때마다 페이지가 새로 업데이트 된다면? 매번 페이지 깜박임도 일어날 것이고, 다시 로드해야하는데 자원낭비와 시간낭비가 있을 것입니다. 

그래서 등장한 것이 클라이언트와 서버간에 JavaScript를 사용한 비동기 통신으로 데이터를 주고받는 기술인 AJAX입니다.

※ 비동기(async)방식이란?

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식입니다. 이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있습니다.

출처: https://coding-factory.tistory.com/143

AJAX는 html 페이지 전체가아닌 일부분만 갱신할수 있도록 브라우저가 가지고있는 XML HttpRequest객체를 통해 서버에 요청을 보냅니다. 그리고 응답을 받으면  Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있습니다. 

(이 개념이 어려워서, 

https://coding-factory.tistory.com/143 와 https://www.zerocho.com/category/jQuery/post/57b1a48f432b8e586ae4a973

글의 도움을 많이 받았습니다. )

① AJAX의 장점

• 페이지 이동 없이 고속으로 화면을 전환할 수 있습니다.
• 서버 처리를 기다리지 않고, 비동기 요청이 가능합니다.
• 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있습니다.

② AJAX의 단점

• Ajax를 쓸 수 없는 브라우저에 대한 문제가 있습니다.
• HTTP 클라이언트의 기능이 한정되어 있습니다.
• 페이지 이동 없는 통신으로 인한 보안상의 문제가 발생할 수도 있습니다.
• 지원하는 Charset이 한정되어 있습니다.
• 스크립트로 작성되므로 디버깅이 용이하지 않습니다.
• 요청을 남발하면 역으로 서버 부하가 늘 수 있습니다.

 

지금까지 

서버와 잘 통신하는 Client 페이지'를 만들기 위해서 중점을 두어야 할 개념인

• browser
• server
• API
• HTTP
• Ajak

에 대해서 정리해 보았습니다. 

배우는 중이라 잘못된  내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :))