Node.js Crash Course(1~6)

➰With out Express.js

📃 server.js

const http = require("http");
const fs = require("fs");
const _ = require("lodash");

const server = http.createServer((req, res) => {
  // lodash

  // _.random(from, to)
  const num = _.random(0, 20);
  console.log(num);

  //_.once(funciton)
  const greet = _.once(() => {
    console.log("hello");
  });

  greet();
  // set header content type
  // write res
  // end res
  res.setHeader("Content-Type", "text/html");

  // routing
  let path = "./views/";
  switch (req.url) {
    case "/":
      path += "index.html";
      res.statusCode = 200;
      break;
    case "/about":
      path += "about.html";
      res.statusCode = 200;
      break;
    case "/about-me": // Moved Permanently
      res.statusCode = 301;
      res.setHeader("Location", "/about");
      res.end();
      break;
    default:
      path += "404.html";
      res.statusCode = 404;
      break;
  }

  //send an html file
  fs.readFile(path, (err, data) => {
    if (err) {
      console.log(err);
      res.end();
    } else {
      // res.write(data);
      res.end(data);
    }
  });
});
// create server first argument => callback function requsest가 들어올 떄 마다 실행되는 함수이다.
// res header setting
// --save => save to local dependencies for oldversion node js

server.listen(3000, "localhost", () => {
  console.log("listening for requests on port 3000");
});

➰With Express.js

📃 app.js

const express = require("express");

// express app
const app = express();

// listen for requests
app.listen(3000);

app.get("/", (req, res) => {
  // res.write('')
  // res.send("<p>home page</p>");
  res.sendFile("./views/index.html", { root: __dirname });
  // res.end();
});

app.get("/about", (req, res) => {
  // res.send("<p>about page</p>");
  res.sendFile("./views/about.html", { root: __dirname });
});

// redirects
app.get("/about-us", (req, res) => {
  res.redirect("/about");
});

// 404 page
app.use((req, res) => {
  // 모든 requset에 적용 그러나 위에서 부터 아래로 적용 하므로 / /about /about-us 가 아닌 모든 URL에 적용된다.
  // res.statusCode = 404;
  res.status(404).sendFile("./views/404.html", { root: __dirname });
});

➰With Template Engine(ejs)

❔ What is Template Engine

📃 app.js

const express = require("express");

const app = express();

// register view engine
// set ejs view engine
// ejs automaticly checks views folder
🚗 app.set("view engine", "ejs");
// app.set('views', 'myviews');

app.listen(3000);

app.get("/", (req, res) => {
  const blogs = [
    { title: "asdfsdf", snippet: "slekfjselkfj" },
    { title: "sdfsfsef", snippet: "sefseafsdf" },
    { title: "wefsef", snippet: "sdfsefasefse" },
  ];
  res.render("index", { title: "Home", blogs });
});

app.get("/about", (req, res) => {
  res.render("about", { title: "About" });
});

app.get("/blogs/create", (req, res) => {
  res.render("create", { title: "Create a new Blog" });
});

app.use((req, res) => {
  res.status(404).render("404", { title: "404" });
});

📋Memo(app.js)

🚗 app.set("view engine", "ejs");
1. ejs automaticly checks views folder

📁views ➡ 📁partials ➡📃 head.ejs

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Ninja | <%= title %></title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');
    body{
      max-width: 1200px;
      margin: 20px auto;
      padding: 0 20px;
      font-family: 'Noto Serif', serif;
      max-width: 1200px;
    }
    p, h1, h2, h3, a, ul{
      margin: 0;
      padding: 0;
      text-decoration: none;
      color: #222;
    }
    /* nav & footer styles */
    nav{
      display: flex;
      justify-content: space-between;
      margin-bottom: 60px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
      text-transform: uppercase;
    }
    nav ul{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
    nav li{
      list-style-type: none;
      margin-left: 20px;
    }
    nav h1{
      font-size: 3em;
    }
    nav p, nav a{
      color: #777;
      font-weight: 300;
    }
    footer{
      color: #777;
      text-align: center;
      margin: 80px auto 20px;
    }
    h2{
      margin-bottom: 40px;
    }
    h3{
      text-transform: capitalize;
      margin-bottom: 8px;
    }
    .content{
      margin-left: 20px;
    }
    /* index styles */
    /* details styles */
    /* create styles */
    .create-blog form{
      max-width: 400px;
      margin: 0 auto;
    }
    .create-blog input,
    .create-blog textarea{
      display: block;
      width: 100%;
      margin: 10px 0;
      padding: 8px;
    }
    .create-blog label{
      display: block;
      margin-top: 24px;
    }
    textarea{
      height: 120px;
    }
    .create-blog button{
      margin-top: 20px;
      background: crimson;
      color: white;
      padding: 6px;
      border: 0;
      font-size: 1.2em;
      cursor: pointer;
    }
    </style>
</head>

📁views ➡ 📁partials ➡📃 nav.ejs

<nav>
    <div class="site-title">
        <a href="/">
            <h1>Blog Ninja</h1>
        </a>
        <p>A Net Ninja Site</p>
    </div>
    <ul>
        <li><a href="/">Blogs</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/blogs/create">New Blog</a></li>
    </ul>
</nav>

📁views ➡ 📁partials ➡📃 nav.ejs

<footer>
    Copyright &copy; Blog Ninja 2021
</footer>

📁views ➡ 📃 index.ejs

<!DOCTYPE html>
<html lang="en">
    <%- include('./partials/head.ejs') %>
<body>

    <%- include('./partials/nav.ejs') %> 

    <div class="blogs content">
        <h2>All Blogs</h2>

        <% if(blogs.length > 0)  { %>
            <% blogs.forEach(blog => { %>
                <h3 class="title"><%= blog.title %> </h3>
                <p class="snippet"><%= blog.snippet %> </p>
            <% }) %> 
        <% } else { %> 
            <p>There are no blogs to display...</p>
        <% } %> 
    </div>
    <%- include('./partials/footer.ejs') %>
</body>
</html>

📁views ➡ 📃 about.ejs

<!DOCTYPE html>
<html lang="en">

<%- include('./partials/head.ejs') %>

<body>
<%- include('./partials/nav.ejs') %>

    <div class="blogs content">
        <h2>About Us</h2>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
    </div>
    <%- include('./partials/footer.ejs') %>
</body>

</html>

📁views ➡ 📃 create.ejs

<!DOCTYPE html>
<html lang="en">

<%- include('./partials/head.ejs') %>

<body>
<%- include('./partials/nav.ejs') %>

    <div class="create-blog content">
        <form>
            <label for="title">Blog title</label>
            <input type="text" id="title" required>
            <label for="snippet">Blog snippet</label>
            <input type="text" id="snippet">
            <label for="body">Blog body</label>
            <textarea id="body"required></textarea>
            <button>Submit</button>
        </form>
    </div>
    <%- include('./partials/footer.ejs') %>
</body>

</html>

📁views ➡ 📃 404.ejs

<!DOCTYPE html>
<html lang="en">

<%- include('./partials/head.ejs') %>

<body>
    <%- include('./partials/nav.ejs') %>

    <div class="not-found content">
        OOPS, page not found :)
    </div>
    <%- include('./partials/footer.ejs') %>
</body>

</html>
Kivy#001_Layout、Button、Scatter
1.10 수령, 설정 날짜 및 지연 시간

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage