반응형
자바스크립트는 다른 객체 언어와는 양상이 다르다.
var v1 = 'v1';
//1000 codes
v1 = 'egoing';
var v2 ='v2';
var p = {
v1 : 'v1',
v2 : 'v2',
f1 : function (){
console.log(this.v1);
},
f2 : function (){
console.log(this.v2);
}
}
p.f1();
p.f2();함수는 값이다.
변수 안에 넣을 수 있다.
함수를 객체화 한 코드이다.
//Node.js import -> 크롬의v8엔진을 외부에서도 사용할 수 있게 runtime 프로그램
var http = require('http');
var fs = require('fs');
var url = require('url'); // 모듈 (node.js)
var qs = require('querystring')
// 함수 = 값 처리 가능 !
var template = {
html : function(title , filelist , body, control){
return `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">종주중독</a></h1>
${filelist}
${control}
${body}
</p>
</body>
</html>
`;
},list : function(dir_filelist){
//dir_filelist => 배열 변,
var data_list = '<ul>';
var i = 0;
while (i < dir_filelist.length) {
data_list = data_list + `<li><a href="/?id=${dir_filelist[i]}">${dir_filelist[i]}</a></li>`;
i = i + 1;
}
data_list = data_list + '</ul>';
return data_list;
}
}
// 웹 서버 생성
var app = http.createServer(function(request,response){
var _url = request.url;
// ?id = CSS
var queryData = url.parse(_url, true).query;
//data/css.js
var pathname = url.parse(_url, true).pathname;
//console.log(pathname);
//경로 및 id 값이 없는 기본 웹페이지 상태
if (pathname == '/') {
//id 값이 없는 경우 리드 !!
if (queryData.id== undefined) {
//경로를 읽는 노드js 함수
//콜백함수 -> 하나의 인자 ! 주변 인자와 연관 되어 있음!
fs.readdir('./data', function(error, dir_filelist){
//home
var title = 'Welcome';
var description = '안녕하세요. 종주 중독 홈페이지입니다.';
var filelist = template.list(dir_filelist);
//filelist => return data_list;
//readdir -> templateList -> templateHTML
var html = template.html(
title ,
filelist ,
`<h2>${title}</h2>${description}`,
`<a href="/create">create</a>`);
//웹 서버와 수신이 잘 되면 : 200
response.writeHead(200);
//웹 화면에 업로
response.end(html);
});
}else{
//컨텐츠를 선택했을 때 활성
// id 값이 있는 경우 리드 !!
fs.readdir('./data', function(error, dir_filelist){
//id 값이 있는경우는 해당 파일 내용을 읽어내는 node.js 함
fs.readFile(`data/${queryData.id}`,'utf-8',function(err,description){
var title = queryData.id
var filelist = template.list(dir_filelist)
var html = template.html(
title ,
filelist ,
`<h2>${title}</h2>${description}`,
`<a href="/create">create</a>
<a href="/update?id=${title}">update</a>
<form action = "delete_process" method ="post">
<input type ="hidden" name = "id" value = "${title}">
<input type ="submit" value ="delete">
</form>`
);
//query가 보이는 것은 get방식
response.writeHead(200);
response.end(html);
});
});
}
//create 버튼 클릭 !! ->
}else if (pathname=="/create") {
fs.readdir('./data', function(error, dir_filelist){
var title = 'WEB - create';
var filelist = template.list(dir_filelist);
var html = template.html(
title ,
filelist ,
`<form class="" action="/create_process" method ="post">
<p><input type="text" name="title" value="" placeholder ="title"></p>
<p>
<textarea name="description" rows="8" cols="22" placeholder="description"></textarea>
</p>
<p>
<input type="submit">
</p>
</form>
`,'');
response.writeHead(200);
response.end(html);
});
//post 방식 데이터 받는 /create_process
}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;
fs.writeFile(`data/${title}`,description,"utf-8",
function(err){
// 302는 페이지 리다이렉
// -> 보낸 데이터 값을 다시 페이지에 리 다이렉
response.writeHead(302,{Location:`/?id=${title}`});
response.end("success");
})
});
}else if (pathname=="/update") {
fs.readdir('./data', function(error, filelist){
fs.readFile(`data/${queryData.id}`,'utf-8',function(err,description){
var title = queryData.id
var list = template.list(filelist)
var html = template.html(title , list ,
//데이터 입력 form
`<form class="" action="/update_process" method ="post">
<input type ="hidden" name ="id" , value = "${title}">
<p><input type="text" name="title" placeholder ="title" value="${title}"></p>
<p>
<textarea name="description" rows="8" cols="22" placeholder="description" >${description}</textarea>
</p>
<p>
<input type="submit">
</p>
</form>`,
`<a href="/create">create</a> <a href="/update?id=${title}">update</a>`)
response.writeHead(200);
response.end(html);
});
});
}else if (pathname=="/update_process") {
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;
fs.rename(`data/${id}`,`data/${title}`,function(error){
fs.writeFile(`data/${title}`,description,"utf-8",
function(err){
// 302는 페이지 리다이렉
// -> 보낸 데이터 값을 다시 페이지에 리 다이렉
response.writeHead(302,{Location:`/?id=${title}`});
response.end("success");
});
})
// console.log(post);
});
}else if (pathname=="/delete_process") {
var body = "";
request.on("data", function(data){
body = body + data;
});
request.on("end",function(){
var post = qs.parse(body);
var id = post.id;
fs.unlink(`data/${id}`,function(error){
response.writeHead(302,{Location:`/`});
response.end();
});
// console.log(post);
});
}else{
response.writeHead(404); //web server <-> web browser
//서로 정보를 잘 주고 받았는지
response.end('Not Found');
}
});
app.listen(3000);리펙토링 적용 완료 !
반응형
'Web Dev' 카테고리의 다른 글
| REACT.JS 웹앱만들기.no1 (0) | 2022.07.18 |
|---|---|
| Node.js -web : sanitize-html (0) | 2022.05.02 |
| Node.js-App 제작-입력정보에 대한 보안 (path .parse(path)) (0) | 2022.05.02 |
| Node.js 웹 어플리케이션 -> 동적으로 만드는 방법 공부 (0) | 2022.04.25 |
| Error : Installation did not succeed. The application could not be installed [Android studio] : 해결 방법 (0) | 2022.01.06 |
| 모바일 어플 만들어 부자 되기 프로젝트 1 : 앱 8개를 만들면서 배우는 안드로이드 코틀린(Android Kotlin) (0) | 2021.12.23 |
