Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

SYDev

[Node.js] 4. 파일을 이용해 본문 구현 본문

대딩코딩/웹개발 스터디

[Node.js] 4. 파일을 이용해 본문 구현

시데브 2023. 11. 11. 17:20

 

해당 게시물은 유튜브 생활코딩 "Node.js" 강의 영상을 참고했습니다.
(https://www.youtube.com/watch?v=3RS_A87IAPA&list=PLuHgQVnccGMA9QQX5wqj6ThK7t2tsGxjm&index=1)

 

 파일명: main.js

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;
    console.log(queryData.id);  
    if(_url == '/'){
      title = 'Welcome';
    }
    if(_url == '/favicon.ico'){
      response.writeHead(404);
      response.end();
      return;
    }
    response.writeHead(200);
    //data 경로에 있는 파일 중 queryData.id의 이름을 가진 파일이 description에 담김
    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);

 

main.js와 같은 경로에 있는 폴더 'data'에 존재하는 파일 3개

 

 파일명: HTML

<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.

 

 파일명: CSS

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.

 

 파일명: JavaScript

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.

 

>> query의 ID가 바뀜에 따라 해당 파일명을 가진 텍스트 등장

'대딩코딩 > 웹개발 스터디' 카테고리의 다른 글

[Node.js] 6. Not found, 홈페이지 구현  (0) 2023.11.16
[Node.js] 5. boolean -> 콘솔에서의 입력값  (1) 2023.11.11
[Node.js] 3. 동적인 웹페이지 만들기  (0) 2023.11.10
[Node.js] 2. URL  (0) 2023.11.10
[Node.js] 1. Variable  (0) 2023.11.10
'대딩코딩/웹개발 스터디' Related Articles more