728x90
예전에 Node.js 공부를 했던 내용에서
추가로 공부를 한 내용을 기반으로 다뤄보겠습니다.
Node.Js를 사용하면서 느낀점은
서버 구현이 간편하고 비동기적인 병행처리가 매력적입니다.
Node Pacakge Module 즉 NPM이 매력적이라는 생각이 들더라구요 ㅎㅎ
본론으로 들어가서 보면 기존에 만들었던 화면에서
파일 생성과 파일 삭제를 추가해봤어요
화면
가장 기본 화면입니다.
기본 Main에서는 현재 파일들을 보여주는데 sg-test와 table이라는 파일을 가지고 있습니다.
여기서 create를 실행하면
내용을 추가할 수 있도록 구성했고
위와 같이 새로 생성된 것을 확인할 수 있으며 새로 생성한 파일을 수정도 가능합니다.
(삭제도 가능해요 ㅎㅎ)
코드
Main.js
var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
/*
=================
Function Part
=================
*/
function templateList(title, list, body, create){
return`
<!doctype html>
<head>
<style>
table {
font-family : courier,
border-collapse : collapse;
width : 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">Home</a></h1>
${list}
${create}
${body}
</body>
</html>`
;
}
function fileReadlist(filelist){
var list = `<ul>`;
var i;
for(i = 0; i < filelist.length; i++){
list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
}
list = list + `</ul>`;
return list;
}
function responseReturn(template, response){
response.writeHead(200);
response.end(template);
}
function responseErrorReturn(errCode, endCode, response){
response.writeHead(errCode);
response.end(endCode);
}
function responseLocationWriteReturn(code, location, response){
response.writeHead(code, {Location : location});
response.end();
}
/*
=================
Main App Part
=================
*/
var app = http.createServer(function(request,response){
var _url = request.url;
var queryData = url.parse(_url, true).query;
var pathname = url.parse(_url, true).pathname;
// console.log(queryData);
if(pathname === '/'){
if(queryData.id === undefined){
fs.readdir('./sgmoominFile', function(error, filelist){
var title = "hello welcome";
var descript = "Tistory welcome";
var list = fileReadlist(filelist);
var template = templateList(title, list, `<h2>${title}</h2><h2>${descript}</h2>`,
`<a href="/form">create</a>`, '');
responseReturn(template, response);
})
} else {
fs.readdir('./sgmoominFile', function(error, filelist){
fs.readFile(`sgmoominFile/${queryData.id}`, 'utf8', function(err, description){
var fileUrl = "file/sgmoomin.txt";
var title = queryData.id;
// var description = "Hello - Sg Moomin ";
var list = fileReadlist(filelist);
var template = templateList(title, list, `<h2>${title}</h2><h2>${description}</h2>`
,`<a href="/form">create</a> <a href="/update?id=${title}">update</a> <a href="/delete?id=${title}">delete</a>`);
responseReturn(template, response);
});
});
}
}else if(pathname === '/form'){
fs.readdir('./form', function(error, filelist){
var url = "form/form.html";
var title = "타이틀 생성하기";
console.log(filelist, queryData, pathname, pathname, request.url);
var list = fileReadlist(filelist);
fs.readFile(url, 'utf8', function(err, description){
var template = templateList(title, '', `<h2>${title}</h2><h2>${description}</h2>`,'');
responseReturn(template, response);
});
});
} else if(pathname === '/create_form') {
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;
var locations = `/?id=${title}`;
fs.writeFile(`sgmoominFile/${title}`, description, 'utf8', function(err){
responseLocationWriteReturn(302, locations, response);
})
});
responseReturn("success", response);
} else if(pathname === '/update') {
fs.readdir('./form', function(error, filelist){
var url = "form/update.html";
var title = queryData.id;
var list = fileReadlist(filelist);
fs.readFile(url, 'utf8', function(err, description){
var template = templateList(title, '', `<h2>${title}</h2><h2>${description}</h2>`,
`<a href="/form">create</a> <a href="/update?id=${title}">update</a> <a href="/delete?id=${title}">delete</a>`);
responseReturn(template, response);
});
});
} else if(pathname === '/update_form') {
var body = '';
request.on('data', function(data){
body = body + data;
});
request.on('end', function(){
var post = qs.parse(body);
var id = post.id;
var title = post.title;
var description = post.description;
var locations = `/?id=${title}`;
fs.rename(`sgmoominFile/${id}`, `sgmoominFile/${title}`, function(error){
fs.writeFile(`sgmoominFile/${title}`, description, 'utf8', function(err){
responseLocationWriteReturn(302, locations, response);
})
});
});
responseReturn("success", response);
} else if(pathname === '/delete') {
fs.readdir('./form', function(error, filelist){
var url = "form/delete.html";
var title = queryData.id;
var list = fileReadlist(filelist);
fs.readFile(url, 'utf8', function(err, description){
var deleteText = `<h5>삭제하시려는 파일 명이 ${title} 맞나요? <br> 맞으시다면 파일명을 입력하세요<h5>`;
var template = templateList(title, '', `${deleteText}${description}`,'');
responseReturn(template, response);
});
});
} else if(pathname == '/delete_form'){
var body = '';
request.on('data', function(data){
body = body + data;
});
request.on('end', function(){
var post = qs.parse(body);
var id = post.id;
var title = post.title;
var locations = `/`;
fs.unlink(`sgmoominFile/${id}`, function(error){
responseLocationWriteReturn(302, locations, response);
})
});
}else {
responseErrorReturn(404, "Not found", response);
}
});
app.listen(3000);아직 완성된 코드는 아니지만
그래도 Main.js는 위와 같습니다.
Html 파일의 경우는 아래의 GitHub에서 확인!
추후에는 틈틈히 코드 리펙토링을 할 계획입니다.
무튼 자세한 코드는 아래의 링크에서 확인 가능합니다.
GitHub - sg-moomin/nodeJs_Study
Contribute to sg-moomin/nodeJs_Study development by creating an account on GitHub.
github.com
최근 들어서 코딩 공부를 잘 안하고 있는데
좀 더 열심히 해봐야겠네요...ㅎ
무튼 다음에는 더 좋은 정보로 찾아오겠습니다.
728x90
'Programing > NodeJs' 카테고리의 다른 글
| 세무민의 코딩일기 : NodeJs를 이용하여 FileRead하기 [동기와 비동기의 차이] (0) | 2021.01.17 |
|---|---|
| 세무민의 코딩일기 : javaScript 공부하기[atom을 이용해서 JavaScript 기초를 학습하기!] (0) | 2021.01.14 |
| 세무민의 코딩일기 : Node.js를 공부해보자 (0) | 2021.01.07 |