[Node.js] Simple Express Preject

<작성중입니다>

---

 

시작에 앞서,

Express?

 

웹 프레임워크. 대표적으로 EJS와 JADE가 있음.

 

EJS?

 

기본적으로 잘 알려진 템플릿 엔진은 ejs(Effective Javascript Templating)와 jade(또는 pug라 불림)가 있다.

ejs의 특징으로는 기본 html 문법을 그대로 사용한다.  (자세한 설명 : https://ejs.co/)

 

기본적인 문법은 다음과 같다.

 

<%=데이터 변수명%>

 

 

+ 에디터 설정

개발에 사용된 에디터는 Atom이며, 관련 설정은 아래 블로그를 참고.

https://m.blog.naver.com/azure0777/220463238616

---

1. 프로젝트 생성 & 기본 예제

---

#1. 프로젝트 생성 및 실행

- 프로젝트명 : ejs_exam

PS D:\forStudy> express --session --ejs --css styplus ejs_exam

  warning: option `--ejs' has been renamed to `--view=ejs'


   create : ejs_exam\
   create : ejs_exam\public\
   create : ejs_exam\public\javascripts\
   create : ejs_exam\public\images\
   create : ejs_exam\public\stylesheets\
   create : ejs_exam\public\stylesheets\style.css
   create : ejs_exam\routes\
   create : ejs_exam\routes\index.js
   create : ejs_exam\routes\users.js
   create : ejs_exam\views\
   create : ejs_exam\views\error.ejs
   create : ejs_exam\views\index.ejs
   create : ejs_exam\app.js
   create : ejs_exam\package.json
   create : ejs_exam\bin\
   create : ejs_exam\bin\www

   change directory:
     > cd ejs_exam

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=ejs-exam:* & npm start

PS D:\forStudy> cd ejs_exam
PS D:\forStudy\ejs_exam> npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
added 53 packages from 38 contributors and audited 141 packages in 3.743s
found 0 vulnerabilities

PS D:\forStudy\ejs_exam> npm install express --save
+ express@4.16.4
updated 1 package and audited 141 packages in 2.039s
found 0 vulnerabilities

PS D:\forStudy\ejs_exam> node ./bin/www
GET / 304 28.839 ms - -
GET /stylesheets/style.css 200 10.624 ms - 111

 

- 명령어

> express --session --ejs --css styplus ejs_exam

> cd ejs_exam

> npm install

> npm install express --save
> node ./bin/www

 

- 명령어에 대한 상세 내용

@ 추후 세션 관리를 위한 미들웨어인 express --session

> express {HTTP Session} {Templete Rendering Engine} {CSS Engine} {Project Name}

 

Http Session 사용 예정 : --session

Templete Rendering Engine은 위에서도 언급한 EJS를 사용할 예정 : --ejs

CSS Engine은 stylus를 사용할 예정 : --css stylus

프로젝트명 : express_exam

 

위 내용을 기반으로 명령어를 생성하면 다음과 같다.

> express --session --ejs --css styplus ejs_exam

---

@ npm 명령을 이용하여 패키지를 설치할때 install이 사용됨. 

> npm install

> npm install express --save (express module 설치)

---

@ 실행

 > node ./bin/www 

 

- 실행

실행 : http://localhost:3000/

 

 

---

 

#2. Routing 쪼개기 & MongoDB 데이터 읽기

 

- 목표

: Routing 경로를 추가 후 Mongo DB 연동

 

- Mongo DB 사용을 위한 Mongoose 설치

PS D:\forStudy\ejs_exam> npm install --save express mongoose body-parser
+ express@4.17.1
+ body-parser@1.19.0
+ mongoose@5.9.1
added 43 packages from 23 contributors, updated 11 packages and audited 216 packages in 7.803s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities



   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New patch version of npm available! 6.13.4 -> 6.13.7      │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.13.7   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯

PS D:\forStudy\ejs_exam>

 

- 파일 생성

: '/models/exam.js' , '/routes/mongo.js' , '/views/mongo.ejs'

 

 

 

- app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var mongoose    = require('mongoose');

// MongoDB
var db = mongoose.connection;
db.on('error', console.error);
db.once('open', function(){
    // CONNECTED TO MONGODB SERVER
    console.log("Connected to mongod server");
});

 mongoose.connect('mongodb://localhost/mongo_exam', { useNewUrlParser: true, useUnifiedTopology: true });

 // Model
 var examModel = require('./models/exam');

// App
var app = express();

// Routers
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var mongoRouter = require('./routes/mongo');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/mongo', mongoRouter);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

- /models/exam.js

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var examSchema = new Schema({
    stringA : String,
    stringB : String
});

module.exports = mongoose.model('exam', examSchema);

 

- /routes/mongo.js

var examModel = require('../models/exam');

module.exports = function(req, res, next) {
  console.log('Access to MongoDB')
  examModel.find(function(err, exams){
        res.render('mongo',
          {
            title : 'Mongo!',
            list : exams
          }
        );
  });

};

 

- /views/mongo.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>List: <%= list %></p>
  </body>
</html>

 

- 실행

node ./bin/www

http://localhost:3000/mongo

 

 

 

---

2. 응용

- 목표 : CRUD를 통해 기본적인 MongoDB 접근법과 EJS를 통한 데이터 출력에 대해 익힘.

 

---

#1. CRUD - Create

- 목표

: 파라메터를 전달받아 DB에 Create 하도록 함.

 

- 값 전달받기

 

 

---

#2. CRUD - Read

- ~~

 

~~

 

#

 

 

---

#3. CRUD - Update

- ~~

 

~~

 

#

 

---

#4. CRUD - Delete

- ~~

 

~~

 

#