1. GET 과 POST의 차이
클라이언트(유저, 브라우저)와 서버간에 정보를 주고받는 과정을 HTTP(The Hyper Transfer Protocol) 가 가능하게 해준다. 이때 클라이언트가 요청한 정보를 보내는 방식(METHOD)에 여러가지가 있는다 가장 대표적인 것 두가지가 GET 이랑 POST 이다.
GET
GET은 query string같이 url 같은 정보를 보낼때 사용되는 method이다. history에 저장되고 길이 제한이 있으며 정보를 불러들이기만 할뿐 수정하지는 못한다.
HTML 안에서 사용되는 방법은 대략적으로 아래와 같다.
1
2
3
4
5
6
<form
action="서버로 전송한 데이터를 수신할 URL"
method="데이터를 전송하는 방법"
>
텍스트 필드, 라디오 버튼, 체크 박스와 같은 컨트롤을 생성하는 태그
</form>
만약에 아래와 같은 html 코드가 있다고 하면
1
2
3
4
<form action="/report" method="GET">
<input placeholder="what job do you want?" required name="word" />
<button>Search</button>
</form>
input 에 정보를 입력하고 버튼을 눌렀을때 그 정보를 “baseurl/report?word=input info” 의 url에 정보를 담아서 server에 전송한다. 사용자의 정보가 이런식으로 노출되기에 민감한 정보일경우는 POST 방식으로 전송한다.
그리고 이 url은 permalink(고유한 주소체계) 로 사용가능하다.
html_tutorials?nickname=yeong&age=12 라는 url 이 있다고 하면 ?뒤에 붙어있는 부연정보가 perlink 로 사용이 가능한것이다.(또한 permalink 는 & 로 구분가능하다.) 그럼 그 permalink 에 의해 나만의 정보가 담긴 고유의 url이 탄생가능하다.
POST
POST는 정보를 서버에 보내어 어떤 자료를 업데이트하거나 만들어낼때 사용되는 method이다. GET 처럼 URL 에 정보가 표시되지는 않는다. 개발자 도구에 NETWORK 탭에 HEADERS 안에 BODY의 형태로 담겨 표시가 된다. 따라서 노출되지 않으므로 보안상 더 안전하다.
아래의 예제를 통해 더 자세히 알아보자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>HTML</title>
<style>
* {
font-size: 16px;
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<form method="post" action="form-action.php">
<p>
<label>Input Color : <input type="text" name="color" /></label>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
여기서 input에 blue를 입력했다고 했을때 /form-action.php 파일로 정보가 숨겨진채 전송됨. 아래는 php파일이다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
$color = $_POST['color'];
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>HTML</title>
<style>
* {
font-size: 16px;
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Submitted</h1>
<p>
Your color is
<?php echo $color ?>.
</p>
</body>
</html>
그럼 화면엔
Submitted
Your color is blue.
라고 뜨게 되는 것이다.
출처:
https://devbox.tistory.com/entry/HTML5-a-태그 [장인개발자를 꿈꾸는 :: 기록하는 공간] // https://www.codingfactory.net/11576