Front-End/웹 (Web)

[HTTP/네트워크] 웹 애플리케이션 구조

MS_developer 2022. 10. 17. 16:11

 

프론트엔드 개발자가 된다고 결심했을 때, 혹은 그보다 먼 옛날 처음 "인터넷"이란 걸 썼을 때부터 궁금했던 것이 있었다.

 

 

위키백과에 따르면 인터넷은 "컴퓨터로 연결하여 TCP/IP(Transmission Control Protocol/Internet Protocol)라는 통신 프로토콜을 이요해 정보를 주고받는 컴퓨터 네트워크"라고 정의하고 있다.

 

통신 프로토콜,컴퓨터 네트워크...다소 생소한 개념들이다. 무엇을 의미하는걸까?

 


웹 애플리케이션 구조(아키텍쳐)

 

많은 사람들이 인터넷은 "통신"을 통해 내가 요구한 어떤 "데이터"를 받아오는 것이라는 걸 알고 있다. 그렇다면 이 데이터를 받아오는 통신은 구체적으로 어디로, 그리고 어떤 식으로 보내는 걸까? 

 

간단한 예시를 통해 생각해보자.

 

아침으로 빵을 먹기 위해 배달 애플리케이션을 실행했다. 에플리케이션에서 빵집을 검색하고, 마음에 드는 빵집에서 메뉴를 보고 원하는 빵을 시켜 배달시켰다. 애플리케이션은 이 때 "서버"라는 곳에 나의 "요청"을 보내고, 이를 통해 해당 빵집에 내가 작성했던 장바구니를 "전달"한다.

 

실제로는 더 복잡하고 많은 과정들을 거치겠지만, 전체적인 흐름은 위와 같다.

 

서버는 내게 빵을 직접 주지는 않지만, 나의 "요청"을 배달 애플리케이션의 서버를 통해 "전달"받은 해당 빵집은 나의 요구를 확인하고 배달을 통해 내가 애플리케이션에 작성한 집 주소로 빵을 배달시켜준다. 

 

위처럼 데이터를 제공serve하는 주체서버Server라고 하고, 해당 서버를 이용하는 사용자 또는 애플리케이션클라이언트라고 한다.

 

웹 애플리케이션의 기본 구조는 이처럼 클라이언트가 서버를 통해 통신하는 구조를 띄고 있는데, 이를 2-Tier 아키텍쳐 또는 클라이언트-서버 아키텍쳐라고 한다. 클라이언트-서버 아키텍쳐는 클라이언트가 서버에게 요청이 선행되고, 그 후에 서버가 클라이언트가 요구하는 리소스(데이터)를 담아 응답하는 방식(서버 마음대로 클라이언트에 리소스를 전달하지 않는다)을 취한다.

 

이 때 한 가지 문제가 발생한다.

 

서버는 기본적으로 유저의 응답에 대응하기 위해 만들어졌기 때문에 대용량의 데이터를 효율적으로 저장하고 다루기엔 부적절하다. 

 

때문에 서버 외에도 요청하는 리소스(데이터)를 저장하는 별개의 공간을 가지고 있는데 이를 데이터베이스라고 한다.

 

사진 출처: Management Mania (참조)

 

자연스럽게 클라이언트-서버-데이터베이스 구도가 완성되는데 이를 3-Tier 아키텍쳐라고 한다. 위 그림에서 보통 "개발자"를 지칭할 때 구분하는 프론트엔드는 눈으로 보고 대면하는 클라이언트(리소스를 사용하는 애플리케이션)의 영역을 다루고, 백엔드는 사용자 눈에 보이지 않게 뒤에서 작동하는 서버와 데이터베이스의 영역을 다루고 있다.

 


프로토콜(Protocol)

 

앞서 말한 웹 애플리케이션 구조에 따라 서버에 "통신"하기 위해서는 통일된 양식, 즉 통신 규약을 따라야 하는데 이를 프로토콜(Protocol)이라고 한다. 

 

앞선 예시와 관련해, 만약 우리가 배달 에플리케이션 대신 빵집에 직접 가서 주문을 한다고 생각해보자.

 

빵집에 가면 정해진 "방법"이 있다. 우리는 제공된 트레이와 집게를 사용해 진열된 빵을 고르고 트레이에 담아 계산대로 가져간다. 그럼 계산대에서는 손님이 가져온 빵을 보고 해당 빵에 맞는 가격을 포스기에 입력해 결제 가격을 알려준다. 우리는 카드나 현금을 통해 결제하고, 이후에 계산대에서 봉투에 담아준 빵을 들고 빵집을 나선다.

 

그런데 만약 우리가 계산대에 빵이 아닌 다른 것(예를 들면 해산물)을 가져간다면?

 

 

계산대에서는 우리가 가져온 물건에 대해 가격을 책정하지 못할 것이다. 

 

하지만 만약 우리가 해산물을 골라 노량진 수산시장에 있는 가판대에 가져갔다면 결제를 할 수 있을 것이다. 이처럼 사회적으로 "장소"에 걸맞는 행동"양식"을 지키는 것처럼, 인터넷에서도 "서버(장소)"에 맞는 "규약(양식)"을 지켜야 한다. 프로토콜은 이를 위한 길라잡이이며, 이를 통해 효과적으로 정보를 주고받을 수 있다.

 

출처: Intro To Computer Networking And Internet Protocols (참조)

 

인터넷에서는 HTML을 기본으로 하는, 하이퍼텍스트Hypertext식 구성이기 때문에 HTTP라는 프로토콜을 주로 이용해 통신을 주고 받는다. 

 

이에 앞서 인터넷을 통해 데이터가 보낼 주소를 다루는 IP 프로토콜과 해당 IP 주소에 데이터 전송을 담당하는 TCP 프로토콜은 반드시 알고 있어야 한다. 단, TCP와 IP는 다른 프로토콜이지만 결국 서로가 없으면 의미가 없는 프로토콜이기 때문에 대부분 같이 사용한다.

 

출처: Intro To Computer Networking And Internet Protocols (참조)

 

이 외에도 다양한 프로토콜이 존재하는데, 이를 OSI 7 계층Layers 개념을 통해 세분화할 수 있다. OSI 7 계층은 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것으로, 통신이 일어나는 과정을 단계별로 파악할 수 있다. 현재 포스팅에서는 더 깊게 다루지는 않지만 해당 개념이 있다는 것과 인터넷 프로토콜을 계층 구조를 통해 정리할 수 있다는 점을 알고 있도록 하자.

 


참조