web-n · 9ruem2 · Feb 1, 2024 · Feb 2, 2024 · Feb 2, 2024 · Feb 2, 2024
diff --git a/data/CSS b/data/CSS
@@ -0,0 +1 @@
+Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
diff --git a/data/HTML b/data/HTML
@@ -0,0 +1,3 @@
+<a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
+  <img src="coding.jpg" width="100%">
+  </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
diff --git a/data/JavaScript b/data/JavaScript
@@ -0,0 +1 @@
+JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
diff --git a/lib/template.js b/lib/template.js
@@ -0,0 +1,30 @@
+module.exports = {
+    HTML : function(title, list, body, control){
+    return `
+        <!doctype html>
+            <html>
+            <head>
+                <title>WEB1 - ${title}</title>
+                <meta charset="utf-8">
+            </head>
+
+            <body>
+                <h1><a href="/">WEB</a></h1>
+                ${list}
+                ${control}
+                ${body}
+            </body>
+            </html>
+    `;
+}, list : function(filelist){
+    var list = '<ul>';
+    var i = 0;
+    while(i < filelist.length){
+    list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
+    i = i + 1;
+    }
+    list = list+'</ul>';
+    return list;
+    }
+}
+
diff --git a/main.js b/main.js
@@ -0,0 +1,147 @@
+var http = require('http');
+var fs = require('fs');
+var url = require('url');
+var qs = require('querystring');
+var template = require('./lib/template.js');
+var path = require('path');
+
+var app = http.createServer(function(request,response){
+    var _url = request.url;
+    var queryData = url.parse(_url, true).query; // queryData 변수에 저장된 것은 URL의 쿼리 스트링 부분을 키-값 쌍으로 가지는 객체
+    var pathname = url.parse(_url, true).pathname;
+    if(pathname === '/'){
+      if(queryData.id === undefined){
+        fs.readdir('./data', function(err, filelist){
+            var title = 'Welcome';
+            var description = 'Hello, Node.js';
+            var list = template.list(filelist);
+            var html = template.HTML(title,list,
+                `<h2>${title}</h2>${description}`,
+                `<a href="/create">create</a>`
+            );
+            response.writeHead(200);
+            response.end(html);
+
+        })} else {
+            fs.readdir('./data', function(error, filelist){
+                var fileteredId = path.parse(queryData.id).base;
+                fs.readFile(`data/${fileteredId}`, 'utf8', function(err, description){
+                var title = queryData.id;
+                var list = template.list(filelist);
+                var html = template.HTML(title,list,
+                    `<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>
+                     `
+
+                );
+              response.writeHead(200);
+              response.end(html);
+            });
+          });
+        }
+    } else if(pathname === '/create'){
+        fs.readdir('./data', function(err, filelist){
+            var title = 'WEB - create';
+
+            var list = template.list(filelist);
+            var html = template.HTML(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(html);
+
+        });
+
+    } 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){
+                response.writeHead(302, {Location: `/?id=${title}`});
+                response.end('success');
+            })
+        });
+    } else if (pathname === '/update'){
+        fs.readdir('./data', function(error, filelist){
+            var fileteredId = path.parse(queryData.id).base;
+            fs.readFile(`data/${fileteredId}`, 'utf8', function(err, description){
+            var title = queryData.id;
+            var list = template.list(filelist);
+            var html = template.HTML(title,list,
+                `
+                <form 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" 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){ // 파일 수정
+                    response.writeHead(302, {Location: `/?id=${title}`});
+                    response.end('success');
+                })
+            } )
+        });
+    } 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;
+            var fileteredId = path.parse(id).base;
+            fs.unlink(`data/${fileteredId}`, function(error){
+                response.writeHead(302, {Location: '/'});
+                response.end('success');
+            })
+        });
+    }
+
+    else {
+        response.writeHead(404);
+        response.end('Not found');
+    }
+});
+app.listen(3000);
diff --git a/nodejs/fileread.js b/nodejs/fileread.js
@@ -0,0 +1,4 @@
+const fs = require('fs');
+fs.readFile('sample.txt', 'utf8', function(err, data){
+    console.log(data);
+});
diff --git a/nodejs/mpart.js b/nodejs/mpart.js
@@ -0,0 +1,8 @@
+var M = {
+    v : 'v',
+    f : function(){
+        console.log(this.v);
+    }
+}
+
+module.exports = M;
diff --git a/nodejs/muse.js b/nodejs/muse.js
@@ -0,0 +1,11 @@
+// var M = {
+//     v : 'v',
+//     f : function(){
+//         console.log(this.v);
+//     }
+// }
+
+var part = require('./mpart.js');
+console.log(part);
+// M.f();
+part.f();
diff --git a/nodejs/readdir.js b/nodejs/readdir.js
@@ -0,0 +1,6 @@
+var testFolder = './data';
+var fs = require('fs');
+
+fs.readdir(testFolder, function(error, filelist){
+  console.log(filelist);
+})
diff --git a/nodejs/sample.txt b/nodejs/sample.txt
@@ -0,0 +1 @@
+Minim magna fugiat veniam veniam elit. Eu commodo officia reprehenderit eu incididunt reprehenderit esse consequat consectetur cillum incididunt voluptate. Dolor do consequat mollit pariatur magna elit deserunt velit cillum commodo id dolor ut enim. Eiusmod incididunt tempor magna sunt esse nulla id cupidatat velit.
diff --git a/password.js b/password.js
@@ -0,0 +1,4 @@
+module.exports = {
+    id : 'eging',
+    password : '121212'
+}
diff --git a/syntax/Number.js b/syntax/Number.js
@@ -0,0 +1,2 @@
+console.log(1);
+console.log(2*5);
diff --git a/syntax/array-loop.js b/syntax/array-loop.js
@@ -0,0 +1,9 @@
+var number = [1,400,12,34];
+
+var i = 0;
+var total = 0;
+while(i < number.length){
+    total = total + number[i];
+    i++;
+}
+console.log(`total : ${total}`);
diff --git a/syntax/array.js b/syntax/array.js
@@ -0,0 +1,11 @@
+ // 배열에 대한 CRUD에 대해 파악하기
+
+ // READ
+ var arr = ['a','b','c'];
+ console.log(arr[1]);
+ console.log(arr[2]);
+ console.log(arr.length);
+
+ // PUT
+ arr.push('5');
+ console.log(arr);
diff --git a/syntax/boolean.js b/syntax/boolean.js
@@ -0,0 +1,6 @@
+console.log(true);
+console.log(false);
+a = 1;
+b = 0;
+
+console.log('test');
diff --git a/syntax/callback.js b/syntax/callback.js
@@ -0,0 +1,14 @@
+// function a(){
+//     console.log('a');
+// }
+
+// 익명함수
+var a = function (){
+    console.log('a');
+}
+
+function slowfunc(callback){
+    callback();
+}
+
+slowfunc(a);
diff --git a/syntax/comparison.js b/syntax/comparison.js
@@ -0,0 +1,4 @@
+console.log(1+1);
+console.log(1==1);
+console.log(1>2);
+console.log(1===1); // 정확하게 같으냐? 이유가 없다면 정확히 3개를 사용하는 것이 좋다.
diff --git a/syntax/conditional.js b/syntax/conditional.js
@@ -0,0 +1,10 @@
+var args = process.argv;
+console.log(args[2]);
+console.log('A');
+console.log('B');
+if(args[2] === '1'){
+  console.log('C1');
+} else {
+  console.log('C2');
+}
+console.log('D');
diff --git a/syntax/form.html b/syntax/form.html
@@ -0,0 +1,10 @@
+
+<form action="http://localhost:3000/process create" method = "post">
+    <p><input type="text" name="title"></p>
+    <p>
+        <textarea></textarea>
+    </p>
+    <p>
+        <input type = "submit">
+    </p>
+</form>
diff --git a/syntax/function.js b/syntax/function.js
@@ -0,0 +1,7 @@
+f123();
+function f123(){
+    console.log(1);
+    console.log(2);
+    console.log(3);
+}
+
diff --git a/syntax/function2.js b/syntax/function2.js
@@ -0,0 +1,8 @@
+console.log(Math.round(1.6));
+console.log(Math.round(1.4)); 
+
+function sum(first, second){ //parameter(매개변수)
+    return first+second; // return 함수를 종료 + 함수를 호출한 곳으로 값을 돌려줌
+}
+console.log(sum(2,4)); // argument(인자)
+
diff --git a/syntax/loop.js b/syntax/loop.js
@@ -0,0 +1,11 @@
+console.log("A");
+console.log("B");
+
+var i = 0;
+while(i<10){
+    console.log("C1");
+    console.log("C2");
+
+    i++;
+}
+console.log("D");
diff --git a/syntax/object.js b/syntax/object.js
@@ -0,0 +1,12 @@
+var roles = {
+    'programmer' : 'egoing',
+    'designer' : 'k8805',
+    'manager' : 'hoya'
+}
+
+console.log(roles.designer);
+
+for(var key in roles){
+    console.log(key);
+    console.log(roles[key]);
+}
diff --git a/syntax/program1.js b/syntax/program1.js
@@ -0,0 +1,5 @@
+console.log('A');
+console.log('B');
+console.log('C1');
+console.log('D');
+
diff --git a/syntax/program2.js b/syntax/program2.js
@@ -0,0 +1,5 @@
+console.log('A');
+console.log('B');
+console.log('C2');
+console.log('D');
+
diff --git a/syntax/sample.txt b/syntax/sample.txt
@@ -0,0 +1 @@
+B
diff --git a/syntax/sync.js b/syntax/sync.js
@@ -0,0 +1,14 @@
+var fs = require('fs');
+
+// readFileSync 동기
+// console.log('A');
+// var result = fs.readFileSync('syntax/sample.txt', 'utf8');
+// console.log(result);
+// console.log('c');
+
+// redaFile 비동기 - js에서 가장 선호 비동기적 처리를 좋아함
+console.log('A');
+fs.readFile('syntax/sample.txt', 'utf8', function(err, result){
+    console.log(result);
+});
+console.log('c');
diff --git a/syntax/template.js b/syntax/template.js
@@ -0,0 +1,2 @@
+var name = 'k8805';
+console.log(name);
diff --git a/syntax/test.js b/syntax/test.js
@@ -0,0 +1 @@
+console.log('test');
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Minim magna fugiat veniam veniam elit. Eu commodo officia reprehenderit eu incididunt reprehenderit esse consequat consectetur cillum incididunt voluptate. Dolor do consequat mollit pariatur magna elit deserunt velit cillum commodo id dolor ut enim. Eiusmod incididunt tempor magna sunt esse nulla id cupidatat velit.