song.log

[Node.js] 웹서버 만들기, URL로 입력된 값 사용하기, 동적인 웹페이지 만들기 본문

DevLog/Node.js

[Node.js] 웹서버 만들기, URL로 입력된 값 사용하기, 동적인 웹페이지 만들기

SingaKorean 2019. 12. 19. 17:28
반응형

1. 웹서버 만들기

Node.js는 웹서버를 내장하고 있기 때문에 그 외의 웹서버 서비스가 구현하지 못하는 것들을 구현할 수 있다.

 

 

생활코딩에 있는 소스를 복사하여 main.js에 붙여넣기

 

윈도우키 + r > 실행창 cmd > cd 경로 변경 > node main.js

 

웹브라우저를 키고 localhost:3000 입력

 

* 여기서 기억해야하는 코드

response.end(fs.readFileSync(경로)): 보여져야하는 페이지의 데이터를 사용자에게 전송하는 역할

 

 

2. URL의 이해

 

URL의 형식

 

3. URL을 통해서 입력된 값을 사용하는 방법

Query String을 통해서 다른 정보를 방식 - node.js url parsing + query string 으로 검색해서 정보 파악 가능

 

 

 

require('모듈명')

 

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;
    console.log(queryData);
    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(queryData.id);

});
app.listen(3000);

 

url에서 query string 부분에 /?id=HTML or /?name=HTML 이런식으로 입력을 하면

페이지에 id 값이 나타남

 

 

4. 동적인 웹페이지 만들기

 

동적인 웹페이지를 만들기 위해 template 변수를 만드는데, 이 때 Template literals를 사용해서 html코드를 넣는다. 

 

'Template listerals'란?

 

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 specification.

 

Template literals are enclosed by the back-tick (` `)  (grave accent) character instead of double or single quotes. Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}). The expressions in the placeholders and the text between the back-ticks (` `) get passed to a function. The default function just concatenates the parts into a single string. If there is an expression preceding the template literal (tag here), this is called a "tagged template". In that case, the tag expression (usually a function) gets called with the template literal, which you can then manipulate before outputting. To escape a back-tick in a template literal, put a backslash \ before the back-tick.

참조 URL : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

 

즉, 자바스크립트 내에서 문자열을 입력하는 방식

1. 여러줄에 걸쳐 문자열을 정의

작은 따옴표의 경우 개행을 해주고자 할 경우 '\n'을 사용해서 개행을 해야하지만

템플릿 리터럴을 사용할 경우 개행이 따로 필요하지 않다.

 

2. 자바스크립트 변수를 문자열 안에서 사용 

문자열 중간에 변수를 대입하기 위해서는 작은 따옴표를 사용할 때 아래와 같이 작성한다.

var verb = 'love';
var test = "I" + verb + "you";

하지만 템플릿 리터럴을 사용할 경우,

 

var verb = 'love';
var test = "I ${verb} you";

${}을 이용하여 바로 대입할 수 있다. 

 

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;
    console.log(queryData);
    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    var template = `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - HTML</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>HTML</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(queryData.id);

});
app.listen(3000);

 

여기서 query string에 따라 바뀌었으면 하는 부분에 ${queryData.id}로 대체

 

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;
    console.log(queryData);
    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    var template = `
    <!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);

});
app.listen(3000);

 

윈도우키 + r > 실행창 cmd > cd 경로 변경 후 >node main.js를 실행하면 위와 같은 페이지가 나옴

URL의 query string을 임의로 변경한 후 다시 실행 해주면 아이디 값대로 표시가 됨

template 에서 이동하는 주소를 아래와 같이 변경하면 링크를 클릭할 때 마다 id대로 title이 변경된다. 

 

node.js에서 혁신적으로 감동해야하는 부분은 바로 Template안의 태그 하나를 고치면 웹 페이지가 굉장히 많을 경우에도 한번의 변경으로 처리가 된다는 것을 볼 수 있다.

<ol>태그를 <ul>태그로 변경
모든 페이지에서 변경되었음

 

 

참조한 생활코딩 URL :

https://opentutorials.org/module/3549/21032

https://opentutorials.org/module/3549/21046

https://opentutorials.org/module/3549/21047

 

반응형

'DevLog > Node.js' 카테고리의 다른 글

[Node.js] 동기/비동기, 콜백함수, 패키지 매니저와 PM2 사용법  (0) 2019.12.19
[Node.js] 파일목록 알아내기, 글 목록 출력하기, 함수를 이용해서 정리 정돈하기  (0) 2019.12.19
[Node.js] 파일 읽기, 파일을 이용해 본문 구현, 콘솔에서의 입력값, 홈페이지 구현  (0) 2019.12.19
[Node.js] Window에서 cmd를 통해 node 사용하는 방법(Atom Editor 사용)  (0) 2019.12.17
[Node.js] 비주얼스튜디오 코드와 Node.js 설치  (0) 2019.11.04
'DevLog/Node.js' Related Articles more
Comments