Client-Server Architecture

웹 개발을 공부하다보면 클라이언트와 서버라는 단어를 많이 마주치게 된다. 웹 애플리케이션의 구조를 보면서 정확히 이해해보자.

💡 2-Tier architecture

🛒 어떤 쇼핑몰 웹 사이트가 있다고 할 때, 해당 웹 사이트는 상품에 대한 정보들을 인터넷 어딘가에 존재하는 서버로부터 받아온다. 이런 식으로 리소스가 존재하는 곳과 / 리소스를 사용하는 앱은 분리되어 있다.
그리고 클라이언트와 서버는 요청과 응답을 주고 받는 것이 2-tier 아키텍쳐이다.

💡3-Tier architecture

2-Tier에서 발전된 구조가 3-Tier 구조이다.
리소스를 저장하는 공간으로 데이터베이스를 따로 둔 것이 차이점이다. 사실 데이터베이스도 데이터 제공자로 일하고 있으므로 일종의 서버라고 할 수 있다.

💡 프론트엔드와 백엔드

그리고 클라이언트와 서버, 이 둘은 각각 프론트엔드와 백엔드에 속한다.

📌 클라이언트 앱

사용자가 눈으로 보고 대면하는 프론트엔드 영역이다.
웹사이트도 있고, 스마트폰, 태블릿용 앱이나 데스크탑 앱도 클라이언트 앱이다.

📌 서버 앱

사융자 눈에 보이지 않고 뒤에서 작동하는 영역을 담당하므로 백엔드에 속한다.
웹 서버, 파일 서버, 메일 서버, 그리고 데이터베이스도 일종의 서버이다.

클라이언트-서버 통신과 API

💡 클라이언트-서버 통신

📌 서버

서버는 클라이언트의 요청이 있을 때만 클라이언트에게 리소스를 전달하는 등의 응답을 준다.

💡 프로토콜(Protocol)

그렇다면 클라이언트-서버가 요청과 응답을 주고 받는 통신을 위한 규약이 필요하기 때문에 이런 규약을 프로토콜이라고 부른다. 인터넷이 사용하는 프로토콜에는 여러가지가 있지만, OSI 7 Layers에서 제일 최상위 응용 계층에서 사용하는 프로토콜에는 HTTP, HTTPS, FTP 등등등에서

대표적으로 HTTP 프로토콜이 있다. 웹 애플리케이션에서는 클라이언트와 서버가 HTTP 프로토콜로 소통한다!

💡 API

개발을 하다보면 API 라는 단어를 엄청 많이 사용하게 되는데 정확히 무슨 뜻일까?

✏️ API란 '앱이 요청할 수 있고 프로그래밍 가능한 인터페이스' 이다.

웹 애플리케이션 구조에서 생각해보면,
클라이언트는 → 서버가 어떻게 구성되어 있는지 알 수 없다. 따라서
서버는 → 클라이언트에게 리소스를 활용할 수 있도록 인터페이스를 제공해주고, 이것이 바로 API이다.
그래서 서버 개발자는 API 문서를 작성해서 프론트엔드 개발자가 클라이언트에서 활용할 수 있게 해주어야 한다!

📌 HTTP API 디자인

(출처: https://octoperf.com/blog/2018/04/23/jmeter-rest-api-testing/#retrieving-user-workspaces)
HTTP API 디자인의 예시이다. 차례대로 어떤 HTTP 요청 메서드를 사용할 것인지, URL은 어떻게 정할 것인지, 어떤 요청을 보내는지 알려주고 있다.

📌 CRUD - HTTP 요청 메서드

✏️ 우선 CRUD란?
대부분의 컴퓨터 소프트웨어가 가지는 기본적인 처리기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다.

이 CRUD 기능을 구현하기 위해 HTTP는 여러가지 요청 메서드들을 제공한다.

Create - POST 메서드

Read - GET 메서드

Update - PUT / PATCH 메서드

Delete - Delete 메서드

클라이언트에서는 원하는 리소스를 얻기 위해 서버에 적절한 HTTP 요청 메서드를 사용해서 요청을 해줘야 한다.
예를 들어 새로운 유저를 추가하려고 하는데 GET 메서드를 사용하게된다면 당연히 애플리케이션이 제대로 동작할 수 없을 것이다.

HTTP

이어서 HTTP에 대해 좀 더 자세히 알아보자!

🧐 HTTP(HyperText Transfer Protocol)란?

앞에서도 알아봤듯이 html과 같은 문서를 전송하기 위한 프로토콜이다.

💡 HTTP Messages

HTTP는 클라이언트와 서버가 통신을 하기 위한 규약이라고 했는데, 그러면 이 통신이 어떻게 이루어질까? 요청과 응답 메시지를 주고 받으면서 일어난다.
request와 response 두가지 유형만 존재하고 이 메시지는 개발자가 직접 작성하지 않는다. 구성파일, api, 기타 인터페이스에서 자동으로 완성한다.

📌 HTTP Message 구조

(출처: https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages)

1. start line

• 요청이나 응답의 상태

2. HTTP headers

• 요청을 지정하거나 메시지에 포함된 본문을 설명하는 헤더의 집합

3. empty line

4. body

• 요청이나 응답과 관련한 데이터, 문서를 포함한다. 메서드에 따라서 body가 없는 http 메시지도 있다.

HTTP 메시지는 이런 구조로 이루어져 있다.

브라우저의 작동 원리

이어서 웹 애플리케이션 구조에서 애플리케이션이 실행되는 브라우저와 관련된 여러 내용들을 알아보자!

💡 URL과 URI

📌 URL(uniform resource locator)

URL이란?
네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타내는 주소이다.
scheme, hosts, url-path 세가지로 이루어진다.

1. scheme:

통신방식(프로토콜)을 결정

2. hosts:

웹 서버의 이름이나 도메인, IP 주소

3. url-path:

웹 서버에 접속하기 위한 통로

📌 URI(uniform resource identifier)

URI란?
url에서 확장된 개념으로 url의 3가지 요소에 query와 fragment까지 포함하는 주소이다.

1. query:

웹 서버에 보내는 추가적인 질문이다.

2. fragment

예시 사진에는 없는데 일종의 북마크 기능으로, 특정 HTML 요소의 id를 전달하면 해당 요소가 있는 곳으로 스크롤 할 수 있다.

💡 IP와 포트

📌 IP address(internet protocol address)

네트워크에 연결된 특정 PC의 주소를 나타내는 체계이다.

📌 IPv4, IPv6

대한민국 주소를 표기할 때 지번 주소와 도로명 주소가 있는 것처럼 IP 주소도 표기하는 체계가 있고 이를 IPv4라고 부른다. 숫자 4가 붙는 이유는 네 부분으로 숫자를 구분해서 표기하기 때문이다.

예를 들어 127.0.0.1은 로컬 pc의 주소이다.
그리고 0.0.0.0, 255.255.255.255 등은 broadcast address로, 로컬 네트워크에 접속된 모든 장치와 소통하는 주소이다!

숫자 한 덩어리는 8비트로 표현해 0부터 255까지 나타낼 수 있고, 따라서 IPv4는 총 32비트로 최대 약 43억개의 주소를 나타낼 수 있다. 그런데 전 세계의 컴퓨터수가 43억대를 넘어선다면?
주소가 모자라기 때문에 나온 것이 IPv6이다. 무려 128비트로 주소를 표현하고 43억개 x 4개 까지의 주소를 표현할 수 있다.

Port

포트는 IP 주소가 가리키는 PC에 접속할 수 있는 통로, 채널이다.
예를 들어 React로 만든 애플리케이션을 로컬 PC에서 실행하면 3000번 포트로 접속한다.
0부터 65535까지 사용이 가능하고, 0 ~ 1024는 이미 정해져있다.
(22: SSH, 80: HTTP, 443: HTTPS)

💡 도메인과 DNS

📌 도메인

웹 브라우저로 특정 사이트에 진입할 때 IP 주소를 대신해 사용하는 주소이다.

nslookup <도메인 이름>

nslookup 명령어로 해당 도메인의 IP 주소를 확인할 수 있다.

google의 IP 주소를 확인해보았다! 주소창에 google.com 대신 142.250.76.142라고 입력해도 구글 홈페이지로 접속한다.
하지만 구글에 접속할 때마다 주소창에 142.250.76.142를 입력해야한다면 매우 번거롭기 때문에 도메인을 만든 것이다.

📌 DNS(domain name system)

그리고 이렇게 정해진 도메인이 중복되어서 혼란이 오는 사태를 방지하기 위해 도메인과 IP 주소를 확인할 수 있는 데이터베이스 시스템인 DNS를 만들었다.
주소창에 도메인 이름인 google.com을 입력하면 → DNS에서 도메인 이름과 일치하는 IP 주소를 찾고 → IP 주소에 해당하는 웹 서버로 요청을 전달한다.

참고로 네트워크 상에 존재하는 모든 PC는 IP 주소를 갖고 있지만, 모든 IP 주소가 도메인 이름을 가지는 것은 아니다. 따라서 웹 사이트를 만들고 배포할 때, 도메인 이름이 있어야 접근하기 쉽기 때문에 돈을 내고 도메인을 구매하는 절차를 거쳐야한다.