폼 (form)
로그인을 위해서 아이디/비밀번호를 입력할 때나
회원가입을 하기 위해서 개인정보를 입력할 때
블로그나 게시판에 글을 작성하거나, 파일을 전송할 때
폼을 이용해서 서버에 전송합니다.
먼저, 폼을 이해하기 위해서는 우선 서버와 클라이언트 개념을 이해해야합니다.
서버: 정보를 제공하는 쪽
클라이언트: 정보를 제공 받는 쪽
예를 들어,
웹브라우저의 주소창에 티스토리 주소인 https://www.tistory.com/을 입력하면
웹 브라우저는 tistory.com 에 해당하는 컴퓨터에게 컨텐츠를 요청한다.
이 맥락에서 웹브라우저는 정보를 요청하는 쪽, 제공받는 쪽이므로 클라이언트가 되며, tistory.com의 컨텐츠를 제공하는 컴퓨터는 정보를 제공하기떄문에 서버가 된다.
사용하는 예를 들자면,
<form> 태그 안쪽에 텍스트를 입력 받는 텍스트 박스나, 패스워드를 입력받는 패스워드 박스 등이 위치한다.
이러한 요솔들을 컨트롤(control)이라고 부른다.
<form action = "서버로 전송한 데이터를 수신할 URL" method="데이터를 전송하는 방식 name="폼의 이름">
텍스트 박스, 비밀번호 박스, 라디오 버튼, 체크 박스와 같은 컨트롤 생성 코드
</form>사용자가 전송 버튼을 누르면 <form> 태그의 속성인 action에 기술된 URL로 사용자가 입력한 정보를 전송한다.
서버는 이 정보를 받아서 저장하거나, 계산된 결과를 보여주는 등의 작업을 수행한다.
그렇다면, method라는 속성은 무슨 뜻일까?
method : 사용자가 입력한 데이터를 전송하는 방법으로 아래와 같은 방식이 있다.
get : action에 입력한 URL에 파라미터의 형태로 전송
?는 URL과 파라미터를 구분하는 구분자이고,
&는 각각의 파라미터를 구분하는 구분자이며,
각각의 파라미터의 이름(key)과 값(value)을 = 로 구분합니다.
post : header의 body에 포함해서 전송
(사진은 위의 내용과는 무관한 내용이지만 지금은 비슷한 형식을 통해 서버에 전송된다고 생각하자.)
끝으로, 두 방식의 차이점을 알아보자.
GET
- URL에 정보가 담겨서 전송
- 전송할 수 있는 정보의 길이 제한
- 퍼머링크로 사용 O(인터넷에서 특정 페이지에 영구적으로 할당된 URL 주소를 뜻)
POST
- header의 body에 담겨서 전송
- URL 상에 전달한 정보가 표시되지 않음.
- GET에 비해서 보안상 약간의 우위에 있다. (사실상 동일)
- 전송할 수 있는 데이터의 길이 제한 없음.
- 퍼머링크로 사용 X
- 서버 쪽에 어떤 작업을 명령할 때 사용(데이터의 기록, 삭제, 수정 등)
댓글