Node-js-1

May 6, 2021

Node-js - Log in 기능 만들기

Express()
Routes, MVC설계 모델 : M(Module)V(Views)C(Controller)
app.set(‘view engine’, ejs)

Express로 서버 띄우기 (nodejs 설치 후, 서버 생성)

터미널 명령어
npm install express –save express module 설치
node modul내에 express module 생성, package.json 에서 설정 관리가 가능할 수 있게 함.

const express = require("express");
const app = express();

app.listen(3000, function () {
  console.log("서버가동");
});

로컬 호스트 : 3000 접속시 console에 서버가동 메세지 출력, 홈페이지 실행 가능

루트에서 출력하게 하려면 ?

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("여기는 루트입니다. ");
});
app.listen(3000, function () {
  console.log("서버가동");
});

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("여기는 루트입니다. ");
});

app.get("/login", (req, res) => {
  res.send("여기는 로그인 화면 입니다.");
});
app.listen(3000, function () {
  console.log("서버가동");
});

http로 서버 띄우기.

const http = require("http");
const app = http.createServer();

app.listen(3001, () => {
  console.log("http로 가동된 서버입니다.");
});

이 상태에선 서버는 들어갈 수 있다.. 하지만 “/” (루트) 가 없어서 서버가 실행되지 않는다.

const http = require("http");
const app = http.createServer((req, res) => {
  if (req.url === "/") {
    res.end("여기는 루트 입니다.");
  } else if (req.url === "/login") {
    res.end("여기는 로그인 화면입니다.");
  }
});

app.listen(3001, () => {
  console.log("http로 가동된 서버입니다.");
});

이렇게 require 했을 때, 콜백 함수를 만들어서 현재의 상태를 나타내는 값을 respond해준다.
–> 하지만 한글이 안뜬다 !

const http = require("http");
const app = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
  if (req.url === "/") {
    res.end("여기는 루트 입니다.");
  } else if (req.url === "/login") {
    res.end("여기는 로그인 화면입니다.");
  }
});

app.listen(3001, () => {
  console.log("http로 가동된 서버입니다.");
});

그래서 위와 같이 if 문 전에 다음 문장을 써서 한글로 변경 시켜준다.
**http는 한글 변경의 어려움과 코드의 복잡성 때문에 express 를 이용해준다.

로그인 화면 만들기. ( 하드 코딩 )

express를 이용할 때, 로그인 화면에 html을 보여줄 때는 respond에 보내준다.

app.get("/login", (req, res) => {
  <!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>
    <input type="text" placeholder="아이디" /><br />
    <input type="text" placeholder="비밀번호" /><br />
    <button>로그인</button>
  </body>
</html>
});

이처럼 respond 해줄 때 html 파일을 보내주면 홈페이지가 나온다.
그런데 위와 같은 방법은 효율적이지 못하다. -> 모듈화 작업을 진행한다.

로그인 뷰 최적화 / MVC의 V (Views) 분리

app.js의 모듈화를 위해 세팅은 다음과 같다.
ejs 엔진을 이용해서 html 파일이 아닌 ejs 파일로 접근하게 세팅해준다.
보내줄 respond는 render함수를 통해 폴더에 접근 가능하게 만든다.

const express = require("express");
const app = express();

app.set("views", "./views");
app.set("view engine", "ejs");

app.get("/", (req, res) => {
  res.render("home/index");
});

app.get("/login", (req, res) => {
  res.render("home/login");
});

app.listen(3000, function () {
  console.log("서버가동");
});

이 때, 폴더들은 다음과 같이 구성해준다.

index와 login에서는 각 주소에 들어갔을 때, html을 보여준다.
서버를 실행하면 아마 안될 것이다. ejs엔진을 설치해야하기 때문이다.
npm install ejs -s (terminal) 를 이용해서 설치를 해주자.

이 상태에서 app.js를 더 간단하게 만들어주는 방법을 만든다.

라우팅 분리

이제 로그인, home을 이용하는 라우터를 만든다.
routes 폴더를 만들어서 index.js를 만든다.

이 안에 다음과 같이 코드를 짜주고, module을 밖에서 쓸 수 있도록 module.exports = router을 해준다.

//index.js 
"use strict";

const express = require("express");
const router = express.Router();
app.get("/", (req, res) => {
  res.render("home/index");
});

app.get("/login", (req, res) => {
  res.render("home/login");
});

module.exports = router;

routes에 요청할 수 있도록 require해주고, app에서 use할 수 있게 한다.

//app.js
"use strict";

// 모듈
const express = require("express");
const app = express();

const PORT = 3000;
// routing
const home = require("./routes/home"); // 홈 / routes / home / index 파일 요청

// 앱세팅
app.set("views", "./views");
app.set("view engine", "ejs");

app.use("/", home); // 미들웨어를 등록해주는 메소드.

app.listen(PORT, function () {
  console.log("서버가동");
});

** port는 변수로 저장해서 쓴다. 각 종류끼리 묶어서 변수를 놓는다.

MVC 중 C (Controller) 분리하기

index.js에서 controll 기능을 담당하는 것은 require, respond 하는 부분이다.

(req, res) => {
  res.render("home/index"); }

이 부분을 home.ctrl 폴더에 넣어 컨트롤을 할 수 있게 한다. 결과는 다음과 같다.

//home.ctrl.js
"use strict";

const home = (req, res) => {
  res.render("home/index");
};

const login = (req, res) => {
  res.render("home/login");
};

module.exports = {
  home,
  login,
};

모듈을 다시 뺴줬기 때문에 밖에서 사용이 가능하도록 module.exports를 해준다.
** 객체로 보낼 때, key : value 형태인데 key만 쓴다면, key : key 값으로 받는다. (ES6 추가 기능)

모듈을 보냈기에 index에서 컨트롤을 가져올 수 있도록 한다.

//index.js
"use strict";

const express = require("express");
const router = express.Router();

const ctrl = require("./home.ctrl");

router.get("/", ctrl.home);

router.get("/login", ctrl.login);

module.exports = router;

app.listen 모듈화

이전에 했던 것과 마찬가지로 listen부분도 모듈화를 해준다.
이제 실행은 app.js 가 아닌 ./bin/www.js 에서 실행한다.

//www.js
"use strict";

const app = require("../app");
const PORT = 3000;

app.listen(PORT, () => {
  console.log("서버가동");
});

"use strict";

// 모듈
//app.js
const express = require("express");
const app = express();

// routing
const home = require("./routes/home"); // 홈 / routes / home / index 파일 요청

// 앱세팅
app.set("views", "./views");
app.set("view engine", "ejs");

app.use("/", home); // 미들웨어를 등록해주는 메소드.

module.exports = app;

어떤 변수를 가져올 때는 내보내는 곳과 가져오는 곳 둘다 신경써야한다.

<정리>

app.js에서 서버 가동 실행.

const express = require("express");
const app = express();

app은 ‘express’ framework를 이용

const home = require("./routes/home");

home은 ./routes/home ( 홈 -> routes -> home ) 과 같이 경로를 가진다.

app.set("views", "./views");
app.set("view engine", "ejs");

app.set 은 views -> ./views 로 경로 설정 & view engine -> ejs 로 엔진 설정

app.use("/", home);

app.use(“/”, home) 의 의미는 서버가 루트에 있을 때 home을 실행하라는 의미.

home ( /routes/home ) 실행 시 index.js 실행

const express = require("express");
const router = express.Router();

router연결

const ctrl = require("./home.ctrl");

ctrl 실행 시 해당 경로로 require

router.get("/", ctrl.home);
router.get("/login", ctrl.login);

router에 루트 경로가 왔을 때, login 경로가 왔을 때, ctrl내의 객체 값으로 보내준다.

module.exports = router;

router가 밖에서 원하는 요청을 받을 수 있도록 해준다.

Router분리 app.use에서 home 실행 시 express내에서 해당 경로로 require 요청하는 것 같다. router는 그 요청이 왔을 때 받는 방법(?) 같다.

ctrl로 요청을 했을 때 home.ctrl에서의 명령

const home = (req, res) => {
  res.render("home/index");
};

req가 왔을 떄 respond는 app.set에서 해준 view값으로 보여주기 위해 render을 해준다.
./views/home/index -> ejs폴더로 넘어가도록한다. // login도 마찬가지
–> render() 이라는 function 자체에서 views 내에 ejs 폴더를 가져온다.
Render link

module.exports = {
  home,
  login,
};

객체화 시켜서 외부에서 접근 가능하도록 한다.

Twitter Facebook LinkedIn

Hyuns Kim

Node-js-1

Node-js - Log in 기능 만들기

Express로 서버 띄우기 (nodejs 설치 후, 서버 생성)

http로 서버 띄우기.

로그인 화면 만들기. ( 하드 코딩 )

로그인 뷰 최적화 / MVC의 V (Views) 분리

라우팅 분리

MVC 중 C (Controller) 분리하기

app.listen 모듈화

<정리>

공유하기

참고

JavaScript-Basic Grammer

Deep Mind - Alphacode

노타 코딩테스트 & LG전자 사전점검

[백준] 단어정렬