Client - Server Architecture
2 Tier Architecture
resource가 존재하는 곳과 resource를 사용하는 앱을 분리시키 것을 말한다.
클라이언트(손님)이 서버(서비스를 제공하는 사람 : 점원) 에게 물건을 요청하면, 서버는 리소스를 담아 응답한다. ✅ 클라이언트 요청 - 서버 응답
3 Tier Architecture
보통 서버는 리소스를 전달해 주고, 리소스를 저장하는 공간은 데이터베이스에 둔다. 이처럼 클라이언트 - 서버 - 데이터베이스의 형태를
3-Tier Architecture라고 한다.
🗣 HTTP (HyperText Transfer Protocol)
클라이언트의 요청없이 서버가 리소스를 제공하진 않는다. 클라이언트가 요청을 할 때, 특정한 규칙에 맞춰 요청해야 서버가 이해할 수 있다. 이를 위해서는 프로토콜이라는 개념을 이해해야 한다.
프로토콜은 통신 규약, 약속이다. 요청을 하기 위해 꼭 지켜야 하는 약속들이 있다.
HTTP는 브라우저와 서버가 통신할 수 있도록 만들어 주는 여러 프로토콜 중 한 종류이다. 클라이언트와 서버 간 요청-응답이 이루어지는 과정이며, 웹에서 이루어지는 거의 모든 데이터 교환의 기초이다. HTTP를 이용하여 주고 받는 메시지를 HTTP 메시지 라고 한다.
요청 : 클라이언트 -----HTTP 메시지-----> 서버
응답 : 서버 -----응답 결과 -----> 클라이언트 -----> 동작 !! 🥳
💬 HTTP message
클라이언트와 서버 간에 데어터가 교환되는 방식이다. 두 가지의 메시지 타입이 있다. 클라이언트의 1 ) request (요청), 그 요청에 대한 서버의 2) response (응답) 이다.
[ HTTP 요청 ]
- 시작 (HTTP 메서드 & url/protocol/port/domain & HTTP version)
GET /background.png HTTP/1.0 - 헤더
- 본문
[ HTTP 응답 ]
- 상태줄 (protocol version & status code & status text)
HTTP/1.1 404 Not Found. - 헤더 ➡️
paylode type은Content-Type을 보고 알 수 있다. - 본문
➡️ 응답만 봐서는 요청 메소드를 알 수 없다.
그런데 우리는 서버가 어떻게 구성되어 있는지 모르고, 어떤 규약을 갖고 요청해야하는지 모르는데, 어떻게 알맞은 방법으로 사용할 수 있을까? 이를 위해 필요한 것이 API 이다. 리소스를 잘 활용할 수 있도록 제공된 것이며 '요청은 /~요청방법 이런 식으로 하세요' 와 같이 요청에 대한 일종의 form 이라고 이해했다.
🖇 API(Application Programming Interface)
서버측으로 요청할 수 있는 명시적인 규칙이며, 백엔드와 프론트엔드 사이의 데이터 전송을 위한 일종의 약속 같은 것이다.
- interface : 의사소통이 가능하도록 만들어진 접점이다.
- HTTP API 디자인을 잘 하기 위해서는 목적에 알맞은 메소드를 사용해야한다.
[ HTTP request methods ]
| 요청 | 적절한 메소드 | 설명 |
|---|---|---|
| 조회 | GET | 서버에서 특정 데이터를 가져옴 |
| HEAD | 서버에서 특정 데이터를 가져오며 본문 불포함 (헤더만 가져옴) | |
| 추가 | POST | 서버가 처리해야하는 데이터를 보냄 |
| 갱신 | PUT | 서버에 요청 메시지를 본문에 저장 |
| PATCH | 서버에서 가져온 리소스의 일부분만을 수정 | |
| 삭제 | DELETE | 서버에서 특정 리소스 삭제 |
| 연결 | CONNECT | 목적 리소스로 식별되는 서버로의 터널을 맺음 |
| 설정 | OPTIONS | 서버가 어떤 메서드를 수행할 수 있는지 확인 |
| 추적 | TRACE | 메시지가 프락시를 거쳐 서버에 도달하는 과정 추적 |
✅ 꼭 기억해야할 메소드
- GET - Read
- POST - Create
- PUT/PATCH - Update
- DELETE - Delete
HTTP stateless
모든 HTTP 요청은 독립적이므로 서버는 클라이언트의 상태를 기억하지 못한다. (지속적인 state란 없다) 그러나 쿠키를 이용하면 HTTP가 무상태성임에도 불구하고 로그인없이 장바구니에 물건을 추가할 수 있고, 관심있을만한 항목들이 뜨는 것이다.
🔢 HTTP response status codes
[ HTTP 상태코드 ]
| Status code | Description |
|---|---|
| 100 ~ | Informational responses |
| 200 ~ | Successful responses |
| 300 ~ | Redirects |
| 400 ~ | Client errors |
| 500 ~ | Server errors |
✅ 꼭 기억해야할 상태코드
- 100 - 109 : 메시지 정보
- 200 - 206 : 요청 성공
- 300 - 305 : 리 다이렉션
- 400 - 415 : 클라이언트 에러
- 500 - 505 : 서버 에러
(201, 204을 갖는 응답코드는 보통 본문이 없다)
AJAX ( Asynchronous Javascript And Xml)
홈페이지에서 일부만 변경하고 싶을 때, 별도의 api를 보내는 기술이다.
검색할 때 아래 연관검색 및 검색 기록이 뜨는 경우가 있는데, 그 때 다른 창은 그대로 유지되는데 검색어만 바뀐다. 즉, 페이지 전체를 새로고침하거나 로딩하지 않더라도, 화면의 일부분만을 위한 데이터를 로딩하는 것이다. 바뀌고 있다면 바로 AJAX를 사용한 것이다.
