Sohn SooKyoung

💛💚

1 분 소요

파일 불러오기 수정 사항

'’를 사용하는 것이 아닌 esc밑에 있는 버튼을 사용하는 것이다. 물결 말고 ‘처럼 생긴 문자를 사용하면 ${}를 인식할 수 있으며 동시에 문자열처럼 사용할 수도 있다. 파일을 불러올 때, ‘‘를 사용하였기 때문에 계속 undefined 가 떴던 것이다.

조건문 활용하여 404화면 띄우기

1
2
3
4
5
6
7
8
var args = process.argv;
//args -> 배열 형식으로 출력된다. 0번째 값은 node.js의 경로를 갖고 있고, 1번째 값은 현재 열고자 하는 파일의 경로를 갖고 있다. 따라서 2번째부터 입력한 값을 가진 배열이라고 할 수 있으므로 args[2] === '1'이라는 조건문을 사용한 것이다. 
if(args[2] === '1'){
  console.log('C1');
} else {
  console.log('C2');
}
console.log('D');
cs

args 배열 형식으로 출력된다. 0번째 값 은 node.js의 경로를 갖고 있고, 1번째 값 은 현재 열고자 하는 파일의 경로를 갖고 있다. 따라서 2번째부터 입력한 값을 가진 배열이라고 할 수 있으므로 args[2] === ‘1’이라는 조건문을 사용한 것이다. 이 코드를 활용하여 다음과 같이 수정할 수 있었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var http = require('http');
var fs = require('fs');
var url = require('url');
 
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;
    var title = queryData.id;
 
    if(pathname === '/'){
      fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
        var template = `
        <!doctype html>
        <html>
        <head>
          <title>WEB1 - ${title}</title>
          <meta charset="utf-8">
        </head>
        <body>
          <h1><a href="/">WEB</a></h1>
          <ul>
            <li><a href="/?id=HTML">HTML</a></li>
            <li><a href="/?id=CSS">CSS</a></li>
            <li><a href="/?id=JavaScript">JavaScript</a></li>
          </ul>
          <h2>${title}</h2>
          <p>${description}</p>
        </body>
        </html>
        `;
        response.writeHead(200);
        response.end(template);
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
 
 
 
});
app.listen(3000);
cs

pathname은 다음 값이 id이면 if문으로 들어가고 다른 쿼리 스트링이 온다면 404 Not Found를 출력해준다.

data폴더의 제목을 리스트로 만들기

1
2
3
4
5
6
const testFolder = './data'; //data폴더에 있는 파일들의 제목을 리스트로 만든다.
const fs = require('fs');
 
fs.readdir(testFolder, function(error, filelist){
  console.log(filelist);
})
cs

data폴더 안에 있는 파일들의 제목을 리스트 형식 으로 만든다. 리스트로 만들어야 되는 이유는 사용자가 data에 문서를 추가하면 ul태그에 리스트를 추가할 필요없이 자동으로 추가될 수 있도록 하기 위해서 이다. 이를 위한 코드는 다음과 같다.

1
2
3
4
5
6
7
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>';
cs

리스트의 길이만큼 반복문을 돌면서 li 태그를 적용시켜주는 것이다. 그렇기 때문에 data폴더에 파일만 추가가 된다면 그만큼 반복문을 돌아서 따로 코드를 수정해주지 않아도 웹 페이지에 적용된 모습을 확인할 수 있다.

함수로 정리

반복이 있다면 그 부분을 함수로 만들 수 있다. 여기서 평소의 다른 프로그래밍 언어와의 차이점은 리턴값의 데이터형, 매개변수의 데이터형을 따로 쓰지 않아도 된다는 사실 이다. html 부분이 2번 반복이 있었으므로 다음과 같은 함수를 만들어 주었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function templateHTML(title, list, body) {
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${body}
  </body>
  </html>
  `
}
cs

node.js를 사용해주니 확실히 간결해진 html코드를 볼 수 있다. 완성된 코드는 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var http = require('http');
var fs = require('fs');
var url = require('url');
 
function templateHTML(title, list, body) {
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${body}
  </body>
  </html>
  `
}
function templateLIST(filelist) {
  var list = '<ul>';
  var i = 0;
  while (i < filelist.length) {
    list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
    i++;
  }
  list += '</ul>';
  return list;
}
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;
 
    if (pathname === '/') {
      if (queryData.id === undefined) {
        fs.readdir('./data', function(error, filelist) {
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          /*
          var list = `<ol>
          <li><a href="/?id=HTML">HTML</a></li>
          <li><a href="/?id=CSS">CSS</a></li>
          <li><a href="/?id=JavaScript">JavaScript</a></li>
          </ol>`;
          */
          var list = templateLIST(filelist);
          var template = templateHTML(title, list, `<h2>${title}</h2><p>${description}</p>`);
          response.writeHead(200);
          response.end(template);
        })
      } else {
        fs.readdir('./data', function(error, filelist) {
          var title = queryData.id;
          var list = templateLIST(filelist);
          fs.readFile( `./data/${title}`, 'utf8', function(err, description) {
            var title = queryData.id;
              var template = templateHTML(title, list, `<h2>${title}</h2><p>${description}</p>`);
            response.writeHead(200);
            response.end(template);
          });
        });
      }
    } else {
      response.writeHead(404);
      response.end('Not Found');
    }
 
});
app.listen(3000);
cs

(이 코드는 꼭 node.js를 통해서 연결이 되어야만 실행이 되는 부분이므로 따로 HTML 코드 형식으로 포스팅하지 않았다.)

느낀 점

간단히 배워도 굉장이 중요하다는 것이 보이는 node.js,,,, 개인 프로젝트를 통해서 더 익혀볼 예정이다. 이번주에는 생활 코딩 강의를 듣는 대신 내가 직접 node.js를 활용한 웹 페이지를 구현해 볼 예정이다. 생활 코딩 강의를 듣는 것이 아니기 때문에 일주일 내에 최대한 원하는 내용의 구현정도는 꼭 해야된다!

댓글남기기

참고