Node.js | React | MongoDB | Express (2)

Node.js | React | MongoDB | Express (2)

1. SSH (github 서버와 안전하게 통신)

SSH (Secure Shell) 참고 URL : 링크1 링크2

2. Client - Server 통신

client-server

• client에서 정보(아이디 패스워드)를 server에 보내줌
• body-parser 이라고하는 dependency를 이용해서 보내줌
• 로그인/회원가입할 때 클라이언트 만든 것이 없어 postman을 이용

설치

body-parser : npm install body-parser --save
postman : 수동 설치 

index.js

                                      const express = require('express')
                                      const app = express()
                                      const port = 3000
const bodyParser = require('body-parser')
const {User} = require("./models/User");
// body-parser가 클라이언트에서 오는 정보를 서버에서 분석해서 가져올 수 있게 하는 것
// application/x-www-form-urlencoded 이렇게 된 데이터를 분석해서 가져올 수 있게 해주는 것
app.use(bodyParser.urlencoded({extended: true})); 
//application/json으로 된 데이터를 가져올 수 있게 하는 기능
app.use(bodyParser.json());
                                      const mongoose = require('mongoose')
                                      mongoose.connect('mongodb+srv://아이디:비번first.2owuq.mongodb.net/myFirstDatabase?retryWrites=true&w=majority')
                                      .then(() => console.log('MongoDB Connected'))
                                      .catch(err => console.log(err))
                                      app.get('/', (req, res) => {
                                      res.send('Hello World!!!!!!')
                                      })
//register를 위한 라우트
app.post('/register', (req, res) => {
  // 회원가입 할 때 필요한 정보들 client에서 가져오면 
  //해당 데이터를 데이터베이스에 넣어준다.
  const user = new User(req.body) // req.body안에는 정보 들어있음(id, pw) *bodyparser 가져왔기 때문에 가능
  user.save((err,userInfo) => { // mongoDB 메소드, save해주면 Usermodel에 저장됨
    if(err) return res.json({success:false, err})
    return res.status(200).json ({sucess: true }) //status200은 성공했음을 의미
  })
})
                                      app.listen(port, () => {
                                        console.log(`Example app listening on port ${port}`)
                                      })

npm run start

postman > workspace > new

a) POST로 설정 : http://localhost:3000/register (send바로 누르지말기)
b) body 입력
{
    "name": "james123",
    "email": "james@naver.com",
    "password": "123123"
}
c) send 버튼 
{
    "success": true
}

3. NODE MON

NODE MON

• 서버 ON/OFF 별도로 할 필요 없이 수정 반영 가능
• 소스 변화 감지해서 변화된 부분 반영

npm install nodemon --save-dev

nodemon으로 시작하기 위해 script 하나 더 만들어주기!

"dev": "nodemon index.js"

4. 비밀 설정 정보 관리 (HEROKU)

비밀 정보 관리
ex) mongodb 아이디 비번 등

.gitignore 사용

1) config 폴더 생성

2) 배포 환경 설치 (HEROKU)
a) HEROKU 회원가입
b) CLI 설치 (OS별)

heroku -v        // 설치 확인
heroku login
heroku create  
1) https://frozen-depths-38541.herokuapp.com/ 
   내 어플리케이션 url -> 이걸 이용해서 어플리케이션 갈 수 있음
   이 url 말고 heroku 사이트에서 만들기 가능(간단한 이름으로 personal에서)
2) https://git.heroku.com/frozen-depths-38541.git
   프로젝트를 위한 heroku 저장소의 주소

3) npm & node 버전 명시

node -v
npm - v

package.json "main"아래

  "engine": {
    "node": "v16.13.2",
    "npm" : "8.3.0"
  },

나머지는 react 프로젝트 이후에 확인!
여기

---

4) 개발 환경 두 가지!
-> 비밀정보관리 분기처리 필요
a) local 환경 -> dev.js에서 변수 가져갈 수 있음
b) deploy(배포)한 후 -> HEROKU서비스 사용한다고 했을때 따로 MONGO URI 정보를 넣고 HEROKU사이트에서 직접 가져와야함

key.js | dev.js | prod.js 파일 생성

key.js

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./prod');
} else {
  module.exports = require('./dev');
}

dev.js

module.exports = {
  mongoURI: 'mongodb+srv://--@first.2owuq.mongodb.net/myFirstDatabase?retryWrites=true&w=majority'
}

prod.js

module.exports = {
  mongoURI: process.env.MONGO_URI
}

index.js

const config = require('./config/key')
mongoose.connect(config.mongoURI)

5) .gitignore

node_modules
dev.js

dev.js 제외하고 reposit에 저장됨

-> node_modules의 경우 npm install을 통해서 다운로드 가능