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