HTTP (Hypertext Transfer Protocol) ?
- 인터넷에서 데이터를 주고받을 수 있는 통신규약.
- 서버-클라이언트 모델을 따르는 프로토콜로 TCP/IP 위에서 동작하며 well-known 포트인 80번 포트를 사용
- http://www.google.com/ http://www.google.com:80 두가지 URL 모두 정상 작동된다.
- 표준 버전은 HTTP/1.1 부터 HTTP/2 HTTP/3이 있다. 여기선 HTTP/1.1의 내용을 정리한다.
HTTP Request & Response
HTTP 프로토콜로 데이터를 주고받을 때, 클라이언트와 서버를 이해해야 한다.
클라이언트란 요청을 보내는 쪽, 웹 관점에서는 브라우저
서버란 요청을 받는 쪽, 일반적으로 데이터를 보내주는 원격지의 컴퓨터
URL (Uniform Resource Locators)
=> 서버에 자원을 요청하기 위한 영문 주소
HTTP 프로토콜 특징
1. 비연결성(Connectionless)
클라이언트와 서버가 한 번 연결을 맺은 후, 클라이언트 요청에 대해 서버가 응답을 마치면 맺었던 연결을 끊어버리는 성질을 말한다.
1) 비연결성의 장점
HTTP는 인터넷 상에서 불특정 다수의 통신환경을 기반으로 설계되었다.
만약 서버에서 다수의 클라이언트와 연결을 계속 유지한다면, 아주 많은 리소스가 발생하게 된다.
=> 연결을 유지하기 위한 리소스를 줄이면 더 많은 연결을 할 수 있으므로 비연결적인 특징을 갖는다
2) 비연결성의 단점
하지만, 서버는 클라이언트를 기억하고 있지 않으므로 동일한 클라이언트의 모든 요청에 대해,
매번 새로운 연결을 시도/해제의 과정을 거쳐야 하므로 연결/해제에 대한 오버헤드가 발생한다는 단점이 있다.
3) KeepAlive
이에 대한 해결책으로 오버헤드를 줄이기 위해 KeepAlive 속성을 사용한다.
KeepAlive는 지정된 시간동안 서버와 클라이언트 간 패킷 교환이 없을 경우, 상태방의 안부를 묻기 위해 패킷을 주기적으로 보내는 것.
이 때 패킷에 반응이 없으면 접속을 끊게 된다.
주기적으로 클라이언트의 상태를 체크한다는 점에서 KeepAlive도 비연결성의 단점을 완벽히 해결해주진 않는다.
KeepAlive 속성이 On 상태라 해도, 서버가 바쁜 환경에서는 프로세스 수가 기하급수적으로 늘어나기 때문에 Keep Alive로 상태를 유지하기 위한 메모리를 많이 사용하게 되므로 주의해야 한다.
2. 무상태 (Stateless)
1) 무상태란?
Connectionless로 인해 서버는 클라이언트를 식별할 수가 없는데, 이를 stateless라고 한다.
예를 들면,
- 쇼핑몰에 접속
- 로그인
- 상품 클릭 -> 상세화면으로 이동
- 로그인
- 주문
- 로그인
- ...
즉, 매번 새로운 인증을 해야하는 번거로움이 발생하게 된다.
2) 상태를 기억하는 방법-쿠키
서버가 클라이언트를 기억하는 방법! -> 브라우저 단에서 쿠키를 저장하기
( HTTP 헤더: set-cookie )
3) 상태를 기억하는 방법-세션
쿠키는 브라우저에 저장되기 때문에 공격자로부터 위변조의 가능성이 높다.
세션은 브라우저가 아닌 서버단에서 사용자 정보를 저장하는 구조이기 때문에 쿠키보다는 안전하다.
하지만 세션도 탈취가 가능하기 때문에 보안에 완벽하다고는 할 수 없다. 또한 서버의 메모리를 많이 차지하게 되고, 만약 동시 접속자가 많은 경우에는 서버 과부화의 원인이 된다.
4) 상태를 기억하는 방법- 토큰을 사용하는 Oath, JWT
쿠키와 세션의 문제점을 보완하기 위해 Token 기반의 인증방식이 도입!
핵심은 보호할 데이터를 토큰으로 치환해서 원본 데이터 대신 토큰을 사용하는 기술이다.
그래서 중간에 공격자로부터 토큰이 탈취당하더라도 데이터에 대한 정보를 알 수 없으므로, 보안성이 높은 기술이라고 할 수 있다!
대표적으로 Oath, JWT가 있다
하지만 꼭 토큰 기반의 인증이 반드시 좋다고는 할 수 없다.
서비스에 따라 기술의 특징을 잘 이해해서 때에 따라 쿠키, 세션, oAuth, JWT 등을 적절히 사용하는 것이 좋다.
3. HTTP 메서드
클라이언트가 서버로 요청을 할 때 어떠한 목적을 갖는 행위인지 HTTP 메서드에 명시한다.
- GET: 자료를 요청할 때 사용
- POST: 자료의 생성을 요청할 때 사용
- PUT: 자료의 수정을 요청할 때 사용
- DELETE: 자료의 삭제를 요청할 때 사용
- HEAD: 정확히 GET과 같지만, 요청에서 헤더만 가져올 때 사용
- TRACE: 클라이언트와 서버 사이의 모든 HTTP 요청/응답 연쇄를 따라가면서 자신이 보낸 메시지의 이상유무 파악
- OPTIONS: 서버가 실제 요청을 보내기 전에 서버를 테스트해보는 용도, 서버가 어떤 메소드를 지원하는지 알아본다.
4. 응답 상태코드
클라이언트가 서버에 요청하면, 서버는 요청에 대한 처리 상태를 숫자로 변환하는데, 이를 응답 코드라 한다.
HTTP 응답의 헤더에 상태코드를 추가해서 응답한다.
- 100 - 109
- 메시지 정보
- 200 - 206
- 요청 성공
- 300 - 305
- 리다이렉션
- 400 - 415
- 클라이언트 에러
- 500 - 505
- 서버 에러
상태 코드에 대한 자세한 정보 : https://developer.mozilla.org/ko/docs/Web/HTTP/Status/100
API 개발 시 올바른 상태 코드를 응답하는 것은 매우 중요하다.
예를 들어, 사용자가 요청 파라미터를 잘못 입력한 경우 잘못된 파라미터로 인해 비즈니스 로직에서 에러가 발생했다고 하여 500 코드를 반환하면 안된다!
사용자가 잘못 입력한 경우므로 403 코드를 반환해야 한다!
5. 헤더
1) 요청 헤더
시작줄을 HTTP/1.1 표준 버전
다음 줄부터 요청 헤더 정보
크롬 주소창에 https://wjdalwjdal6951.tistory.com/ 이라고 치는 것
=> GET https://wjdalwjdal6951.tistory.com/ HTTP/1.1 요청을 보내는 것과 같다.
< CORS, Origin, Access-Control-Allow-Origin에 대한 문서>
- 꼭 읽어야 하는 MDN 공식문서: https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
- 좀 쉽게 설명해주신 사이트: https://evan-moon.github.io/2020/05/21/about-cors/
읽을 사이트: https://ko.javascript.info/fetch-crossorigin#ref-2011
만약, https://javascript.info/page에서 https://anywhere.com/request 에 요청을 보낸다고 가정할 때, 헤더는 다음과 같은 형태가 된다.
GET /request
Host: anywhere.com
Origin: https://javascript.info
...Host
서버의 도메인 네임
Host 헤더는 반드시 하나가 존재해야 한다.
Host: anywhere.com
Origin
요청이 어느 도메인에서 왔는지 명시, 출처
스킴 https , 도메인 javascript.info , 포트로 정의된다
응답 헤더의 Access-Control-Allow-Origin와 관련
요청을 보낸 주소와 받는 주소가 다르면 CORS 문제가 발생하기도 한다.
Origin: https://javascript.info
Content-type
컨텐츠의 타입(MIME 미디어 타입) 및 문자 인코딩 방식(EUC-KR, UTF-8 등)을 지정한다.
Content-Type: text/html; charset=utf-8
=> 현재 메시지 내용이 html 텍스트 문서이고 utf-8 문자 인코딩 방식으로 표현됨.
**참고) POST 혹은 PUT 처럼 클라이언트가 서버에게 폼을 통해서 파일을 업로드할 때는
컨텐츠 타입을 application/x-www-form-urlencoded
Content-Type: application/x-www-form-urlencoded
컨텐츠 타입을 multipart/form-data로 작성 (바이너리 데이터)
-> input이 여러개일 때 하나는 텍스트타입이고, 하나는 이미지타입일 때 2가지 종류의 데이터를 구분해서 넣어주기 위해 multipart 타입이 등장했다.
If-Modified-Since
페이지가 수정되었으면 최신 버전 페이지 요청을 위한 필드
만약 요청한 파일이 이 필드에 지정된 시간 이후로 변경되지 않았다면,
서버로부터 데이터를 전송받지 않는다. 304 상태코드(리다이렉션)를 전송받게 된다.
If-Modified-Since: Sat, 29 Mar 2022 19:43:31 GMT
Cookie
웹서버가 클라이언트에 쿠키를 저장해 놨다면 해당 쿠키의 정보를 이름-값 쌍으로 웹서버에 전송함
2) 응답 헤더
Access-Control-*
Access-Control-Allow-Origin: *
이 응답이 주어진 origin으로부터의 요청 코드와 공유될 수 있는지 여부 확인
Ex) Access-Control-Allow-Origin: https://javascript.info
- 프로토콜, 도메인, 포트 중 하나만 달라도 CORS 에러가 발생
EX) Access-Control-Allow-Origin: *
- 만약 주소를 일일이 지정하기 싫다면 * 으로 모든 주소에 CORS를 허용한다. 하지만 그만큼 보안에 취약해진다.
**관련 헤더
**참고: CORS ( Cross Origin Resource Sharing )란?
서로 다른 도메인 간에 리소스를 활용할 필요가 있을때, 어떤 규칙으로 누구에게 허용할 것인지를 정의하는 HTTP 표준의 일부
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
Set-Cookie
서버에서 클라이언트에게 세션 쿠키 정보를 설정
set-cookie: UserID=JohnDoe; path=/; expires=Mon, 14 Mar 2022 02:05:36 GMT; secure; HttpOnly; SameSite=Lax
자세한 정보: https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Set-Cookie
Last-Modified
서버가 알고있는 가장 마지막 수정날짜와 시각. 저장된 리소스가 이전과 같은지 유효성 검사자로 사용됨
Last-Modified: Tue, 15 Mar 2022 12:45:26 GMT
Location
3xx 상태코드(라다이렉션)일 때 어느 페이지로 이동할지 알려준다
HTTP/1.1 302 Found
Location: /login
=> 위와 같은 응답시 /login 주소로 리다이렉트 한다.
Allow
해당 엔터티에 대해 서버에서 지원 가능한 HTTP 메소드 리스트.
때론, HTTP 요청 메세지의 HTTP 메소드 OPTIONS에 대한 응답용 항목으로 사용
Allow: GET, HEAD
=> 서버에서 제공가능한 HTTP 메서드는 GET, HEAD 뿐임을 알린다.
참고:출처:
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
https://ko.javascript.info/fetch-crossorigin#ref-2011
https://goddaehee.tistory.com/169
https://www.zerocho.com/category/HTTP/post/5b4c4e3efc5052001b4f519b
https://victorydntmd.tistory.com/286
https://gmlwjd9405.github.io/2019/01/28/http-header-types.html
'엘리스 ai 트랙 > FE' 카테고리의 다른 글
| CI와 CD (0) | 2022.03.31 |
|---|---|
| http 1.1 과 http 2 의 차이점 (0) | 2022.03.31 |
| 기본값+rest+spread (0) | 2022.03.07 |
| 구조분해할당 (0) | 2022.03.07 |
| IIFE (즉시 호출 함수 표현식) (0) | 2022.02.28 |