이전 포스팅에 이어서 '생활코딩' 사이트의 HTML편을 공부한 내용을 정리한다. 클라이언트에서 서버로 데이터를 읽어오는 방식인 method 강의를 공부하였고 그 중 GET과 POST에 대한 내용을 정리하였다.
1. GET
이전 HTML 포스팅을 통해 form,text area,checkbox와 같은 양식을 통해 서버에 데이터를 전송할 수 있다는 것을
공부했다. 아래와 같이 드롭박스로 선택한 값이 html의 form action="지정링크"로 값이 전달되는 경우를 예시로 들기도 했다.
(참고포스팅 : 2021.05.01 - [코딩/Web & Java Script] - [웹코딩] HTML - 5 : dropdown, radio/checkbox)
위와 같이 ? 뒤에 변수 이름과 값을 넣어서 보내는 방식을 GET 방식이라고 한다. (다른 블로그를 참고해보니 이러한 형식을 Query String 형식이라고 하는 것 같다.) 클라이언트에서 서버로 데이터를 보낼 때, URL에 보내야할 정보를 명시적으로 표기하는 방식이다. 아래는 위 드롭박스를 나타낸 html 코드의 일부 코드이다.
<form action="http://localhost/color.php">
사실 정확히 표기하자면 오른쪽에 method = "get"을 붙여줘야 한다. method 값의 "get"은 default값이기 때문에 따로 쓰지 않으면 위와 같이 보낼 정보가 URL에 명시된다.
<form action="http://localhost/color.php" method = "get">
공부하면서 안거지만 현재 tistory 글쓰기 작성 페이지를 나타내는 URL에서 나오는 정보가 get 방식인 것 같다.
2. POST
위에서 다뤘던 get 방식은 URL에 변수와 값을 명시적으로 표기하여 서버에 전달한다고 하였다. 근데 만약 Password 같이 명시되면 안되는 정보를 보내야할 경우는 어떻게 해야 할까???
아래 예시 코드를 작성해보았다.
<예시 코드>
<html>
<head>test html</head>
<body>
<form action="http://localhost/upload.php">
<input type="password" name="pw">
<input type="submit">
</form>
</body>
</html>
임의의 비밀번호를 입력하고 제출버튼을 클릭해보면 아래와 같이 URL에 비밀번호가 표기 된다. pw는 html 코드에서 설정했던 name(변수)이고 form에서 비밀번호로 입력한 'secret is secret.'이 URL에 명시가 된다.
그럼 만약 비밀번호와 같은 정보는 어떻게 서버에 전달해야할까?? 그 정보는 POST 방식으로 전달해야 한다. 위 코드의 method를 'post'로 바꿔 다시 실행해보면 아래와 같이 URL에서 PW 정보가 사라진다.
<예시코드>
<html>
<head>test html</head>
<body>
<form action="http://localhost/upload.php" method="post">
<input type="password" name="pw">
<input type="submit">
</form>
</body>
</html>
get과 post의 가장 큰 차이점은 위와 같이 서버로 전송할 때 어떤 방식으로 전송되는지인 것 같다. get은 Query string 형식으로 URL에 전달하는 값을 포함시킨다. POST 방식은 URL이 아닌 HTTP 패킷에 그 값을 넣어 전달한다고 한다. 이 데이터를 확인하기 위해선 패킷의 정보를 열어야 한다. 자세한 내용은 하단의 참고링크1 티스토리 블로거분께서 자세히 정리해주셨기에 글 하단에 링크를 기재한다.
사용 용도도 조금은 다른 것 같다. 어떤 게시글의 특정한 페이지를 조회할 경우는 get 방식을 사용한다. URL에 게시글에 대한 정보를 포함시키면 편리하기 때문이다. 전송할 데이터가 긴 경우(블로그같이 긴 글), 로그인 비밀번호와 같이 보안이 필요한 정보는 post 방식을 사용하는게 적합하다고 한다.
생활코딩 강의내용에 따르면 get 방식으로 진행할지 post 방식으로 진행 할지는 서버 개발자의 권한이라고 한다. 서버 개발자가 '이 정보는 get 방식으로 진행해주세요'라고 하면 프론트 엔드 개발자가 해당 정보를 method를 get으로 설정하여 개발을 진행하는 것
같다.
※ 참고링크
1. GET VS POST - hyoje420.tistory.com/24
2. '생활코딩 HTML 수업편' : hidden field - www.opentutorials.org/course/2039/10962
3. '생활코딩 HTML 수업편' : method - www.opentutorials.org/course/2039/10965
'코딩 > Web' 카테고리의 다른 글
| [웹코딩] CSS 기초 1편 : HTML에 CSS 적용하기 (1) | 2021.05.25 |
|---|---|
| [웹코딩] HTML(Hyper Text Markup Language) - 파일업로드, PHP (0) | 2021.05.16 |
| [웹코딩] HTML(Hyper Text Markup Language) - 5 : dropdown, radio/checkbox (0) | 2021.05.01 |
| [웹코딩] HTML(Hyper Text Markup Language) - 4 : form, textarea (0) | 2021.04.25 |
| [웹코딩] VS Code의 HTML 파일 개발 환경 설정 방법 (0) | 2021.04.22 |
