Sohn SooKyoung

💛💚

최대 1 분 소요

node.js란?

사람들과 상호작용을 할 수 있는 수단이다. 그러므로 꼭 웹을 통해서 연결을 해야되며, cmd창에서 node.js파일이 있는 폴더에서 node 파일명.js 라고 입력을 해야 연결이 된다. 굉장히 중요한 기능인 것 같으며 내가 웹을 구현할 때도 많이 사용되는 기능인 것 같다. 생활 코딩 이외에도 많이 공부해볼 예정!

URL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;
    //queryData -> URL의 쿼리 스트링을 
    var title = queryData.id;
    if(_url == '/'){
      title = 'Welcome';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(queryData.id);
});
app.listen(3000);
cs

queryData -> URL내의 쿼리 스트링을 불러옴
queryData.id -> 쿼리 스트링의 id값을 불러옴
쿼리 스트링은 ?로 시작하기로 약속되어 있다. 나중에 main.js에서 id값으로 파일을 만들고 파일을 불러서 읽어올 예정이다.

파일 불러오기

1
2
3
4
5
6
const fs = require('fs');
 
fs.readFile('sample.txt', 'utf8', function(err, data) {
  if (err) throw err;
  console.log(data);
});
cs

파일을 불러오는 방식은 다음과 같다. 여기서 readFile에서 F는 대문자라는 점을 주의해야된다. 처음에 소문자로 했다가 파일을 불러오지 못하여서 보니, 매서드는 readFile 임을 알았다.

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
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 title = queryData.id;
    if(_url == '/'){
      title = 'Welcome';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    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>
          <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>
          <h2>${title}</h2>
          <p>${description}</p>
        </body>
        </html>
      `;
      response.end(template);
    })
 
});
app.listen(3000);
cs

위에 있던 main.js에서 html을 추가한 코드이다. main.js에서 html을 추가하는 이유는 id값에 따라 내용을 변화시키기 위해서이다. ${} 을 사용하게 되면 url에 따라서 지정을 할 수 있게 된 것이다. url의 id값에 따라 queryData.id값이 바뀔 것이며 여기서 title이라는 변수에 id값을 넣어놓았으므로 ${title} 이라고 바꾸게 되면 링크에 따라 제목도 바뀌게 된다. 링크에 따라 제목이 바뀌었으면 내용도 바꾸어야 된다. 이 방식은 위에서 파일을 읽어오는 방식을 활용했다. description이라는 매개변수에 내용이 저장되었으므로 ${description} 을 p태그 안에 넣어주었다.

댓글남기기

참고