[생활코딩]WEB2-Node.js (6)(2020.12.19~21)

본 내용은 해당 강의 토대로 작성

HTML-form

지금까지, 데이터 디렉토리에 접근할 수 있는 것은 자기 자신이기 때문에 컨텐츠 생성은 소유자만 할 수 있었다. 지금부터는, 사용자가 서버를 통해서 데이터를 전송하면 컨텐츠를 생성, 수정 삭제를 할 수 있도록 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>

<form></form> : HTML-form을 사용

​      -action : 각 각의 컨트롤input, textarea에 사용자가 입력한 정보를 submit했을 때 속성이 가르키는 곳으로 전송

<input></input> : 사용자가 데이터를 입력할 수 있는 컨트롤 생성

​ -type="text" : 텍스트 상자

​ -type="submit" : 제출버튼

<textarea></textarea> : 여러줄 입력할 수 있는 텍스트 상자

만들어진 컨트롤들에 위와 같이 입력하면 아래와 같은 URL이 만들어진다.(Not found 출력)

http://localhost:3000/process_create?title=hi&description=greedy+siru

form 태그의 action 속성이 가르킨 주소로 각 컨트롤의 name=입력 내용 인 쿼리스트링이 생성된 것을 볼 수 있다. 하지만, 이것은 좋은 방식이 아니다. 왜냐하면 무분별하게 서버의 정보가 생성, 수정, 삭제가 될 수 있기 때문이다. 그러므로 HTML-form의 전송 방식을 다른 방법으로 해야한다.

<form action="http://localhost:3000/process_create" method="post">

이렇게 method="post" 의 속성을 준다. 이렇게 하면, 아까와 똑같은 데이터를 입력해도 쿼리스트링이 생성되지 않는다.

http://localhost:3000/process_create

그렇기 때문에, 일반적으로 사용자가 서버에서 데이터를 가져오는 경우에는 method="get" 속성을 부여하고(또는 생략) HTML-form처럼 사용자가 컨텐츠를 생성, 수정, 삭제하는 경우에는 post 를 사용한다.

App - 글생성 UI 만들기

이제 HTML-from으로 사용자가 컨텐츠를 만들 수 있도록 한다. 우선, main.js의 ${list} 와 ${body} 사이에 하이퍼링크를 추가한다.

${list}
     <a href="/create">create</a>
${body}

저 태그를 추가하면, 사용자는 /create 라는 pathname으로 이동하는데, 아직 생성하지 않았으므로 404 error가 출력된다. 그러므로 else if 를 추가한다.

    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" placeholder="title"></p>
             <p>
               <textarea name="description" placeholder="description"></textarea>
             </p>
             <p>
               <input type="submit">
             </p>
           </form>
         `);
         response.writeHead(200);
         response.end(template);
       });

그리고 사용자가 서버에 컨텐츠를 보낼 수 있도록 HTML-form을 추가한다. placeholder 속성에 컨트롤의 설명을 입력해서, 사용자에게 어떤 것을 입력할 지 알려준다.

컨트롤에 값을 입력하고 제출을 누르면, 구글 크롬의 소스보기- 네트워크 탭에서 어떤 곳으로 데이터가 보내졌는지 알 수 있다. 또, 데이터가 post 형식으로 보내진 것도 볼 수 있다.

App - POST 방식으로 전송된 데이터 받기

main.js의 상단에

var qs = require('querystring');

을 입력하여, Node.js에서 querystring모듈을 가져온다.

포스트 방식으로 전송된 데이터를 Node.js로 가져오기 위해서는 예전에 작성했던 변수 var app = http.createServer(function(request,response) 에서 request 인자는 요청할 때 웹 브라우저가 서버에게 보낸 정보이다. response 는 응답할 때 서버가 웹 브라우저에게 전송할 정보이다. 요청한 정보중에 포스트가 있으므로 필요한 것은 request 이다.

HTML-form에 으로 서버에 데이터를 보낼때, pathname ==='/create' 인 경우에 대해서 명령어를 입력한다.

else if(pathname === '/create_process'){
       var body = '';
       request.on('data', function(data){
           body = body + data;
       });
       request.on('end', function(){
           var post = qs.parse(body);
           var title = post.title;
           var description = post.description
       });
       response.writeHead(200);
       response.end('success');

웹 브라우저가 포스트 방식으로 데이터를 전송할 때 데이터가 많을시 한번에 처리하는 것은 무리가 있다. 그래서, Node.js에서는 데이터를 나누어서 전송을 한다.

request.on('data', function(data){body = body + data;}) : 서버가 수신할 때 콜백함수를 호출하여 data 인자를 통해 수신한 정보를 전달. 데이터를 body 에 추가. 딕셔너리의 형태로 저장된다.

request.on('end', function(){var post = qs.parse(body);var title =post.title; var description = post.description }); : 보낼 데이터가 없으면 해당 콜백 함수를 호출하여 실행. body 에서 변수 title 과 description 에 post의 데이터를 입력한다.

이 일련의 과정들을 event라고 하는데, event를 이용해서 웹 브라우저에 전송된 데이터를 가져와 querystring이라는 모듈의 parse 함수를 이용해서 정보를 객체화 할 수 있다.

App - 파일생성과 리다이렉션

사용자가 데이터를 서버에 보내면 파일을 생성하고 해당하는 파일을 볼 수 있는 리다이렉션 기능을 추가한다.

var description = post.description;
           fs.writeFile(`data/${title}`, description, 'utf8', function(err){
             response.writeHead(302, {Location: `/?id=${title}`});
             response.end();
           })

fs 모듈에 의해서, 사용자가 입력한 title 을 제목으로, description 의 내용을 가진 파일이 utf8의 형식으로 생성된다. 뒤이어서 함수가 콜백으로 실행되어서 사용자가 입력한 title querystring으로 이동시킨다.

느낀점

Node.js의 모듈들을 사용해서 사용자가 컨텐츠를 생성할 수 있는 기능들을 추가했다. `(grave accent)를 주의하면서 코딩을 했는데, 다행히 저번처럼 막히는 일 없이 수월하게 공부했다. 그리고 PM2의 기능은 매우 유용한 걸로… ㅎㅎ