Node.js(8) - express

1) Node.js

   1-1) express

 

 

 

 

1) Node.js

1-1) express

지난 블로그 글(Node.js 기초(7) - HTTP, 동적 웹 페이지 구현)에서 정적 파일 구현한 것까지 express로 구현할 예정!

• req 객체
• res 객체
• bodyParser
• static
• template engine

새로 사용해 본 것

• request method : POST
• redirect

위의 내용들을 express로 구현할 예정!!

"express"는 Node.js의 외장모듈이기에

기본적으로 설치를 진행(이때 template engine 또한 설치해줘야 하는데

우리는 express 내의 여러 template engine 중 "nunjucks"를 사용할 예정)해야 하는데,

설치에 앞서 "npm init"을 통해 package.json 파일을 먼저 생성해줘야함!

$ npm init -y  # package.json 생성
$ npm install express nunjucks  # "node_modules" 디렉토리 생성

 

위와 같이 shell 명령어를 실행한 뒤 해당 결과를 자신의 git에 업로드하려는 경우에는
".gitignore"에 node_modules를 올려준다!!
(이는 node_modules 폴더 내의 파일 양이 너무 많기 때문에

굳이 해당 디렉토리를 올리지 않고, 나중에 "npm install"을 써서 다시 다운로드받으면 됨!!)

$ npm install

 

server.js

const express = require("express");
const nunjucks = require("nunjucks"); // express의 여러 template engine 중 nunjucks를 사용함!!
const app = express(); // 이를 TCP와 비교하면 해당 코드는 "const server = net.createServer()"와 동일하다고 보면 됨!!
const PORT = process.env.SERVER_PORT || 3000;

app.set("view engine", "html"); // express가 template engine을 사용하겠다는 선언의 의미로 사용된 코드
nunjucks.configure("views", {
  express: app,
}); // "server.js" 파일 기준으로 "views" 디렉토리가 있다는 의미

// app.use(express.static("public")); // http://localhost:3000/css/index.css, http://localhost:3000/js/index.js

// bodyParser 역할
app.use(express.urlencoded({ extended: false })); // Content-Type:application/x-www-form-urlencoded(Content-Type이 "queryString"인 경우)

/*
// "app.use()"는 request method가 GET이든 혹은 POST이던 간에 "path"만 확인하고 무조건 실행시킴!!
// 해당 "app.use()" 코드는 next 함수가 없기 때문에 다음 것을 실행시키지 않는데
// 만일 아래 "app.use()" 코드에 next 함수를 추가한다면 동일한 request path("/")를 지닌 다음 Router를 이어서 실행시킴!!
app.use("/", (req, res) => {
  console.log("이것은 use입니다~");
  res.send("hello sangbeom!!!");
});
*/

/*
// 아래 코드는 request method(GET, POST, PUSH, DELETE)에 상관없이 그리고 path가 없어도 무조건 실행시키겠다는 의미이다!
// 즉, 아래 코드는 어떤 요청이 들어와도 무조건 해당 코드만 실행시키겠다는 뜻이다!!
app.use((req, res) => {
  console.log("이건 use입니다!");
  res.send("hello sangbeom");
});
*/

/*
// 아래처럼 callback 등과 같은 특정 변수에 "callback 함수" 내용을 담아서 "app.use()"에 넣어줘도 해당 코드는 정상적으로 실행됨!!
const callback = (req, res, next) => {
  console.log("hello world!");
  next();
};
app.use(callback);
*/

// Router : 요청이 들어오면 어떤 것을 실행시킬지 방향을 가리켜주는 것으로 "app.get('/', callback 함수)"과 같이 일종의 분기처리된 코드를 뜻함!!
// "app.get('/', callback 함수)"과 같은 Router에서 "callback 함수"를 "미들웨어"라 하는데 이는 해당 callback 함수가 마치 미들웨어처럼 중간에 여러 개를 넣어서 실행시킬 수 있기 때문이다(이는 한 Router에 callback 함수, 즉 미들웨어를 2개 이상 넣을 수 있음을 의미함)!!
// 아래 코드는 request method가 "GET"이고, request path가 "/"일 때 해당 callback 함수를 실행시킨다는 의미이다!!
// req : request message의 내용이 파싱된 것이 들어옴, res : response message를 만들어주는 response 객체가 들어감
app.get("/", (req, res) => {
  const name = req.query.name;
  console.log(req.query.name); // "http://localhost:3000/?name=sangbeom"을 URI로 입력한 경우, 이 중 queryString의 내용 중 "sangbeom"을 console.log()로 찍는 코드

  // res.send() : 웹 서버가 client(브라우저)에게 response message를 만들어서 줌!!
  // res.send("hello world!");

  // template engine이 설정되면 "render" 메서드를 사용할 수 있음!!
  res.render("index.html", { name: name }); // render 메서드를 통해 body 내용을 만들어서 응답을 주겠다는 의미!
});

// 미들웨어를 이해하기 위한 코드
/*
app.get(
  "/",
  (req, res, next) => {
    console.log(req.query.name); // sangbeom
    next(); // "next 함수"를 실행시키면 해당 콜백함수 실행이 끝난 뒤 바로 아래 콜백함수를 이어서 실행시킴!!
  },
  (req, res) => {
    console.log("되나~?");
    res.send("hello world!");
  }
);
*/

app.get("/user/join", (req, res) => {
  res.render("user/join.html");
});

app.post("/user/join", (req, res) => {
  console.log(req.body);
  /*
  // 구조분해할당을 사용한 코드 버전
  const {userid, userpw, username} = req.body;
  console.log(userid);
  console.log(userpw);
  console.log(username);
  */
  // res.send("hello~~~");
  res.redirect("/user/welcome");
});

app.get("/user/welcome", (req, res) => {
  res.send("회원가입 성공~~~");
});

// "app.listen()"의 경우, "server.listen()"과 달리 인수 중 HOST가 빠지는데 여기서 HOST는 내 컴퓨터를 가리키기 때문에 빠져도 되기 때문에 뺌!!
// "app.listen()"은 웹 서버가 꺼지지 않고 프로세스가 계속 돌아가는 형태, 즉 서버가 "대기 모드"임을 의미함!!
app.listen(PORT, () => {
  console.log("server start");
}); // "server.listen()"과 동일함!!

// "server.listen()"의 인수는 총 3개로 이는 순서대로 "PORT", "HOST", "callback 함수"이다!!

 

index.html

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <link rel="stylesheet" href="/css/index.css" />
    <script src="/js/index.js" type="text/javascript"></script>
  </head>
  <body>
    {{name}} 님 환영합니다~
  </body>
</html>

 

index.css

* {
  margin: 0;
  padding: 0;
}

body {
  background: #bea;
}

 

index.js

alert("Success~~?");

 

join.html

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <form method="post" action="/user/join">
      <div>
        <input type="text" name="userid" placeholder="아이디를 입력해주세요." />
      </div>
      <div>
        <input
          type="password"
          name="userpw"
          placeholder="패스워드를 입력해주세요."
        />
      </div>
      <div>
        <input type="text" name="username" placeholder="이름을 입력해주세요." />
      </div>
      <div>
        <button type="submit">전송</button>
      </div>
    </form>
  </body>
</html>