이 포스팅에서는 JSP 공부를 하는데 있어 부족했던 네트워크 부분을 정리해보려 합니다.
⛓ HTTP 패킷
클라이언트가 서버로 요청할 때 보내는 데이터를 HTTP 패킷이라고 합니다.
이 용어의 의미를 분석해보면, HTTP 프로토콜을 사용하므로 앞에 HTTP가 붙고 네트워크를 통해 전송되는 데이터를 패킷이라 표현하므로
정확히는 네트워크를 통해 전달하기 편하도록 자른 데이터의 전송단위를 패킷이라 함
이 둘을 합쳐 HTTP 패킷이라 부릅니다.
🔗 HTTP 패킷의 구조
HTTP 패킷의 구조는 크게 헤더(header)와 바디(body) 로 나뉩니다.
헤더(header)
HTTP 패킷의 헤더에는 HTTP Method 방식 중 무엇을 사용하였는지, 클라이언트의 정보, 브라우저의 정보, 접속할 URL 등 클라이언트에 관한 정보가 들어갑니다.
바디(body)
HTTP 패킷의 바디는 보통 비어있다가, 특정 데이터를 담아 서버에게 요청을 보낼 수 있습니다
⛓ HTTP Method
사용자(Client)가 브라우저의 주소창에 URL을 입력하고 엔터를 누르면, 원하는 페이지로 이동이 가능합니다.
사용자가 브라우저 주소창에 URL을 입력하고 엔터를 누르면 서버는 이러한 클라이언트의 요청에 응답(웹 페이지로 표현) 하기 위해 처리를 해주어야 합니다.
이처럼 웹 동작방식에서 클라이언트는 웹 브라우저를 통해 서버측으로 요청을 보내게 됩니다. 이때, 클라이언트가 서버로 요청을 보내는 방법을 'HTTP Method'라고 합니다.
HTTP Method는 위와 같이 다양한 방식이 존재하지만 이번 포스팅에서는 가장 일반적인 요청 방식인 GET 방식과 POST 방식을 다뤄보려 합니다.
🔗 GET 방식과 POST 방식
GET 방식과 POST 방식 모두 서버에 요청을 하는 메소드 입니다.
클라이언트가 서버에 요청을 할 때는 자원을 보내야 하는 경우가 존재합니다.
예를 들어 설명해 보겠습니다.
Ex) 홈페이지의 로그인 페이지에서 로그인을 하는 경우
이 경우, ID와 패스워드를 클라이언트가 작성하고, 그 정보를 서버에 요청(전달)하여 클라이언트가 작성한 ID와 패스워드가 올바른지 검사해야 합니다.
이처럼 클라이언트가 서버에 요청할 때, 자원을 보내야 하는 경우가 존재합니다
🔗 GET 방식
Get 방식은 지정된 리소스에서 데이터를 요청하는데 사용됩니다.
클라이언트의 데이터를 URL 뒤에 쿼리스트링(query string) 형태로 붙여서 전달합니다.
ex) www.example.com?ID=hello123&PW=1234
쿼리스트링은 위 예시와 같이 "?키1=값1&키2=값2" 형태로 URL 뒤에 덧붙여진 부분을 말합니다.
?을 통해 URL의 끝을 알리고, 데이터 표현의 시작점임을 표시합니다.
데이터는 key와 value 쌍으로 작성해야 하며, 2개 이상의 key-value쌍 데이터를 보낼때는 구분자&기호로 구분해 주어야 합니다.
GET 방식을 사용하면 데이터가 URL에 붙어서 전달되므로, HTTP 패킷의 헤더부분에 포함되어 서버에 요청(자원 전달)하게 됩니다.
GET 방식의 특징
-
URL에 데이터를 쿼리스트림 형태로 붙여서 요청한다.
-
데이터가 URL에 붙어서 전달되므로, HTTP 패킷의 헤더부분에 포함되어 전송된다.
-
헤더 영역은 암호화 할 수 없으며 URL에 데이터가 노출되어 보안에 취약하다. 따라서, 민감한 데이터를 처리할 때는 GET 방식을 사용해선 안된다.
-
URL의 길이제한이 있다보니 원하는 파라미터를 다 담을 수 없다.
-
GET 요청은 데이터 요청에만 사용된다.(수정불가)
🔗 POST 방식
POST방식은 리소스를 생성/업데이트하기 위해 서버에 데이터를 보내는 데 사용됩니다.
GET 방식은 URL에 데이터를 붙여서 보내는 반면, POST 방식은 HTTP 패킷의 바디영역에 데이터를 넣어서 보냅니다.
따라서, 헤더 영역에 Body의 데이터를 설명하는 Content-Type 이라는 헤더 필드가 들어가서 어떤 데이터 타입인지 명시합니다.
🔗 <form> 태그를 이용한 POST
<form> 태그란?
폼(form)은 쉽게말하면 웹 페이지에서 입력 양식을 의미합니다.
예를 들면, 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼 이라고 할 수 있습니다.
<form> 태그는 폼(form)을 만드는 가장 기본적인 태그로, <form>과 </form> 태그 사이에 여러가지 폼 요소를 넣습니다.
사용자가 폼(아이디나 비밀번호, 텍스트 박스나 체크박스, 라디오 버튼 등 |<input> 태그에 여러 type 속성을 주어, 생성)에 입력을 완료한 뒤, 제출(submit) 버튼을 누르면 백엔드 서버에 양식이 전달되어 해당 정보를 처리하게 됩니다.
이때, 사용자에게 보여지는 텍스트박스나 체크박스, 버튼같은 폼 형태는 HTML로 만들지만, 폼에 입력한 사용자 정보는 JSP나 PHP, ASP 같은 서버 프로그래밍을 이용해 처리합니다.
<form>의 기본 문법
<form action = "사용자가 입력한 데이터를 전송할 서버의 URL" method = "데이터를 전송하는 방법(GET / POST)">
텍스트 필드, 라디오 버튼, 체크박스 등 컨트롤을 생성하는 태그
</form>
<form>태그의 속성
action:<form>태그 안의 내용 즉, 해당 페이지의 폼 영역에서 사용자가 입력한 데이터를 처리해줄 서버 프로그램(URL)을 지정합니다.
method: 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정합니다. method 에서 사용할 수 있는 속성값은 get과 post 입니다.
- get : 데이터를 256 ~ 4096byte 까지만 서버로 넘길 수 있으며, URL에 데이터가 쿼리스트링(query string)형태로 붙어서 전달되는 형태이기 때문에 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있다.
- post : 입력한 내용의 길이에 제한받지 않고, 사용자가 입력한 내용도 드러나지 않는다.
<form> 태그의 기본문법은 위 코드와 같습니다. <form> 태그 안쪽에는 <input>태그의 여러가지 type속성을 통해 텍스트를 입력받는 텍스트 박스(text), 사용자가 원하는 항목을 선택하는 라디오 버튼(radio) 등이 위치합니다. 이러한 요소들을 컨트롤(control) 이라고 부릅니다.
사용자가 해당 컨트롤에 정보를 입력(텍스트를 입력하거나 라디오/체크 박스 클릭 등)한 뒤에, 제출(submit) 버튼을 누르면 <form> 태그의 속성인 action에 기술된 URL로 사용자가 입력한 정보가 전송됩니다. 서버는 이 정보를 받아서 처리합니다.
POST 방식의 특징
-
URL에 변수(데이터)를 노출하지 않고 요청한다.
-
데이터를 Body(바디)에 포함시킨다.
-
URL에 데이터가 노출되지 않아서 기본 보안은 되어있다.
-
길이제한이 없습니다.
💻 GET, POST 방식을 활용한 요청 전송 프로그램
GET 방식과 POST 방식으로 클라이언트의 요청을 ExampleWebInfo.jsp 파일에 전송하는 프로그램
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GET, POST 예제 프로그램</title>
</head>
<body>
<h2>GET 방식을 이용한 클라이언트의 요청 전송</h2>
<a href="./ExampleWebInfo.jsp?eng=Hello&han=안녕"> <!-- <a> 태그를 이용해 링크를 만들 수 있다. <a> 태그의 기본형으로 href 속성을 이용해 연결할 파일이나 링크할 주소를 입력한다. 다음은 텍스트로 이루어진 GET 방식을 이용한 텍스트 링크이다.-->
GET 방식 전송
</a>
<br />
<h2>POST 방식을 이용한 클라이언트의 요청 전송</h2>
<form action="ExampleWebInfo.jsp" method="post">
아이디 : <input type="text" name="id" value=""><br />
성별 :
<input type="radio" name="sex" value="man" />남자
<input type="radio" name="sex" value="woman" checked="checked" />여자
<br />
관심사항 :
<input type="checkbox" name="favo" value="eco" />경제
<input type="checkbox" name="favo" value="pol" checked="checked" />정치
<input type="checkbox" name="favo" value="ent" />연애<br />
자기소개 :
<textarea name="intro" cols="30" rows="4"></textarea>
<br />
<input type="submit" value="POST 방식 전송" />
</form>
</body>
</html>[참고]
https://www.w3schools.com/tags/ref_httpmethods.asp
https://mommoo.tistory.com/60
https://devbox.tistory.com/entry/HTML5-a-%ED%83%9C%EA%B7%B8
