Node.js.31.App 제작-글생성 UI 만들기

리스트 아래에 글쓰기 버튼을 만들어보자.

<a href="/create">create</a>

버튼을 누르면 localhost:3000/create 페이지로 이동한다.

이제 createServer내에서 pathname이 필요하다. 확인하기 위해 pathname을 콘솔로 찍어보자.

pm2 log 를 입력하여 콘솔이 찍힌 것을 본다.

리로드하면 다음과 같이 홈과 HTML, CSS, JavaScript를 눌렀을 때에는 pathname으로 /가 콘솔되고, create버튼을눌렀을 때에는 pathname으로 /create가 콘솔되는 것을 확인할 수 있다.

 

이제 if(pathname === '/') 블럭 아래에 else if(pathname === '/create') 블럭을 생성하여 작성한다. 눌렀을 때 body부분에서 h1과 리스트는 동일하게 띄우지만, 그 아래 ${body}부분은 다르게 띄울 것이다. 이전에 만든 form.html을 가져와서 붙여넣는다.

input 태그에 placeholder="title"을 주어주면 input 태그 내에 설명텍스트가 생긴다. 사용자에게 무엇을 입력할지 가이드해주는 역할이다. testarea 태그에도 placeholder="description"을 추가하자.

    }else if(pathname === '/create') {
      fs.readdir('./data', function(err, 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);  //200: 파일을 성공적으로 전송하였음
        response.end(template);
      });
    }

 

 

개발자 도구를 띄운 후, 다음과 같이 작성한 후 제출버튼을 누르면

다음과 같이 process_create는 404가 뜬다. 왜냐하면 아직 처리를 하지 않았기 떄문이다.

그리고 process_create를 누르면 

Form Data 부분에 다음과 같이 title, description이 post방식으로 은밀하게 전송된 것을 확인할 수 있다.