Mean스텍 입문 (3) Angular 프론트에서 데이터베이스와 연결하기

(3) Angular 프론트에서 데이터베이스와 연결하기

database.js 파일을 활용해서 mlab.com과 연결하려면 위와 같은 로직을 갖춘다. 'db url : '부분은 config.js 모듈을 만들어서 관리해야 하겠지만, 설명을 용도로 코드를 너무 난잡(?)하게 분리해버리면 설명하기가 힘들다;

 

node.js는 자바스크립트를 사용한다. 자바스크립트는 객체지향 방식으로 병렬처리가 가능하다. ES6 이후부터 module과 class를 지원하면서 완벽하게 병렬처리를 사용할 수 있게 되었다. node.js로 패턴을 적용하는 방식으로 서버를 구성해야만 node.js를 활용한 대규모 프로그램을 제작할 수 있다. 이번 포스팅에서는 간단히 서버를 나눠서 병렬처리를 해보자. 

 

angular cli로 기본만 설치한 이 시점에서, 폴더 구조는 아래와 같다.

이제 필요한 폴더는

---

1. 폴더 : server, models, routes (총 3개 폴더)

2. 파일 : post.js(models폴더 아래) ,  api.js (routes폴더 아래)  (총 2개) 

3. 임시 파일 및 폴더 : temp 폴더, write.html 파일  (총 2개)

---

폴더랑 파일을 모두 합쳐 총 7개를 작성해보자.

 

 

1. server.js

 

1-1. 코드 (빨간색 부분: 추가된 코드)

---

[기본 Express 실행코드]

 

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const http = require('http');
const app = express();
const api = require('./server/routes/api');

 

// BodyParser 미드웨어

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended:false }));

 

// 서버 static

app.use(express.static(path.join(__dirname,'dist')));

 

// Set Main 라우팅

app.use('/api',api);

app.get('*',(req,res)=>{
 res.sendFile(path.join(__dirname,'dist/index.html'));
});

 

// set Port

const port = process.env.PORT || '3000';
app.set('port',port);

 

// Create the HTTP Server

const server = http.createServer(app).listen(app.get('port'),function(){

 console.log('서버가 시작되었습니다. 포트:'+app.get('port'));

 console.log('//WebDoLi mlab.com Database init 시작//');

});

---

앞서 작성한 server.js 파일과 달라진 점은, api 모듈을 불러온다는 점이다.  (Create Http server부분도 달라졌지만 지난번 코드를 그대로 사용하더라도 무방) server 폴더를 하나 만들고, 그 안에 routes 폴더를 만든 후에 api.js 파일을 일단 생성하자.

 

2. server, models, routes폴더, api.js파일 생성

 아래와 같이 server폴더를 생성한다.

server폴더 아래에 modes, routes 폴더를 생성한다.

-> routes 폴더 아래에 api.js 파일을 만든다.

 

3. api.js 파일 코딩

 3-1 모듈 import하기

---

 //모듈 불러오기

const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');
const post = require('../models/post');
const db = 'mongodb:

 

//<mlab DB user아이디(접속 아이디(X))>:

//<mlab DB 비번(접속비번(X)>@ds111469.mlab.com:11469/webdoliblog';

var bodyParser = require('body-parser');

var path = require('path');

---

mlab db user id와 비밀번호는 config파일로 따로 모듈관리를 해야 하지만 실험파일 특성상 그대로 코딩한다. express, router, mongoose, bodyParser(html폼에서 db로 파일 넣을 때 사용하는 미드웨어), path까지는 기존의 소스를 그대로 붙인다.

 

위의 post 변수는 DB Collection 스키마 정보가 담겨 있기 때문에 db파일을 불러오거나 넣을 때 사용된다. 빨간색 글씨는 새로 파일을 만들어줘야 하는 부분이다.

 

3-2. DB설정하기

---

 

//DB설정

mongoose.Promise = global.Promise; 
mongoose.connect( db, function(err){

          if(err){
                     console.log('DB Connect Error');
                } });

---

mongoose.Promise, connect,  db, db.on은 몽구스 지시사항대로 작성한다.

 

3-3 라우팅 설정

---

router.get('/posts',function(req,res){

 

        post.find({ }).exec(function(err,posts){
             

                   if(err){
                       console.log(err);
                          }else{
                               res.json(posts);
                          }
                   })
           });

module.exports = router;

---

위의 코드는 get방식(url에 타이핑하는 방식)으로써 localhots:3000/api/posts 라고 입력하면, mlab DB에 있는 postings Collection의 값을 찾아서(find({})) exec 실행한 값을 posts 객체에 담고, res.json, json 형태로 화면에 전송한다.

 

4. post.js 스키마 생성

몽구스로 DB에 데이터를 넣거나 읽으려면, 스키마 파일을 생성해야 한다. 스키마 파일은 데이터의 형식을 지정해주고, 명세를 나타내는 역할을 해준다.

 

[post.js]

---

var mongoose = require('mongoose');

var Schema = mongoose.Schema;

var postSchema = new Schema({

 

     title : String,
     url : String,
     description : String

});

 

module.exports = mongoose.model('posting',postSchema);

---

 

title, url, description 이란 스키마를 생성해주는 post 스키마 파일이다. 빨간색 'posting'에는 mlab.com에서 DB를 넣어줄 Collection 이름을 타이핑한다.

 

5. 라우팅 추가 세팅

DB에 파일이 들어가는지 보려면 Post방식으로 라우팅을 추가할 필요가 있다.

 

---

//Post 라우팅

router.post('/posts',function(req,res){

 

 var title_ = req.body.title;
 var url_ = req.body.url;
 var description_ = req.body.description;

 

 var savePost = new post({ 

     title:title_ ,
     url:url_ ,
     description:description_
 });

  savePost.save(function(err){
    if(err) throw err;
   });

  res.redirect('/');
 });

 

// 쓰기 폼 파일
router.get('/write',function(req,res){

     res.sendFile(path.join(__dirname,'temp/write.html'));

});

---

 

6. write.html파일

routes폴더 아래에 생성하고, write.html파일을 작성한다. write파일은 입맛대로 작성한다. bodyparser로 정보를 보내야 하는 input 태그의 name명에 주의하자.

---

<!DOCTYPE html>
<html>
 <head></head>
 <body>
  <h1>Write Page</h1>
  <form method="post" action="/api/posts">

       <label>제목 : </label>
       <input type="text" name="title">
       <hr/>
       <br/>

 

       <label>url : </label>
       <input type="text" name="url">
       <hr/>
       <br/>

 

       <label>내용 : </label>
       <input type="text" name="description">
       <hr/>
       <br/>

       <input type="submit">
  </form>
 </body>
</html>

---

 

7. 테스팅

 - 커멘트창(mac:터미널) 에서 node server.js를 실행한다.

 - url창에 http://localhost:3000/api/write 를 입력한다.

아무 내용을 입력하고 제출을 클릭해보자.

 

localhost:3000/api/posts에 접속하면, mlab DB 데이터가 json형태로 화면에 전송된다.

 

mlab에 접속해보면, posting이라는 collection에 write폼으로 입력한 정보가 전송됐음을 알 수 있다.

 

다음 포스팅부터는 본격적으로 Angular Component에 관해서 알아보자.