Node.js

생활코딩 Node.js (1)

유호야 2023. 9. 9. 06:35
반응형

생활코딩으로 Node.js 강의를 시작해본다.

목표는 결제 모듈 구현하기!

Node.js - 1.수업소개

자바스크립트는 독점적인 언어이자, 웹 브라우저에 갇힌 언어라고 말할 수 있었다.

 

Node.js - 2. 수업의 목적

이런 코드가 node.js를 배우고 나면 아래와 같이 변경할 수 있게 될 것이다.

 

 

마치 template.js에 있는 HTML의 양식을 담아 놓은 것과 같다.

 

WEB을 통해서 읽기/쓰기/삭제를 사용자들이 조정할 수 있게끔 만들 수 있다.

PHP, JSP, RUBY, PYTHON의 DJANGO가 경쟁 기술이라고 할 수 있다.

 

Nodejs - 3.설치

 

Nodejs - 3.1.설치 (Windows)

 

설치 후에

 

node.js에게 코드를 실행하라고 하는 것

그럼 해당 파일에 있는 코드가 실행된다.

 

반응형

 

 

Node.js - 4.공부방법

node.js로 만든 웹 application!

 

 

 

 

var http = require("http");
var fs = require("fs");
var app = http.createServer(function (request, response) {
  var url = request.url;
  if (request.url == "/") {
    url = "/index.html";
  }

  if (request.url == "/favicon.ico") {
    // return response.writeHead(404);

    response.writeHead(404);
    console.log(__dirname + url);
    response.end();
    return;
  }
  response.writeHead(200);
  // response.end(fs.readFileSync(__dirname + url));
  response.end('egoing " +' + url);
});
app.listen(3000);

 

__dirname  부분이 뜨지 않는다!

 

자바스크립트 강의 부분 스킵

 

Node.js - 9.URL의 이해

포트번호 80번은 생략할 수 있다.

 

Node.js - 10.URL을 통해서 입력된 값 사용하기

쿼리스트링에 따라 다른 정보를 보여주는 기능을 만들어 볼 것이다.

쿼리스트링을 알아내는 방법은?

Node.js-11.App 제작-동적인 웹페이지 만들기

ID=값대로 TITLE을 변경하는 작업을 했다

 

 

Node.js-12.Node.js의 파일 읽기 기능

 

 파일을 읽기 위해서 아래와 같은 코드를 사용했는데

찾기가 어려운 것 같다

 

const fs = require("fs");
fs.readFile("sample.txt", "utf8",  function (err, data) {
  console.log(data);
});

 

 

Node.js-13.App 제작- 파일을 이용해 본문 구현

파일을 위치에 맞게 잘 넣어야 한다.

var http = require("http");
var fs = require("fs");

let url = require("url");

var app = http.createServer(function (request, response) {
  let _url = request.url;
  let queryData = url.parse(request.url, true).query;
  let title = queryData.id;
  console.log(queryData.id);

  console.log(url);
  if (_url == "/") {
    title = "WELCOME";
  }

  if (_url == "/favicon.ico") {
    // return response.writeHead(404);

    response.writeHead(404);
    console.log(__dirname + _url);
    response.end();
    return;
  }
  response.writeHead(200);
  fs.readFile(`data/${queryData.id}`, "utf8", function (err, description) {
    let 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="1.html?id=HTML">HTML</a></li>
    <li><a href="2.html?id=CSS">CSS</a></li>
    <li><a href="3.html?id=Javascript">JavaScript</a></li>
  </ol>
  <h2>${title}</h2>
  <p>${description}</p>
</body>
</html>
  `;
    response.end(template);
    // 사람들이 접속한 코드에 따라서 파일을 읽어주는 코드
    // response.end('egoing " +' + url);
  });

  // response.end(fs.readFileSync(__dirname + _url));
});
app.listen(3000);

 

 

Node.js-18.NodeJS-콘솔에서의 입력값

 

Node.js-19.1.App 제작-Not found 구현

let http = require("http");
let fs = require("fs");
let url = require("url");

let app = http.createServer(function (request, response) {
  let _url = request.url;
  let queryData = url.parse(_url, true).query;
  let pathname = url.parse(_url, true).pathname;
  let title = queryData.id;

  console.log("queryDataaaaaaaaaa: ", queryData.id, title);

  console.log(url.parse(request.url, true));
  console.log(pathname);

  console.log("------------- title ", title);
  if (pathname === "/") {
    fs.readFile(`data/${queryData.id}`, "utf8", function (err, description) {
      let 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.writeHead(200);
      response.end(template);
      // 사람들이 접속한 코드에 따라서 파일을 읽어주는 코드
      // response.end('egoing " +' + url);
    });
  } else {
    response.writeHead(404);
    response.end("Not Found");
  }

  // response.end(fs.readFileSync(__dirname + _url));
});

app.listen(3000);

 

/1.html 처럼 파일이름 작성하지 않아도 쿼리스트링으로 불러올 수 있음!

 

Node.js-19.2.App 제작-홈페이지 구현

let http = require("http");
let fs = require("fs");
let url = require("url");

let app = http.createServer(function (request, response) {
  let _url = request.url;
  let queryData = url.parse(_url, true).query;
  let pathname = url.parse(_url, true).pathname;
  let title = queryData.id;

  console.log("queryDataaaaaaaaaa: ", queryData.id, title);

  console.log(url.parse(request.url, true));
  console.log(pathname);

  console.log("------------- title ", title);
  if (pathname === "/") {
    if (queryData.id === undefined) {
      fs.readFile(`data/${queryData.id}`, "utf8", function (err, description) {
        let title = "Welcome";
        description = "Hello Node.js";
        let 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.writeHead(200);
        response.end(template);
        // 사람들이 접속한 코드에 따라서 파일을 읽어주는 코드
        // response.end('egoing " +' + url);
      });
    } else {
      fs.readFile(`data/${queryData.id}`, "utf8", function (err, description) {
        let 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.writeHead(200);
        response.end(template);
        // 사람들이 접속한 코드에 따라서 파일을 읽어주는 코드
        // response.end('egoing " +' + url);
      });
    }
  } else {
    response.writeHead(404);
    response.end("Not Found");
  }

  // response.end(fs.readFileSync(__dirname + _url));
});

app.listen(3000);

 

https://www.youtube.com/watch?v=p3wQFtca7jQ 

 

반응형