Specialist

파일생성과 리다이렉션

        fs.writeFile(`data/${title}`, description, 'utf8', function(err){
          response.writeHead(200);
          response.end('success');          
        })

fs.writeFile을 사용해서 파일생성을 해준다

파일은 data폴더 내에 title입력값을 제목 그리고 내용은 description내용으로 우리가 알아먹을 수 있는 utf8형식을 이용해서 만들어 주는 것이고 이 작업이 완료되면 정상적으로 웹이 구동한다는 200번을 띄워준다

이제 파일생성 페이지를 뷰페이지로 바꾸기 위해 /?id=해당파일 로 해주어야한다

즉 리다이렉션(URL 넘겨주기)를 해야한다

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

이렇게 해주면 된다

로케이션 안에 이동할 주소를 입력해주면 그 주소로 이동이 된다

301번은 영원히 바뀌었으니 여기로 오세요

302번은 일시적으로 바뀌는 것

글생성 UI 만들기

templateHTML 함수 ${list}밑에

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

create 주소를 생성해준다

아래쪽에 else if 문을 만들어서 create 주소일때 출력하는 부분을 생성해보자

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);
      })
    }

readdir 부분을 복붙해서 몇몇군데를 수정했다

먼저 title값을 수정했고 description부분은 필요없어 삭제했다

templateHTML 매개변수 세번째 값(body값)에 폼형식을 집어넣기로했다

post형식으로 하고 버튼들을 만들고 제출버튼까지 만들었다

이 때 placeholder는 유저가 무엇을 입력해야하는지 보기 쉽게 만들어진 속성이다

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

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;
        console.log(post.title);
      });
      response.writeHead(200);
      response.end('success');
    }

받는 곳의 주소를 create_process로 하고

post방식으로 받는 코딩을 해보자

var qs = require('querystring');

이렇게 모듈을 불러오고

request 식을 작성한다

var post = qs.parse(body);라고 되어있는데

이는 body를 객체화 하여 post에 넣는것이다

console.log(post);

로 실행시켜보면

{title: 'Nodejs', description: 'Nodejs is..'}

으로 넣었던 값들이 나타남을 알 수 있다

좀 더 응용해보자면

console.log(post.title);

Nodejs

이렇게 값이 나온다

한줄 입력시 <input type = "text">

여러줄 입력시 <textarea></textarea>

입력값을 전송시 <input type="submit">

전송하려면 전송할 주소가 필요함

<form action="http://localhost:3000/process_create">
<p><input type="text"></p>
<p>
<textarea></textarea></p>
<p>
<input type="submit">
</p>
</form>

이렇게 해주면 위의 주소로 전송이 된다

입력하는 input값들이 이름이 필요

<input type="text" name="title">

<textarea name="description"></textarea>

이렇게 작성하고 submit을 누르면 http://localhost:3000/process_create?title=hi&description=url 이런 형태로 나온다

이는 적은 내용들이 다 노출이 되기 때문에 좋은 방법이 아니다

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

method값을 post로 줘보자

http://localhost:3000/process_create 이렇게 뜸을 알 수 있다 즉 작성한 내용들이 감춰진다

method 값은 post방식과 get방식이 있는데 생략하면 get방식이 사용된다

서버의 자료를 수정 삭제 생성할 경우에는 method를 post방식을 사용해야 한다

PM2 설치

이유 : JS파일을 수정하면 종료하고 다시 실행시켜줘야 변경된 내용이 적용되는데 PM2를 이용하면 알아서 재시작을 해주기 때문에 그럴 필요가 없어진다

cmd에    npm install pm2 -g   를 입력하여 설치할 수 있다

실행법은

pm2 start 실행시킬파일.js

ex) pm2 start main.js

pm2.monit 현재 pm2에 의해 실행되고 있는 목록이 뜬다

pm2.log 로그들을 확인할 수 있다

pm2 stop 종료시킬파일.js

pm2.list 현재 실행되고있는 js 목록들

pm2 start 실행시킬파일.js --watch 소스코드를 변경할때 자동으로 변경된다