웹사이트에서는 클라이언트와 서버가 통신을 한다.
서버에서 필요한 데이터를 가져오고, 클라이언트에서 변경할 데이터를 서버에 다시 보내준다. 데이터를 주고받기 위해서는 서로 어떤 형식으로 보내줄 것인지 약속을 정해야하는데, 그것이 바로 HTTP이다.
HTTP(Hyper Text Transfer Protocol)
컴퓨터끼리 어떤 방식으로 웹 문서를 주고받을지 정한 통신 규약
HTTP의 특징 _ Stateless
통신 과정을 이해하면서 모호한 부분이 있었는데, 이 특징을 이해하고 나서 request를 보내는 방식이 이해가 되었다.
Stateless는 각 HTTP 통신은 독립적이라는 뜻이다. 즉, 통신한 결과를 보존하지 않는다는 뜻이다.
👀 예를 들어, 로그인을 해야 영상을 볼 수 있는 사이트가 있다.
로그인 페이지에서 유저는 로그인에 성공했고, 영상을 보는 페이지로가서 서버가 영상을 보내주기를 바랄 것이다.
하지만 서버는 내가 전에 로그인에 성공했는지 실패했는지를 모르기 때문에, 영상을 보내주지 않는다. 따라서 서버에게나 이미 로그인에 성공했어!라는 메시지(Token)을 같이 보내주어야 영상을 보내준다.
HTTP 구조
HTTP의 구조는 크게 StartLine, Headers, Body 세 부분으로 나뉜다.
Start Line
Headers
요청에 대한 부가적인 정보를 메타데이터를 담는 부분
user-agent, connect, cookie 등
Body
어떤 것을 요청하는지 그 실질적인 내용을 담는 부분, {key: value} 형식
Reqeust를 보낼때, StartLine 맨 앞에 HTTP 메소드를 표기해준다.
메소드에 3가지 종류가 있는데, 상황에 따라 다른 메소드를 쓴다.
HTTP Request Method
1. GET
Request로 필요한 정보를 요청하면, response가 성공했을 경우,
jSON형태로 결과값 전송
Request: GET /shop/cart HTTP/1.1
Response: HTTP/1.1 200 SUCCESS
result = {
[
name: 'MacBook Pro',
price: 280,
quantity: 1,
],
[
name: 'iPhone 10',
price: 90,
quantity: 2,
]
}2. POST
Request로 생성 / 수정할 데이터를 jSON 형태로 보내면,
업데이트 성공했을 시 request로 success 전송
Request: POST /shop/cart HTTP/1.1
result = {
name: 'Apple Watch 2',
price: 50,
color: 'spacegray'
}Response: HTTP/1.1 201 SUCCESS
3. DELETE
Request로 삭제할 데이터를 담아서 보냈을 때,
서버에서 데이터 삭제에 성공하면 response로 success 전송
Request: DELETE /shop/cart HTTP/1.1
Response: HTTP/1.1 201 SUCCESS
Status Code
서버가 Request에 대한 Response를 보내줄 때, 항상 상태코드를 붙여서 오는 것을 확인할 수 있다. Status Code에 따라 성공인지, 어떤 에러가 발생했는지 다르다. 통신에 문제가 있는지 없는지 파악하기 위해 상태코드를 알고 있어야 한다.
[ Sucess ]
200: OK - 요청 성공
201: Created - 새 리소스 작성 성공
[ Client Error ]
400: Bad Request - 잘못된 요청 (request 구문 인식 실패)
401: Unauthorized - 요청에 대한 권한이 없음
403: Forbidden - 서버가 요청 거부
404: Not Found - 요청한 페이지 찾을 수 없음
[ Server Error ]
500: Internal Server Error
401 vs 403
위의 코드들 중 401과 403의 차이가 모호해서 더 자료를 찾아보았다.
401 (Unauthorized)
- Client가 인증되지 않았거나, 유효한 인증 정보가 부족하여 요청이 거부됨
- 유효하지 않은 인증 토큰일 경우
- (ex) 로그인하지 않은 상태에서 나의 결제내역을 요청한 경우
403 (Forbidden)
- Client가 인증은 되었으나, 페이지에 대한 접근 권한이 없어 요청이 거부됨
- 토큰은 있지만, 토큰을 가지고 있는 유저의 범위(scope)가 아닌 경우
- (ex) 로그인은 했지만, 다른 사람의 장바구니를 요청하는 경우
웹 사이트를 만들 때 프론트엔드 개발자의 작업은 크게 세가지로 나뉜다고 생각한다.
레이아웃 만들기, 페이지 동작 시키기, 그리고 통신이다.
아무리 예쁘게 웹 페이지를 만들어도 유저가 필요한 데이터를 가져오지 못하면 무슨 소용일까싶다 😥
통신에 대해 자세히 공부해 본 적이 없어서 개념들이 많이 헷갈렸었고, 그래서 더 어렵게 느껴졌었다. 통신만 생각하면 한숨이 나오는 정도...?
이번에 공부하면서 깨달은 점은 OO의 특징 부분이 정말 중요하다는 것이다. 여태까지 특징 부분은 '아 그렇구나' 하고 그냥 넘어갔는데, 그 개념의 특징을 정확히 이해해야 작동하는 방식을 완벽하게 이해할 수 있었다.
앞으로 특징... 놓치면 안되겠다🤔
