[Node.js] 9. form

form(폼)

우리가 회원가입을 하거나, 하는 동작에는 아이디나 패스워드 같은 정보를 서버로 전송하는 작업을 수행합니다.

서버 쪽에선 우리가 전송한 데이터가 올바른지 등의 여부를 판단한 후 그에 맞는 대응을 합니다.

이렇게 클라이언트가 특정 데이터를 서버로 전송하려 할 때 이를 처리할 수 있도록 도와주는 것을 폼이라고 합니다.

---

간단한 예를 들어 설명하면 아래의 코드 처럼 input type에 따라 내가 필요한 데이터를 입력 받을 수 있습니다.

이는 각각의 name에 따라 따로 저장 되지만, 아직은 서버로 데이터를 전송 할 수 없습니다.

    <p>아이디
        <input type = "text" name = "ID">
    </p>
    <p>패스워드
        <input type = "text" name = "PS">
    </p>
    <p>
        <textarea name = "description"></textarea>/>
    </p>
    <p>
        <input type = "submit">
    </p>

 

---

이는 아직 입력 박스를 띄워놓기만 했을 뿐 서버로 전송한다는 명령이 없기 때문인데 이를 도와주는 것이 form 입니다.

위의 코드에서 form을 추가하게 되면 아래와 같은 코드가 됩니다.

<form action = "http://localhost:3000/process create">
    <p>아이디
        <input type = "text" name = "ID">
    </p>
    <p>패스워드
        <input type = "text" name = "PS">
    </p>
    <p>
        <textarea name = "description"></textarea>/>
    </p>
    <p>
        <input type = "submit">
    </p>
</form>

 

이렇게 코드를 수정하게 되면 "process create"라는 페이지에 쿼리스트링의 형태로 데이터가 전송되게 됩니다.

 

---

2023-03-17 내용 추가

주의할 점

위의 코드처럼 form에 담아 데이터를 전송하게 되면 1가지 문제점이 발생합니다.

URL에 쿼리스트링의 형태로 데이터가 들어가, URL 수정 시 데이터가 노출, 변될 위험이 발생합니다.

따라서 form으로 데이터를 서버에 전송할 때는 쿼리스트링을 보이지 않게 수정해야 합니다.

 

---

Method

form에는 메소드가 존재합니다.

method는 크게 get과 post로 나눠지는데 위의 방식 처럼 쿼리스트링의 형태로 노출 되는 것은 메소드의 get 구조입니다.

form의 메소드는 get을 디폴트로 삼고 있어서 위와 같이 데이터가 노출되는 것으로 메소드를 post로 수정하면

위의 문제를 해결 할 수 있습니다.

<form action = "http://localhost:3000/process create" method="post">
    <p>아이디
        <input type = "text" name = "ID">
    </p>
    <p>패스워드
        <input type = "text" name = "PS">
    </p>
    <p>
        <textarea name = "description"></textarea>/>
    </p>
    <p>
        <input type = "submit">
    </p>
</form>

 

메소드를 수정함으로써 아래의 주소처럼 데이터가 보이지 않게 수정 할 수 있습니다.

 

 

---

코드 변경

  else if(pathname =='/create'){
    fs.readdir("./data", function (error, filelist) {
      var title = "Web - create";
      var list = templateList(filelist);
      var template = templateHTML(title,list,`
        <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>
        `);
      response.writeHead(200);
      response.end(template);
    });
  }

 

이렇게 create라는 창에서 데이터를 전송했을 때 크롬 기준으로 F12 -> Network 를 통해 데이터가 전송되는지 여부를 확인 할 수 있습니다. 아직 데이터를 처리하지 않았기에 404 형태입니다.