node.js 입문 #11

HTML의 form 기능

사용자에게 데이터를 입력받아 이를 웹 서버로 전송하고, 그 결과에 따라 웹서버가 새로운 웹페이지를 띄워주는 기능을 말한다.

<p><input type="text"></p>
<p>
    <textarea></textarea>
</p>
<p>
    <input type="submit">
</p>

위 코드로 데이터를 입력받는 간단한 웹페이지를 생성할 수 있다.

• p : 줄바꿈을 위해 그룹을 묶어주는 태그

• input type="text" : 한줄짜리 입력칸

• textarea : 여러줄짜리 입력칸

• input type="submit" : 제출버튼

• 입력한 데이터를 웹서버로 전송하기 위해 form태그로 감싸주기

<form>
    <p><input type="text"></p>
    <p>
        <textarea></textarea>
    </p>
    <p>
        <input type="submit">
    </p>
</form>

• 어느 주소의 웹서버로 전송할지 지정하기 : action 속성
  <form action="http://localhost:3000/process_create">
• 웹서버에서 전송된 데이터를 처리하기 위해서 각 control에 이름을 지정해줘야 한다.
  (❗ control : html의 form기능에서 사용자에게 데이터를 입력받는 태그들을 의미한다)

<form action="http://localhost:3000/process_create">
    <p><input type="text" name="title"></p>
    <p>
        <textarea name="description"></textarea>
    </p>
    <p>
        <input type="submit">
    </p>
</form>

• 각 control에 내용을 입력하고 제출 버튼 클릭하면
  
• 아래와 같은 주소로 웹페이지가 이동한다
  

즉, 사용자의 입력에 따라 주소의 QueryString이 생성되고, 그 주소로 이동하게 되는 것을 볼 수 있다.

Form : 각 control에 데이터를 입력하고 submit 버튼을 눌렀을 때, action 주소의 서버로, 데이터를 QueryString의 형태로 전송하는 html의 기능

---

💡하지만, 사용자의 입력이 그대로 주소에 나타나는 것은 보안, 관리상 문제가 발생하기 쉽다.

• "읽기"의 경우, url에 관련 데이터가 queryString에 담겨도 무관하다.
• "쓰기, 수정, 삭제"의 경우, url에 관련 데이터가 담기면 안되기 때문에 숨겨야 한다.

QueryString 숨기는 법

• method 속성 사용하기
  <form action="http://localhost:3000/process_create" method="post">
• method="get" : url의 QueryString에 사용자가 입력한 데이터를 담는 방식
• method="post" : 사용자가 입력한 데이터를 숨기기 위해 url의 QueryString에 데이터를 담지 않는 방식
  이라고 할 수 있다.

method="get" : (default, 생략가능) 읽기 전용
method="post" : 수정 전용

이라고 생각하면 쉽다.

따라서,

<form action="http://localhost:3000/process_create" 
method="post">
    <p><input type="text" name="title"></p>
    <p>
        <textarea name="description"></textarea>
    </p>
    <p>
        <input type="submit">
    </p>
</form>

최종적으로 이와 같은 html을 생성하고, 각 컨트롤에 데이터를 입력하여 submit하여도

이와 같이 QueryString이 포함되지 않은 url로 이동하게 된다!