1. form 태그에 데이터 입력받기
웹브라우저에서 서버로 데이터를 전송할 때 HTML form 태그를 사용한다. 전송 방식은 여러가지가 있지만 주로 POST 방식을 사용하며, POST method에 대한 정보는 HTTP Request Methods 여기를 참고하면 좋다.
우선 사용자로부터 데이터 입력을 받을 수 있도록 아래 코드처럼 간단한 form을 만들었다.
<form action="http://localhost:3000/create_process" method="post">
<p><input type="text" name="title" placeholder="title"></p>
<p><textarea name="content" placeholder="content"></textarea></p>
<input type="submit">
</form> submit 버튼을 누르면 그 데이터는 "http://localhost:3000/create_prcess" 주소로 전송된다.
이제 url이 /create_prcess 일 때, 전송받은 데이터, 즉 title 값과 content 값을 저장하는 작업을 해주면 된다. 우선 POST 방식으로 전송된 데이터를 어떻게 저장하고, 참조할 수 있는지부터 알아보자.
2. POST request 처리하기
POST 방식으로 전송된 데이터를 저장하고 참조하는 방법을 알아보자.
node에서는 아래 코드처럼 querystring 모듈을 사용하면 간단하다.
var qs = require('querystring');
if(request.method == 'POST'){
var body = '';
request.on('data', function(data){
body = body + data;
});
request.on('end', function(){
var post = qs.parse(body);
var title = post.title;
var content = post.content;
});
}웹브라우저가 POST 방식으로 많은 양의 데이터를 전송하면, 그 데이터를 한번에 처리하기에는 무리가 있을 수 있다. 그래서 data 이벤트가 발생할 때마다 body에 data를 적절히 나눠 저장하는 콜백함수를 먼저 호출해준다.
그렇게 데이터를 저장하다가 end 이벤트가 발생하면(수신이 끝나면), body에서 쿼리스트링을 추출해 post에 저장하는 것이다.
post에 데이터가 어떻게 저장되었는지 확인해보자.
console.log(post);{ title: '제목 테스트', content: '내용 테스트' }이렇게 딕셔너리 객체 타입으로 잘 저장되었음을 확인할 수 있다. post.title 로 사용자가 title에 입력한 값을, post.content로 content에 입력한 값에 접근할 수 있게 된 것이다.
이제 각각의 값을 파일에 저장한 후, /create_pocess 화면을 작성한 글 페이지로 redirection 시켜주는 작업만 해주면 된다.
3. 파일 쓰기와 리다이렉션
수신한 post 데이터를 data 폴더 안에 파일로 저장하고, 작성한 글과 내용을 볼 수 있는 페이지로 리다이렉션하는 방법에 대해서 알아보자.
3.1.fs.writeFile()
수신한 데이터로 파일을 생성하는 방법은 공식 문서에 나와있대로 fs.writeFile() 함수를 사용하면 된다.
fs.writeFile(`data/${title}`, content, 'utf8', function(err){
에러처리, 생성 성공 메세지 출력!
});첫번째 인자에 생성할 파일명, 두번째 인자에는 내용, 세번째 인자는 문자열로 처리하기 위한 옵션, 네번째 인자에는 에러처리와 호출 성공 메세지를 위한 콜백함수를 넣어주면 된다.
이제 다시 POST 방식으로 데이터를 보내면, data 폴더에 새 파일이 생성됨을 확인할 수 있다.
3.2. reponse.writeHead()
이제 작성한 페이지로 리다이렉션 시켜주는 함수를 알아보자.
response.writeHead(302, {Location: `/?id=${title}`});Lacation: 에 리다이렉트 시켜줄 페이지 URL만 적어주면 된다. 넘나 간단.
4. 완성된 코드
var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
else if (pathname === '/create'){
fs.readdir('./data', function(error, filelist){
var title = 'create';
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="content" placeholder="content"></textarea></p>
<input type="submit">
</form>
`);
response.writeHead(200);
response.end(template);
});
}
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 content = post.content;
fs.writeFile(`data/${title}`, content, 'utf8', function(err){
response.writeHead(302, {Location: `/?id=${title}`});
response.end('success');
});
});
}5. 참고
