웹 브라우저의 Request

웹 브라우저에서 서버에 HTTP 요청을 보내는 방법들에 대해서 알아봅니다.
HTTP Request, 웹 브라우저


주소창을 통한 요청

주소창을 통한 요청주소창을 통한 요청

주소창에 URL을 입력하면 웹 브라우저는 해당 URL로 GET Request를 보냅니다.

새로고침을 통한 요청

새로고침하면 이전의 요청을 다시 보냅니다.

링크를 통한 요청

링크를 통한 요청링크를 통한 요청

웹 페이지에서 <a> 태그로 구현되는 링크를 클릭하면 href 속성에 명시한 URL로 GET Request를 보냅니다.

폼을 통한 요청

폼을 통한 요청폼을 통한 요청

<form action="Server URL" method="HTTP method" enctype="Body Content-Type">

웹 페이지의 <form> 태그로 구현되는 양식에 데이터를 입력하고 전송하면, 웹 브라우저는 폼 태그의 method 속성에 명시된 HTTP 메소드로, action 속성에 명시된 URL로 Request를 보냅니다. 이 때 폼 태그 내부에 <input>, <select>, <textarea> 와 같은 태그에 있는 값들이 enctype 속성을 기반으로 인코딩되어 전송됩니다.

GET

method=’GET’ (기본값)

<form action="http://benzen.io" method="get">
  <input type="text" placeholder="key1" name="key1" value="val1">
  <input type="text" placeholder="key2" name="key2" value="val2">
  <input type="file" name="key3">
  <input type="submit">
</form>

Form GET RequestForm GET Request

폼 데이터를 GET 메소드로 보내면, 폼 input들의 name 속성들을 기반으로 ?name1=value2&name2=value2 꼴의 QueryString이 요청 URL의 뒷 부분에 붙게 됩니다. 또한 파일을 첨부한 경우에도 오직 파일명만 전송되는 것을 알 수 있습니다. 이때는 Request의 바디가 존재하지 않으며, 폼 태그의 enctype 속성은 무시됩니다.

POST (urlencoded)

method=’POST’, enctype=’application/x-www-form-urlencoded’ (기본값)

<form action="http://benzen.io" method="post" enctype="application/x-www-form-urlencoded">
<input type="text" placeholder="key1" name="key1" value="val1">
<input type="text" placeholder="key2" name="key2" value="val2">
<input type="file" name="key3">
<input type="submit">
</form>

From POST Request (urlencoded)From POST Request (urlencoded)

폼 데이터를 POST 메소드로 보내면, 폼 데이터는 바디에 첨부됩니다. 이 때 폼 태그에 enctype을 명시하지 않을 경우 폼 데이터의 인코딩 방식(Content-Type)은 기본적으로 application/x-www-form-urlencoded를 따릅니다. urlencoded 방식은 querystring의 형태와 비슷합니다. 이 때도 파일을 첨부한 경우에 오직 파일명만 전송되는 것을 알 수 있습니다.

POST (multipart/form-data)

### method='POST', enctype='multipart/form-data'
<form action="http://benzen.io" method="post" enctype="multipart/form-data">
<input type="text" placeholder="key1" name="key1" value="val1">
<input type="text" placeholder="key2" name="key2" value="val2">
<input type="file" name="key3">
<input type="submit">
</form>

Form POST Request (multipart/form-data)Form POST Request (multipart/form-data)

폼 데이터를 POST 메소드로 보내면서, 폼 태그에 enctype을 multipart/form-data로 명시 할 경우 첨부된 바이너리 파일의 내용이 인코딩되어 모두 전송됩니다. (개발자 도구의 네트워크에서는 생략됩니다.)

POST (text/plain)

<form action="http://benzen.io" method="post" enctype="text/plain">
<input type="text" placeholder="key1" name="key1" value="val1">
<input type="text" placeholder="key2" name="key2" value="val2">
<input type="file" name="key3">
<input type="submit">
</form>

Form Post Request (text/plain)Form Post Request (text/plain)

폼 데이터를 POST 메소드로 보내면서, 폼 태그에 enctype을 text/plain으로 명시 할 수 있습니다. 이 때도 파일이 첨부된 경우 파일명만 전송되며, 이 인코딩 타입은 디버깅 용도로 쓰입니다.

폼 전송 방식의 선택 기준

방식기준예시
method="GET"폼 데이터에 파일이 첨부되지 않았으며
폼 데이터가 URL에 쿼리스트링으로 노출되어도 상관 없거나
노출되는 편이 좋을 때
게시판 검색 폼
/bbs.php?keyword=computer&page=1
method="POST"폼 데이터에 파일이 첨부되지 않았으며
폼 데이터가 URL에 노출되지 않았으면 할 때
쇼핑 몰 주문 폼, 로그인 폼 등
method="POST"
enctype="multipart/form-data"
폼 데이터에 파일이 첨부될 때프로필 사진 업로드

태그를 통한 요청

한 웹 페이지를 렌더링하는데 총 62개의 Request를 보냄한 웹 페이지를 렌더링하는데 총 62개의 Request를 보냄

<link href="./somepath/something.css" rel="stylesheet" type="text/css">
<link href="../somepath/something.png" rel="icon" type="image/png">
<script src="https://anotherhost/somepath/something.js"></script>
<iframe src="./somepath/something.html"></iframe>
<object data="/somepath/something.pdf"></object>
<img src="http://anotherhost/somepath/something.jpg">
<video src="../somesomepath/somepath/something.mp4">
...

브라우저가 최초의 HTML 문서를 전송받고 이를 해석하는 도중에 위와 같이 다른 URL의 자원을 참조하는 태그를 만날 경우에 새로운 HTTP Request를 보내게 됩니다.

JavaScript를 통한 요청

AjaxAjax

AJAX(Asynchronous JavaScript and XML)는 페이지 이동 없이, JavaScript를 이용해 동적으로 HTTP Request를 보내는 기술입니다. 링크나 폼을 통해 Request를 보낼 경우에는 Response를 받으며 페이지를 전환하게 되지만 JavaScript를 이용하면 페이지 전환 없이 데이터를 요청하고 응답 받을 수 있습니다. 상세한 내용은 추후에 다룹니다.

목차
4. 웹 백엔드
5. 데이터베이스
저자

김동욱

개발 경력 약 10년, 전문 분야는 웹 및 각종 응용 소프트웨어 플랫폼입니다. Codeflow를 운영하고 있습니다.

2018년 09월 27일 업데이트

지원되지 않는 웹 브라우저거나 예기치 않은 오류가 발생했습니다.