[유튜브 강의] Node js 와 mongoDB, Heroku(헤로쿠,히로쿠)로 만드는 다이어리앱 (서버편) - 2

 

▶︎ 센치한 개발자 유튜브 구독하기 : https://www.youtube.com/channel/UCvb9oqG4CtZ5H4m_NSD1GYA?sub_confirmation=1

 

[ Node js 와 mongoDB, Heroku(헤로쿠)로 만드는 다이어리앱 (서버편) 목차 ] 1. Node js 와 mongoDB, Heroku(헤로쿠)로 만드는 다이어리앱 (서버편) - 1 2. Node js 와 mongoDB, Heroku(헤로쿠)로 만드는 다이어리앱 (서버편) - 2 3. Node js 와 mongoDB, Heroku(헤로쿠)로 만드는 다이어리앱 (서버편) - 3 4. Node js 와 mongoDB, Heroku(헤로쿠)로 만드는 다이어리앱 (서버편) - 4 (서버편 완결)

 

 

[ 사전 준비 ]

(1) 소스 개발 IDE 다운로드 : 젯브레인사의 intelliJ

*. 학생이시면 학생용, 개인이시면 구매를 하시는 것을 권장..

https://www.jetbrains.com/ko-kr/idea/download

(2) 설치하다 지치지 않을 멘탈

 

[ 이제 다시 시작이다 ]

 

  *. 사전설치하는 편이 좋은 모듈

- mongoose 설치 : node js 와 mongoDB를 연결해주는 모듈     $ npm install --save --save-exact mongoose      - body-parser 설치 : html 데이터 처리용 모듈     $ npm install body-parser --save

 

(1) 로컬 개발 환경 구축해놓기

  $ heroku local web

*. 결과 : [OKAY] Loaded ENV .env File as KEY=VALUE Format 10:26:07 web.1   |  Listening on 5000

 - 웹브라우저에서 http://localhost:5000 으로 접속하여 로컬 앱 사이트를 확인할 수 있습니다.

(2) 인텔리제이에서 샘플 소스 구조 파악해보기

샘플 is 심플

 - 핵심 1 : index.js 파일내용 

 - 핵심 2: /views/pages/index.ejs 

 *. ejs 는 기존 정적인 값만 담을 수 있던 html 에서 + 동적인 값 (가령 db에서 가져온 값 등)도 함께 표시할 수 있는 템플릿엔진 (일종의 샘플틀) 입니다.

 

(3) DB 셋팅 및 각종 플러그인 (add-on), 모듈 설치 

 *. https://elements.heroku.com/addons

 *. 여기서부터는 신용카드를 헤로쿠 사이트에 등록하지 않으면 add-on 이 불가능합니다... 만! 신용카드 없는 방법도 설명합니다.

 

- 신용카드를 등록해서 헤로쿠사이트에서 mongoDB 만들기

 : 추후에 블로그에서 다루겠습니다..

 

 - 신용카드 없이 직접 mongoDB 만들기

 1) https://mlab.com mLab 가입 및 생성 (*. 자세한 사항은 방송으로 확인해주세요)

  ( *. mongoDB Atlas 사이트에서 DB를 생성하는 방법도 방송 준비중에 있습니다)

 

 2) db 접속 정보 메모해놓기 

 

*. 콘솔에서 셀 명령어 방식으로 접속시

mongo ds135305.mlab.com:35305/sentilab-youtube -u <dbuser> -p <dbpassword>

*. node js 에서 uri 방식으로 접속시

mongodb://<dbuser>:<dbpassword>@ds135305.mlab.com:35305/sentilab-youtube

*. dbuser, dbpassword 부분은 직접 만든 계정 정보들입니다.

 

 3) 기본 db 구조 생성

  *. db > Collection(콜렉션: 일종의 문서 document 묶음) > document (각 데이터 json 배열들)

 

  1. mLab사이트에서 콜렉션 만들어놓기

  *. 본 강좌는 다이어리 앱 만들기이므로 dairy 라고 만들었습니다. 

  *. 일반 유저가 자신의 일기를 쓰게 하려면 고유의 로그인 아이디 같은 것으로 만들게 하는 편이 좋을 것 같습니다 (추후 앱 방송에서 다루겠습니다)

(dairy 콜렉션을 클릭해서 들어가보면...)

(아직 만든 데이터가 없어서 비어있습니다...)

 

 4) DB에 접속&접근 가능한 유저 정보 만들기

 5) 샘플 일기 데이터 넣기 (사이트에서 해도 되고 콘솔에서 해도 되지만, 콘솔에서 하겠습니다)

   - 콘솔로 DB 접속 

   $ mongo ds135305.mlab.com:35305/sentilab-youtube -u DB유저아이디 -p   DB비번. 

   *. 맥OS : brew install mongodb 로 몽고DB설치 (또는 https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/)

   *. 윈도우 : https://www.mongodb.com/download-center/community에서 인스톨러로 설치

 

   - 샘플 넣기 :

   > db.dairy.insert([{  date : "2020131", title : "test2", imgList : "",  content : "아아2" }, {date : "2020130", title : "test2", imgList : "",  content : "아아1"}])

 

   - 데이터 잘 들어갔는지 확인

   > db.dairy.find()

  { "_id" : ObjectId("5e27c4bf3b24da2561c527b9"), "date" : "2020131", "title" : "test2", "imgList" : "", "content" : "아아2" }

  { "_id" : ObjectId("5e27c4bf3b24da2561c527ba"), "date" : "2020130", "title" : "test2", "imgList" : "", "content" : "아아1" }

 

  *. 추후에 "_id" 이라는 고유값이 매우 중요합니다. 이 값으로 다이어리 정보를 읽고, 쓰고, 수정하고, 삭제할 예정입니다. 

 

 

 6) mongoose 설치 : node js 와 mongoDB를 연결해주는 모듈 (제일 처음에 설치했다면 안하셔도 됩니다)

  $ npm install --save --save-exact mongoose

 

 7) body-parser 설치 : html 데이터 처리용 모듈 (제일 처음에 설치했다면 안하셔도 됩니다)

  $ npm install body-parser --save

 

 (4) 역사적인 조회 API 만들기

 *. index.js 파일 수정

const express = require('express')
const path = require('path')
const PORT = process.env.PORT || 5000
const mongoose = require('mongoose');
var bodyParser = require('body-parser');


var app = express();
app
  .use(express.static(path.join(__dirname, 'public')))
  .set('views', path.join(__dirname, 'views'))
  .set('view engine', 'ejs')
  .get('/', (req, res) => res.render('pages/index'))
  .listen(PORT, () => console.log(`Listening on ${ PORT }`))

//body-parser 등록
app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended : true}));

//DB 연결
let url = "mongodb://db접속유저아이디:" + encodeURIComponent("db접속비번") + "@ds245337.mlab.com:45337/sentilab-youtube";
mongoose.connect(url, { dbName: 'db이름' }, function(err) {
    console.log('err ::' + err);
});

//다이어리 데이터 모델 설정
var Schema = mongoose.Schema;

//데이터 형태는 { date : "2020131", title : "test2", imgList : "",  content : "아아2" }
var dairySchema = new Schema(
    {  date : String, title : String, imgList : String,  content : String}
)

//위와같은 모델로 쓸것이라고 변수 생성 
var datas = mongoose.model('dairy', dairySchema, 'dairy');

//다이어리 데이터 모델에 기반하여 저장된 전체 데이터를 불러와서 
datas.find(function(error, dairy){
    if(error){
        console.log("error ::"+error);
    }else{
		//항목별로 보기
        dairy.forEach(function(row) {
            console.log("data :: "+row.title);
        });
    }
});

 

 [ 다음 시간 ]

 (3) 일기와 관련된 API 만들기 - 고도화

  1) 일기 조회

  2) 일기 쓰기

  3) 일기 수정

  4) 일기 삭제