App - 글생성 UI 만들기 & POST 방식으로 전송된 데이터 받기 & 파일생성과 리다이렉션

 

// main.js

var qs = require('querystring');

var app = http.createServer(function(request,response){

	......
    ....
    ..

    if(pathname === '/create'){
        title = 'WEB - create';
        var readFolder = './data';
        fs.readdir(readFolder, (error, filelist) => {
          var list = templateList(filelist);
          var template = templateHTML(title, list, `
            <form action="http://localhost:3000/create_process" 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);
        });

    }else if(pathname === '/create_process'){
        var body = '';
        
        /* 조각조각의 데이터들을 수신할 때마다 호출되는 부분 */
        request.on('data', function(data){
        	body += data;
        });
        
        /* 조각조각의 데이터 수신이 끝났을 경우 호출되는 부분  */
        request.on('end', function(){
            var post = qs.parse(body);
            var title = post.title;
            var description = post.description;
            
            /* 받아온 데이터를 파일형태로 저장 */
            fs.writeFile(`data/${title}`, ${description}, 'utf8', () => {
            	response.writeHead(302, {location : `/?id=${title}`});
                response.end();
            }
            
        });

        

});
app.listen(3000);

 

 

---

 

1. form태그로 데이터 보내기. (post방식)

웹브라우져에서 post로 데이터를 보낼때, 데이터의 양이 많으면 프로세스가 다운될 수 있는 위험이 있음.

그럴 경우를 위해, node.js에서는 data를 조각조각내서 받음.

 

'data', 'end'와 같은 것들을 이벤트라고 한다.

 

 

2. 파일 저장 (파일 쓰기)

fs.writeFile(파일경로 및 파일이름, 파일내용, 인코딩타입(옵션), 콜백함수);

 

 

3. 리다이렉션

response.writeHead(응답코드, {location : 리다이렉트 할 주소});

 

 

**** 의문쓰

title이 같을 땐 파일이름이 중복될텐데 어떻게 하나??

--> 테스트결과 : 내용이 덮어씌워진다. 파일제목을 다른 이름으로 저장할 수 있게 로직을 바꿔야겠군.

 

 

 

 

출처

App - 글생성 UI 만들기

opentutorials.org/course/3332/21135

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

opentutorials.org/course/3332/21136

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