Node.js.30.HTML-form

현재까지는 data 폴더에 파일을 생성하면 파일을 감지하여 목록을 만들어주고, 또 우리 대신 HTML 코드를 생성해주는 웹 애플리케이션을 만들었다.

하지만 data 폴더에 접근할 수 있는 것은 자기 자신 뿐이므로, 컨텐츠 생성하는 것은 사이트 소유자만 할 수 있다는 한계가 있다. 우리는 누구나 모두 웹에 접속하여 데이터를 전송하고, 전송한 데이터를 data 디렉토리 안에 생성하고 싶다.

앞으로 사용자가 컨텐츠를 웹을 통해 생성, 수정, 삭제하는 방법을 알아보자.

 

---

HTML-form

사용자가 서버로 데이터를 전송하는 방식

 

한 줄 입력하기

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

 

여러 줄 입력하기

<p><textare></textare></p>

 

전송버튼

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

데이터를 전송하기 위해서는, 정보를 어디로 보낼 것인지 주소가 필요하다.

<form action="http://localhost:3000/process_create">
  <p><input type="text"></p>
  <p><textarea></textarea></p>
  <p><input type="submit"></p>
</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>

이제 리로딩한 후 다음과 같이 입력하고 제출버튼을 눌러보자.

다음과 같이 url주소가 뜬다. 즉, query string이 만들어진 것을 볼 수 있다.

 

즉, form 태그는 form안에 각 control들에 사용자들이 입력한 정보를 submit버튼을 눌렀을 때, action속성이 가리키는 서버로 query string 형태로 데이터를 전송하는 HTML의 기능이다.

 

---

process_create가 아직 없기 떄문에 본문에 Not found가 떴지만, 웹 애플리케이션에게 title과 description값을 전달하는 것은 좋은 방법이 아니다.

특정 웹페이지를 사용자가 가져갈 때, http://localhost:3000/?id=HTML 즉 id=HTML이라고 했다. 이는 좋은 방법이다. 주소상에 우리가 필요한 데이터가 포함되어 있어야만 이 주소를 카피하여 친구에게 전송하여도 같은 화면에 올 수 있기 때문이다.

하지만 주소에 데이터가 포함되어 있다면, 무심코 주소를 카피하여 누군가에게 보냈을 때 그 사람이 클릭하여 들어오게 되면 우리의 서버에 있는 정보가 수정, 삭제, 생성되는 사건이 발생할 수 있다.

따라서 서버에서 데이터를 가져올 때, 즉 get할 때에는 무조건 ?id=HTML과 같이 query string을 사용하고,

서버에서 데이터를 생성, 수정, 삭제할 때에는 필요한 데이터를 url로 보내면 절대로 안된다. 눈에 보이지 않는 방식으로 보내야 한다. 이를 위해 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>

웹 사이트를 리로드한 후 다시 제출해보면 url에 query string이 뜨지 않는다!

사람 눈에 들어오지 않는 방식으로 은.밀.하.게 서버로 전송하는 것이다. 이렇게 하면 엄청 큰 데이터도 전송할 수 있다.

반면 url로 데이터를 전송할 때에는 url은 무한히 긴 데이터를 수용하지 않기 때문에 나중에 데이터가 잘리는 문제가 발생할 수도 있다. 따라서 서버로부터 사용자가 데이터를 가져올 떄(get)에는 get방식을 사용해야 한다. method="get"을 추가하면 된다. 이는 default값이므로 아무 것도 뒤에 작성하지 않았을 때 get방식을 사용하는 것이 된다.

 

 

---

오늘의 핵심

★ 사용자가 데이터를 수정, 삭제, 생성할 때에는 반드시 method="post"를 작성해야만 한다!