안녕하세요. 건브로입니다.
오늘은 HTTP 통신에 대해서 한 번 다루어 보도록하겠습니다.
1. HTTP란 무엇인가?
HTTP란 Hyper Text Transfer Protocol의 약자이다.
즉, HTML 문서를 전송하기 위한 프로토콜이다.
그리고 클라이언트와 서버의 약속이라고 봐도된다.
2. HTTP 메세지의 구조는 어떻게 될까?
먼저 HTTP 메세지 의 구조는 크게 두 가지로 나뉘어진다.
바로 그 두 가지가 헤더와 바디이다. 먼저 예시 코드를 보여주겠다.
<HTML>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
/>
<link rel="stylesheet" href="./main.css" />
<script src="/main.js" defer></script>
<title>통신에 대해서 연습</title>
</head>
<body>
<form action="" method="POST">
<h1>로그인</h1>
<br/>
<br/>
<section>
<div id="login-container">
<label for="id">
<input type="text" id="id" name="id" placeholder="ID" /> </label
><br />
<label for="password">
<input
type="password"
id="password"
name="password"
placeholder="PASSWORD"
/>
</label>
</div>
<div id="submit-container">
<input type="submit" id="loginButton" value="로그인" />
</div>
</section>
</form>
</body>
</html>
<CSS>
form {
display: flex;
flex-direction: column;
align-items: center;
}
form section{
display: flex;
justify-content: center;
}
form section #submit-container{
width: 100%;
}
form section #submit-container input{
width: 100%;
height: 100%;
}
<Javascript>
const button = document.querySelector("#loginButton");
const id = document.querySelector("#id");
const password = document.querySelector("#password");
button.addEventListener("click", (e) => {
sendData();
e.preventDefault();
});
const sendData = async () => {
const idValue = id.value;
const passwordValue = password.value;
const loginData = {idValue, passwordValue};
const response = await fetch("/api/login", {
method: "post",
body: JSON.stringify(loginData)
});
};
1) 헤더
헤더의 구조는 요청 헤더와 응답 헤더로 나뉘어진다.
- 요청 헤더:
시작라인에는 POST /api/login HTTP/1.1이 있다.
시작라인은 순서가 있다. 순서대로 설명해주겠다.
1. POST는 HTTP 전송 방식이다. 즉 입력 데이터 전송 방식이다.
2. /api/login는 URL 입력 데이터가 전송될 서버측 파일의 경로이다.
그리고 뒤에는 추가적으로 쿼리 스트링이 올 수도 있다.
여기 URL에는 서버측 파일의 경로라기 보다는 서버와 URL을 맞춘느낌이라고 생각하면 된다.
3. HTTP/1.1은 HTTP 버전을 의미한다.
나머지 라인에는 말 그대로 나머지이다.
다는 설명 못하겠지만, 중요한 것들만 설명하겠다.
1. Host: 서버의 IP 주소이다.
2. User-Agent: 브라우저 버전이다.
3. Accept: 브라우저에서 처리 가능한 데이터 형식이다. MIME 타입으로 표시해야한다.
4. Referer: HTTP 요청을 생성한 호출자 주소라고 생각하면 된다.
5. Accept-Encoding: 브라우저에서 지원 가능한 압축 형식이다.
6. Accept-Language: 브라우저에서 지원 가능한 언어 종류다.
- 응답 헤더:
시작라인에는 HTTP/1.1 405 Method Not Allowed가 있다.
처음에는 HTTP 버전이 나오며 뒤에는 응답코드가 나온다.
나머지 라인에도 여러가지 있다. 일단 이것도 중요한 내용만 보겠다.
Content-Type: 바디의 컨텐츠 형식이다. 바디의 컨텐츠에는 주로 이게 어떤 파일인지,
어떻게 인코딩 지원할지 다루는 것이다.
Content-Language: 말 그대로이다. HTML의 HTML태그의 속성인 lang="ko"이런 것처럼
언어를 정하는 것이다. 구글에서 페이지 로드할 때, 한글로 번역할지 묻게 하는 것은 이것이 정해주는 것이다.
Content-Length: 바디 컨텐츠의 바이트 단위 길이 이다.(서버가 없어서 응답이 없어서 지금은 0인 것이다.)
Date: 응답 메세지 생성 시간이다.
2) 바디
바디의 구조는 요청 바디, 응답 바디로 있다.
요청 바디는 POST 방식일 때 아이디, 비밀번호 같은 값들을 넣어줬을 때 보일 것이다.
그리고 응답 바디는 서버에서 줄 바디가 있을 때 있을 것인데,
현재 내가 만든 파일은 서버가 없어서 응답 바디가 없을 것이다.
HTTP 메세지 구조는 HTML 구조랑 비슷하다고 생각하면 된다.
HTML에 head태그 안에 meta태그, link태그, script 정보들이 있고,
body태그 안에는 눈에 보이는 요소들이 있다.
HTTP 메세지 방식도 헤더와 바디로 나뉘어진다.
끝!
'관심있는 언어들 > Javascript' 카테고리의 다른 글
| [Javascript]Array 내장 함수 (0) | 2021.07.07 |
|---|---|
| [Javascript] 자주 사용하는 ES6 문법 (0) | 2021.07.05 |
| [자바스크립트] Redux (0) | 2021.02.23 |
| callback, Promise, async & await (0) | 2021.01.02 |