[Node.js] Express와 MongoDB를 이용한 CRUD 프로젝트 - (3) Express, MongoDB 연동, CREATE

https://dev-raeun.tistory.com/27

[Node.js] Express와 MongoDB를 이용한 CRUD 프로젝트 - (2)

MongoDB

몽고DB는 말그대로 데이터베이스의 종류 중 하나다.

저번 시간에 이어서, data를 저장하고 나타내기 위해 사용할 것이다!

참고로 나는 Mongoose 이용은 하지 않고 진행했다.

npm으로 MongoDB설치

npm install mongodb --save

한번 설치하면, 우리는 MongoClients를 이용해서 MongoDB에 접속할 수 있다.

다음과 같은 코드작성으로 접속이 가능하다

node.js와 mongoDB 연동을 위해 아래 코드를 추가

server.js

const MongoClient = require('mongodb').MongoClient

MongoClient.connect('mongodb-connection-string', (err, client) => {
  // ... do something here
})

로컬에서 MongoDB를 셋팅할수도 있지만,

대부분의 사람들은 ‘MongoDB Atlas’라는 클라우드 서비스를 이용한다 하길래 나도 이용해보았다.

MongoDB Atlas 셋팅

https://www.mongodb.com/download-center

Try MongoDB Atlas Products

위의 링크에 접속하여서 계정을 만들어준다. 나는 구글로 했다.

계정을 만드는 과정은 생략!

메인 콘솔 페이지에서 project → new project를 클릭하여 프로젝트를 만들어준다

나는 울랄라 라고 지었는데, 영어로 짓는 것을 추천한다,,

Build a Database 클릭

우린 당연히 공짜를 클릭해준다

기본 설정된 그대로! 기본설정 클라우드는 AWS, 지역은 서울로 되어있더라 신기

Cluster Tier을 ‘M0 Sandbox(free)’로 해준다.

DB 접속 설정하기

DB 생성이 완료되면 자동으로 해당 창이 뜨게 됨, 안뜨면 아래 페이지를 보고 따라하면 될듯하다.

그리고 접속 환경을 설정해 주어야 한다.

Add My Current IP Address를 클릭하면 자동으로 내 local IP가 등록된다.

문제는 지금 도서관이어서,,,집에서 또 다시 추가를 해줬다.

콘솔에서 내 클러스터 옆 Connect 클릭

Connect Your application 클릭

해당 버튼을 클릭하면,

아주 친절한 connection string이 나온다!

'mongodb+srv://<username>:<password>@<clustername>-rmp3c.mongodb.net/test?retryWrites=true&w=majority'

이런 비스무리한 형식으로! 보여진다.

본인의 connection string을 복사하고!

여기서 username은 본인 DB의 username, password는 본인 DB의 password로 대체해주면 됨.

위의 connection string을 MongoClient.connect안의 connectionString 자리에 써주면 된다.

아니면 따로 변수를 설정해도 좋다! 난 변수를 설정해서 하였다.

MongoClient.connect(connectionString, (err, client) => {
 
}))

제대로 연결이 되었는지 확인 하기위해, console.log 도 추가.

MongoClient.connect(connectionString, {
  useUnifiedTopology: true
}, (err, client) => {
  if (err) return console.error(err)
  console.log('Connected to Database')
})

node server.js 실행!

form에 넣은 것도 보이고, 잘 되긴 하는데, Authentication faild 문제가 발생했다.

이건 user name과 password 오류 때문이라고 한다.

❗️MongoServerError: bad auth : Authentication failed. 해결법!!

user, password를 토씨하나 틀리지 않고 잘 써주면 아주 잘 뜬다,, 바보였어 나는

몽고디비는 프로미스를 지원원한다.

콜백대신 프로미스를 사용하고 싶다면, MogoClient.connect를 사용하면 된다.

MongoClient.connect(connectionString, { useUnifiedTopology: true })
  .then(client => {
    console.log('Connected to Database')
  })
  .catch(error => console.error(error))

이 부분은 나중에 좀 더 자세하게 공부하는 것으로 ,,

✅프로미스 ✅콜백 개념공부하기!

MongoDB 와 SEVER

MongoDB 접속하기 위해서는 db 변수들이 필요하다!

이는 즉, 우리가 MongoClient의 then 요청안에 express 요청 handlers를 넣어주어야 한다는 뜻이다.

🤖

아래와 같은 예시로 만들어 주어야 한다.

use, get, post, listen이 필요함!

MongoClient.connect(/* ... */)
  .then(client => {
    // ...
    const db = client.db('star-wars-quotes')
    app.use(/* ... */)
    app.get(/* ... */)
    app.post(/* ... */)
    app.listen(/* ... */)
  })
  .catch(console.error)

이를 응용해서, 우리가 넣은 data를 띄워보자.🦾

 

CRUD - CREATE (저번편에 이어서,,)

데이터베이스에 항목들을 저장하기 전에 우리는 collection을 만들어야 한다.

원리는 대충 다음과 같다.

• 데이터페이스가 하나의 방 이라고 상상하자.
• 이 방은 상자들을 포함한다 (collections 라는 상자!)

우리는 아무 이름이나 원하는 대로 collections의 이름을 지을 수 있다. (변수 이름 짓듯)

그렇다면 quotes를 저장할 수 있는 quotes collection을 만들어보자!

예시는 다음과 같다!

MongoClient.connect(/* ... */)
  .then(client => {
    // ...
    const db = client.db('star-wars-quotes')
    const quotesCollection = db.collection('quotes')

    // ...
  })

insertone method를 이용해서 몽고디비 collection에 항목 추가도 할수 있다.

MongoClient.connect 안에, post 코드도 추가해준다.

app.post('/quotes', (req, res) => {
  quotesCollection.insertOne(req.body)
    .then(result => {
			res.redirect('/') // 아직 quotes 페이지가 없으므로 /로 redirect
      console.log(result)
    })
    .catch(error => console.error(error))
})

MongoClient의 내부 코드는 아래와 같이 작성했다.

MongoClient.connect(url, {
  useUnifiedTopology: true
} , function(err, database) {
  if(err) return console.error(err)
  console.log("Connected to Database")
  const db = database.db('star-wars-quotes')
  const quotesCollection = db.collection('quotes')
  //차례로 use, get, post, listen 작성해주기 앞전에 작성한 것을 조금수정해서 붙인것임
	app.use(bodyParser.urlencoded({ extended: true }));
  app.post('/quotes', (req, res) => {
    quotesCollection.insertOne(req.body)
      .then(result => {
        res.redirect('/') // 아직 quotes 페이지가 없으므로 /로 redirect
        console.log(result)
      })
      .catch(error => console.error(error))
  })
  app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html')
  })
});

node 서버를 실행하고, form에 데이터를 입력하면, 터미널에 이렇게 뜬다.

MongoDB콘솔로 들어가서, 내 Database 클릭 → collection에 들어가보자.

 

콘솔에 입력한 것들이 하나씩 뜬다. CREATE가 성공적으로 된듯하다.

그렇다면 이제, 우리가 POST한 data를 사용자가 볼 수 있게 띄워보자!