[Node.js] URL, QueryString, 파일 읽기, 동적 웹페이지 만들기 (title, 본문)

🍀·2022년 3월 9일

Node.js

목록 보기

1/7

(생활코딩 Node.js 14~18)

URL

http://opentutorials.org:3000/main?<id=HTML&page=12

1) 프로토콜
2) host(domain name)
3) port number: 한 대의 컴퓨터 안에 여러 개의 서버가 있을 수 있다. 그 중 3000번 포트에 연결되어 있는 서버와 통신.
4) path: 그 컴퓨터안에 있는 어떤 디렉토리의 어떤 파일인지
5) query string: 웹 서버에게 데이터를 전달하는 부분.

Query string

var url = require('url'); //url 모듈 사용

var _url = request.url; //url 값이 들어간다.
var queryData = url.parse(_url, true).query; //객체가 되는 듯...? 나중에 더 알아보기

console.log(queryData.id) 
console.log(queryData.id); //cmd 창에 출력
...
response.end(queryData.id); //웹 페이지에 출력?

url: http://localhost:3000/?id=HTML

cmd 창 출력 결과
{id: HTML}
HTML
-> 객체와 객체의 id 속성값 출력
웹 페이지 출력 결과
HTML

동적 웹페이지 만들기

쿼리 스트링의 값에 따라 웹 페이지의 title과 제목 바꾸기!

  var template = ` //변수에 html 내용 담는다.
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${queryData.id}</title> //동적으로 바뀔 부분
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="index.html">WEB</a></h1>
      <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
      </ol>
      <h2>${queryData.id}</h2> //동적으로 바뀔 부분
      <p><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.
      </p>
    </body>
    </html>

    `;
    response.end(template); //웹 페이지에 출력

코드 실행 결과
Querystring id 값에 따라 title과 제목이 변경된다.
예를 들면,
url이 http://localhost:3000/?id=HTML 이거라면 title 과 제목이 HTML 로 출력.

조금 더 정돈된 코드

var http = require('http');
var fs = require('fs');
var url = require('url'); //url 모듈 사용
var app = http.createServer(function(request,response){
    var _url = request.url; //url 값이 들어간다.
    var queryData = url.parse(_url, true).query;
    var title = queryData.id; //queryString id값을 title로
    console.log(queryData.id);
    if(_url == '/'){//최상의 루트. 즉 index 페이지라면
      title = 'Welcome'; //title의 값을 Welcome으로
    }
    if(_url == '/favicon.ico'){
      response.writeHead(404);
      response.end();
      return;
    }
    response.writeHead(200);
    var template = `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1> //index가 루트임
      <ol> //리스트 값의 QueryString 지정
        <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><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.
      </p>
    </body>
    </html>

    `;
    response.end(template);

});
app.listen(3000);

결과: index 페이지의 title이 Welcome으로 출력되고, list 값을 누르면 html 파일명이 아닌 지정한 값이 url로 출력됨!

Node js에서 파일 다루기

새로 만든 nodejs 디렉토리에 fileread.js 파일과 sample.txt 파일 생성

//samplefile.txt
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

//fileread.js
var fs = require('fs'); //filesystem 모듈
fs.readFile('sample.txt', 'utf8', function(err, data){ //sample.txt 파일을 읽어온다. utf8로 변환?
  console.log(data); //data 출력


});

코드 실행 결과 (cmd 출력)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
sample.txt 파일 내용을 읽어온 것을 확인

QueryString 값에 따라서 본문을 동적으로 만들기

1) data 디렉토리를 생성하고 1.html, 2.html, 3.html의 본문 내용을 HTML, CSS, JavaScript 파일명으로 각각 저장한다.
2) main.js에서 Query String의 값과 일치한 파일을 본문으로 불러온다.
3) 본문 내용 동적으로 완성!

var http = require('http');
var fs = require('fs');
var url = require('url'); //url 모듈 사용
var app = http.createServer(function(request,response){
    var _url = request.url; //url 값이 들어간다.
    var queryData = url.parse(_url, true).query;
    var title = queryData.id;
    console.log(queryData.id);
    if(_url == '/'){//최상의 루트. 즉 index 페이지라면
      title = 'Welcome';
    }
    if(_url == '/favicon.ico'){
      response.writeHead(404);
      response.end();
      return;
    }
    response.writeHead(200);
    fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){ //data 디렉토리에 queryString id값과 일치한 파일을 읽어와서 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);

코드 실행 결과: 파일의 내용이 그대로 본문에 출력된다!

🍀

다음 포스트