티스토리 뷰

부트캠프

웹 애플리케이션 아키텍처

mimi-latte 2022. 6. 9. 19:35

웹 애플리케이션 아키텍처

클라이언트-서버 아키텍처

  • 2-Tier Architecture
  • 리소스가 존재하는 곳(server)과 리소스를 사용하는 앱(client)를 분리시킨 것을 2-Tier 아키텍처라고 한다.
  • client와 server는 요청과 응답을 주고 받으며, server는 리소스를 전달해 주는 역할을 담당한다.
  • server는 리소스를 전달할 뿐 데이터베이스라는 곳에 리소스를 저장한다.
  • 기존 2-tier architecture에 데이터베이스가 추가된 형태를 3-tier architecture라 한다.
  • 클라리언트는 사용자가 눈으로 볼 수 있는 영역이며, 터치 및 클릭등의 상호작용을 할 수 있으므로 프론트엔드 영역, 서버는 사용자가 눈으로 볼 수 없지만 로그인과 같은 권한 관리 및 사용자 인증을 다루고, 상품 정보를 API로 노출하므로 백엔드 영역이라 부른다.
  • 클라이언트는 플랫폼에 따라 웹사이트(웹, 앱), 스마트폰용 앱, 데스크탑 앱등으로 구분되고, 서버는 무엇을 하느냐에 따라 파일 서버, 웹 서버, 메일 서버, 데이터베이스 서버 등으로 구분된다.

3-Tier Architecture

 

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

  • 카페에서 직원이 손님의 주문 없이 커피를 만들지 않듯이 클라이언트-서버 아키텍처에서는 서버 마음대로 클라이언트에 리소스를 전달하지 않는다.
  • 손님이 직원한테 한국어가 아닌 외계 언어로 주문을 할 수 없듯이 클라이언트와 서버간 통신에서는 꼭 지켜야 할 약속이 있는데 이를 프로토콜이라고 한다.
  • 웹 어플리케이션 아키텍처에서는 클라이언트와 서버간 HTTP라는 프로토콜을 이용해 통신하며, HTTP 메시지를 주고 받는다.
  • 손님이 메뉴 주문 시 메뉴판을 보고 주문 하듯이 서버는 클라이언트에게 자신의 리소스를 잘 활용할 수 있도록 인터페이스를 제공하는데 이를 API(Application Programming Interface)라고 한다.
  • 서버가 API를 잘 구축해놓아야 클라이언트가 리소스를 원활하게 활용할 수 있다.
  • HTTP API 디자인에는 HTTP 요청 시 메서드를 지정하여 리소스와 관련된 CRUD(Create, Read, Update, Delete)를 지정할 수 있다.
  • 메서드는 GET, POST, PUT, PATCH, DELETE 등이 있다.
    • GET : 리소스 정보 조회
    • POST : 새로운 리소스 생성
    • PUT : 존재하는 리소스 수정
    • PATCH : 제공된 리소스 업데이트
    • DELETE : 존재하는 리소스 삭제

 

HTTP Message

  • HTTP Message는 클라이언트와 서버 사이에서 데이터가 교환되는 방식이다.
  • Request, Response 두 가지 유형이 있다.

 

예시로 http 사이트인 환경부 모바일 홈페이지에 접속해보았다.

 

 

환경부 모바일 홈페이지에 접속했을 당시의 패킷을 wireshark 프로그램을 통해 보았다.

클라이언트-서버 아키텍처의 개념을 이용해 보면

192.168.0.9는 나의 노트북이 가지고 있는 ip, 즉 클라이언트이고, 27.101.216.200의 ip는 서버이다.

클라이언트는 서버측으로 4번의 request를 보냈고,

서버는 클라이언트에 4번의 response를 보냈다.

 

 

먼저 HTTP Request 메세지의 자세한 내용을 보면

패킷 안에 다양한 내용이 담긴 것을 확인할 수 있다.

GET /home.web.main.do HTTP/1.1

/home.web.main.do 파일을 요청(GET)했다.

 

 

서버측에서는 클라이언트의 요청에 대해 성공적으로 응답(200 OK)했으며, 

응답한 내용에 대해서는 두 번째 캡쳐에 나와있다.

 

 

파란색 음영이 표시된 Line-based text data 부분을 보면

클라이언트의 GET 요청에 의한 서버의 응답 내용이 표시되어 있다.

 

'부트캠프' 카테고리의 다른 글

React useEffect  (0) 2022.06.14
postman 으로 openAPI 데이터 조회하기  (0) 2022.06.13
React useState  (0) 2022.06.08
React props와 state  (0) 2022.06.07
생성자 함수 constructor  (0) 2022.05.26
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함