210722 Create

create 페이지로 이동하는 create 버튼 만들기

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

create 페이지에 form 넣어주기

else if(pathname="/create"){
//pathname이 create라면
      fs.readdir('./data', function(error, filelist){
        var title = 'WEB - create';
        var list = templateList(filelist);
        
        //template: body로 넘어가는 내용
        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>
          `);
        response.writeHead(200);
        response.end(template);
    })}

method = "post"
GET 방식: 데이터를 url 뒤에 붙여서 요청한다. URL형태로 표현되므로 특정 페이지를 다른사람에게 접속하게 할 수 있다. 그러나 보안에 다소 취약하고 전송할 수 있는 데이터에 한계가 있다.
POST 방식: URL에 변수(데이터)를 노출하지 않고 요청한다. URL에 데이터가 노출되지 않으므로 즐겨찾기나 캐싱이 불가능하지만 쿼리스트링(문자열)데이터 뿐만 아니라, 라디오 버튼, 텍스트 박스와 같은 객체들의 값도 전송이 가능하다.

create 버튼을 눌러 페이지에 들어간 다음,
title과 body를 각각 입력해준다.

개발자도구 > Network 에 들어가면 이런 화면을 볼 수 있다. 브라우저와 서버가 어떻게 통신하는지 확인할 수 있음!

여기서 process_create를 누르면 데이터가 post 방식으로 잘 전달되었는지 확인할 수 있다.

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

var qs = require('querystring');
...
...

  else if(pathname==='/proces_create'){
    var body = '';
    request.on('data', (data)=>{
      //콜백이 실행될 때마다 body에 data를 추가해주고 있음.
      body += data;
    })
    request.on('end', ()=>{
      //더이상 들어올 정보가 없다면(정보수신이 끝나면)
      //지금까지 저장한 body를 post 변수에 할당하기
      var post = qs.parse(body);
      //console.log(post);
      var title = post.title;
      var description = post.description;
    })
    response.writeHead(200);
    response.end('success');
  }

꼭! 맨 위에 var qs = require('querystring');를 추가해주기! querystring 모듈을 가져오기 위함이다.

title과 body를 전송하고 콘솔에 post를 찍어보면 전송된 결과가 나온다.

받아온 데이터를 파일 디렉토리안에 저장하기

fs.writeFile()을 사용한다.
공식문서: https://nodejs.org/api/fs.html#fs_fs_writefile_file_data_options_callback

파라미터로는 파일명과 파일 내용등이 들어가는 것을 확인할 수 있다.

else if(pathname==='/process_create'){
    ...
    request.on('end', ()=>{
      var post = qs.parse(body);
      var title = post.title;
      var description = post.description;
      fs.writeFile(`data/${title}`, description, 'utf8', (err)=>{
        response.writeHead(200);
        response.end('success');
      })
    })

똑같이 title과 body를 입력한 후 제출하고 title이라는 이름의 파일이 생겼으면 성공!

리다이렉션

사용자가 쓴 글의 페이지로 이동하기
response.writeHead(200)을 조금 수정하면 된다.
(200: 통신 성공을 의미함)

response.writeHead(302, {Location: `/?id=${title}`});

302: 페이지의 주소가 바뀌었으니 브라우저에게 페이지를 이동하라고 명령함

Location: 이동할 위치

Location으로 이동해라!

요렇게 이동하면 성공