TIL : 클라이언트(Client)와 서버(Server)

오늘은 클라이언트와 서버에 대해서 기록해보자!

Photo by Ian Battaglia on Unsplash

한번쯤 영화에서 본적이 있는 듯한 장소.... 맨날 여기에 '톰 크루즈'나 그 일원중에 되게 프레피하고 너드한 사람이 들어와서 선을 꼽고 해킹해서, cctv를 조작하거나 데이터를 빼내는 모습을 기억하시나요... 이곳이 서버실입니다.

 

만약에 우리가 앱이나, 웹사이트를 만들었으면 그 데이터는 어디에 저장을 하고, 어디에 있으며, 어떻게 요청하는지에 대해서 기록해 보고자 합니다!

---

🏛Web Architecture

출처 : 코드스테이츠

• 클라이언트(Client) : 클라이언트는 서버에게 필요한 것을 요청하는 주체이다. 사람들이 흔히 사용하고 있는 노트북이나 핸드폰 또는 안에서 서버와 연결되어서 작동하는 브라우저, 앱 등과 같이 유저가 보고 직접 사용하는 것들이 다 클라이언트이다.

• 데이터베이스(DB) : 데이터 베이스는 데이터와 리소스와 같은 자료들을 저장하고 있는 공간이다.

정리하자면, 클라이언트가 서버에게 리소스나 자료를 요청하게 되면 서버는 이 요청을 받고, 데이터 베이스에서 요청에 필요한 데이터들을 가지고 와서 해당 클라이언트에게 응답을 수행한다.

쉬운 예시를 들자면 "스타벅스"를 생각하면 좋다.

출처 : 코드스테이츠

고객(클라이언트)이 원하는 원두를 커피숍(서버)에게 요청을 하면, 커피숍직원(서버)는 해당하는 원두를 가져 와서(데이터베이스) 고객에게 원하는 커피를 제공해준다.

 

출처 : 코드스테이츠

다음으로는 사진에 나와있는 용어들을 기록해보자!

---

1. 브라우저

컴퓨터는 0과1로 알아들을 수 있다. 그렇다면 작성한 HTML, CSS, JS코드를 컴퓨터에서 볼 수 있는 이유는 바로 브라우저 덕분이다. 브라우저는 작성한 코드를 컴퓨터에게 알려주고 전달해주어서, 컴퓨터가 처리한 작업을 볼 수 있도록 하는 역할을 한다. 그래서  IE, Chrome, Safari 등과 같은 웹브라우저에서 자료를 요청했을 때에 서버의 응답을 받고 보낸 자료나 페이지를 보여주는 역할을 한다.

 

2. API (Application Programming Interface)

클라이언트는 요청을 하는 주체이다. 하지만 클라이언트 입장에서는 서버에게 어떻게 요청을 해야하는지 모른다. 데이터 베이스에 어떤 리소스가 있는지 모른다. 그렇다면 클라이언트는 요청을 할 수 없게되고, 리소스를 활용을 못하게 된다. 그래서 서버는 클라이언트에게, 데이터 베이스에 있는 리소스를 활용할 수 있도록 인터페이스를 제공을 해주어야 한다. 그것이 바로 API이다. API는 서버 자원을 잘 가져다 쓸 수있게 만들어 놓은 인터페이스이다.

 

이렇게 말하면 이해가 안될 수 있다. 쉽게 말하면 "스타벅스의 메뉴판"과 같다.

출처 : 코드스테이츠

고객(클라이언트)가 음료를 주문할 수 있는 것은, 메뉴판이라는 API를 제공해(설계)주었기 때문에 주문(요청)이 가능하다. 

 

3. HTTP(HyperText Transfer Protocol)

쉽게 말해서 클라이언트가 서버와 통신을 할 때 사용하는 규칙을 말한다. 쉽게 말해서 클라이언트와 서버간의 국룰!

• 작동방식 : 클라이언트 요청과 서버의 응답으로 이루어진다.  만약에 요청한 리소스가 없다면 없다고 응답을 준다. 요청을 무시하면 안되고 오류가 나게 된다.  반드시 서버는 응답을 주어야한다!
  

• 구성 : 헤더와 바디로 이루어져있다. 요청과 응답에 공통적인 헤더가 있다. HTTP메세지가 만들어진 시간, 문자 크기, 캐시, 컨텐츠의 타입정도 등이 있고, 요청 헤더의 경우에는 서버의 도메인 네임, 어떤 운영체제(클라이언트)로 요청을 보냈는지 등등 정보들이 담겨있다. 응답헤더도 많은 정보들이 담겨져 있다.

• 속성 
  1. stateless : http의 요청은 독립적이다. 예를 들어 클라이언트가 서버에게 "삼겹살 먹자!" 요청을 했고, 서버는 "좋아!"라고 응답을 보냈다. 그리고 바로 "지금 먹으러 가자"라고 요청을 보내면 서버는 "엥?뭘?"이라는 답변을 내놓게 된다. 그 이유는 서버는 지금 클라이언트의 정보를 따로 저장하지 않고 단지 응답만 요청을 하고 있기 때문이다.
  2. connectionless : 한 번의 클라이언트 요청에는 한 번의 응답을 하는 1대1 대응이다. 클라이언트가 요청을 했고 서버가 응답을 하는 순간 연결은 종료가 된다. 갑자기 서버가 아차차! 찾아보니까 여기 있었네~ 하면서 2번 응답을 보낼 수 는 없다.

• Method : 서버의 자원을 요철하는 get, 서버의 자원을 생성하는 post, 서버의 자원을 수정하는 put, 서버의 자원을 제거하는 delete 다른 메소드들도 있다. 자세한 부분은 MDN에서 확인하면 된다.

4. AJAX(Asynchronous Javascript And Xml)

영어가 참 어렵...... 예를 들어서 로그인창을 띄우고 아이디를 입력하고, 비밀번호를 입력하고 로그인을 누르면 지금은 그 해당하는 창만 바뀌는 것을 볼 수 있다. 하지만 과거에는 이런 비동기적인 기술이 없기 때문에 로그인 버튼을 누르면 해당하는 HTML을 가지고 와서 다시 화면을 띄우기 때문에 화면이 깜빡거리고 다시 새롭게 화면이 나왔다. 하지만 AJAX의 등장으로 다이나믹한 웹페이지를 만들 수 있게 되었다.

 

JavaScript와 DOM을 사용한 비동기 통신과 클라이언트와 서버와 자유롭게 통신이 가능한 XHR을 합친 것이 바로 AJAX이다.

 

다음은 무엇을 기록해 볼까!