Node.js 기반 홈페이지 만들기 (1) - Express, 회원가입

 

시리즈

기능 동작이 목표기 때문에 자세한 설명은 하지 않습니다.

  • IDE : WebStorm
  • DB : MongoDB
  • OS : MAC

INDEX

ExpressNode.js 웹 프레임워크입니다. 디렉토리에 Express를 설치합니다.

npm install express --save

app은 서버를 시작하며, 3000번 포트로 연결됩니다.

app.js

const express = require('express');
const app = express();
const PORT= process.env.PORT || 3000;

app.get('/', function (req, res) {
    res.send('Hello World!');
});

app.get('/bye', function (req, res) {
    res.send('Bye World!');
});

app.listen(PORT, function () {
    console.log('Example app listening on port',PORT);
});

/ 라우트의 요청에 “Hello World!”로 응답합니다.

1

/bye 라우트의 요청에 “Bye World!”로 응답합니다.

2

ejs를 템플릿으로 사용하기 위해 npm패키지를 설치합니다.

npm install ejs --save

라우터 미들웨어를 사용할 것입니다.

  • routes 폴더를 생성 후 index.js를 만듭니다.

app.js를 먼저 수정합니다. 라우트와 뷰엔진을 설정하는 코드를 추가합니다.

app.js

const express = require('express');
const app = express();
const PORT= process.env.PORT || 3000;

// routes
const indexRoute      = require("./routes/index");

// 뷰엔진 설정
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(__dirname + "/public"));

// use routes
app.use("/", indexRoute);

//listen
app.listen(PORT, function () {
    console.log('Example app listening on port',PORT);
});

route.use를 사용하여 라우트 미들웨어를 로드할 수 있습니다.

routes/index.js

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

router.get('/', (req, res) => res.render('index'));
router.get("/login", (req, res) => res.render("login", {page: "login"}));
router.get("/signup", (req, res) => res.render("signup", {page: "signup"}));

module.exports = router;

로그인, 회원가입 버튼이 동작하도록 간단한 메인페이지를 작성합니다.

views/index.ejs

3

<div id="wrap">
    <span class="title">Hello!</span>
    <div class="user">
        <input type="button" class="btn" onclick=" location.href='/login'" value="LOGIN"/>
        <input type="button" class="btn" onclick=" location.href='/signup'" value="SIGNUP"/>
    </div>
</div>

SIGNUP

회원가입을 위해 먼저, 데이터베이스를 연결해야합니다. 자바스크립트 객체를 사용할 수 있게 해주는 오브젝트 모델링을 제공하는 Mongoose(몽구스)를 사용하기 위해 모듈을 설치합니다.

npm install mongoose --save

모듈을 부르고, 데이터베이스에 연결하는 코드를 추가합니다.

app.js

const mongoose = require('mongoose');
// DB연결
let url =  "mongodb://localhost:27017/dalhav";
mongoose.connect(url, {useNewUrlParser: true});

스키마와 모델을 정의한 뒤, 모듈화합니다. email, password, name의 type은 String으로 정의하고, isAdmin은 Boolean으로 정의합니다. 추가로 입력받고 싶은 값이 있다면 추가해도 됩니다.

models/user.js

const mongoose = require("mongoose");

const UserSchema = new mongoose.Schema({
    email: { type: String, unique: true, required: true },
    password: { type: String, required: true },
    name :{ type: String, required: true },
    isAdmin: { type: Boolean, default: false }
});

module.exports = mongoose.model("User", UserSchema);

회원가입 페이지를 간단하게 작성합니다. form의 action은 /signup 그리고 method는 post로 합니다.

views/signup.ejs

4

<form action="/signup" method="POST" class="signupform">
        <label for="email">E-MAIL</label>
        <input name="email" type="email" required />
        <label for="password">PASSWORD</label>
        <input name="password" type="password" required />
        <label for="name">NAME</label>
        <input name="name" type="text" required />
        <label for="adminCode">ADMIN CODE</label>
        <input name="adminCode" type="text"/>
        <button class="btn">SIGNUP!</button>
    </form>

이제 post메소드의 body에서 form값들을 가져와 데이터베이스에 저장하는 코드를 작성합니다. 먼저, 위에서 작성한 user model 그리고 mongoose를 require합니다.

routes/index.js

const User = require("../models/user");
const mongoose = require("mongoose");
  • 먼저, email을 기존 DB에서 비교해 중복되면 저장하지 않고, 알림을 띄운 뒤, 회원가입 페이지로 다시 리다이렉트합니다.
  • email이 중복되지 않으면, 데이터베이스에 저장한 뒤, 값들을 console에 출력합니다.

routes/index.js

router.post("/signup", (req, res, next) => {
    console.log(req.body);
    User.find({ email:req.body.email })
        .exec()
        .then(user => {
            if (user.length >= 1) {
                res.send('<script type="text/javascript">alert("이미 존재하는 이메일입니다."); window.location="/signup"; </script>');
            } else {
                const user = new User({
                    _id: new mongoose.Types.ObjectId(),
                    name:req.body.name,
                    email: req.body.email,
                    password: req.body.password
                });
                user
                    .save()
                    .then(result => {
                        console.log(result);
                        res.redirect("/");
                    })
                    .catch(err => {
                        console.log(err);
                    });
                  }
        });
});

여기까지 코드를 작성하고, 회원가입을 해보면 분명 에러가 뜰 것입니다. req.body는 디폴트로 Undefined이 설정되어있기 때문입니다.

그래서 body-parser를 이용해 body로부터 파라미터를 추출해야합니다. 간단하게 body-parser는 post body를 파싱하기 위한 미들웨어입니다. 먼저, body-parser를 npm으로 설치합니다.

npm install body-parser --save

body-parser를 express에 붙여서 사용하기 위해 코드를 추가합니다.

app.js

const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended: true}));

이제, 회원가입을 해보면 정상적으로 처리가 될 것입니다.

5

데이터베이스에 정상적으로 저장된 것을 볼 수 있습니다.

  • MongoDB 툴인 ROBO 3T를 사용하면, 데이터베이스를 쉽게 보고, 관리할 수 있습니다.

6

앞으로 업로드 할 글 예정

  • 2번째 글 : 게시글 올리기, 게시글 보기
  • 3번째 글 : 비밀번호 해쉬처리, 로그인, 로그아웃
  • 4번째 글 : 이메일 인증, 내정보 수정
  • 5번째 글 : 관리자

https://github.com/dalhav/simple-nodejs-page/tree/master 에서 이 글에서 사용한 코드를 볼 수 있습니다.