#2 MongoDB 연결(ReactJS)

본 정리는 인프런 John Ahn 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의를 참고하였습니다.

MongoDB 로그인

• 회원가입 후 로그인
• Cloud: MongoDB Cloud

클러스터 생성

1. Shared 클러스터를 사용 (무료)

1. 3개의 클라우드 중 원하는 클라우드 선택
2. 지역 선택
   1. Tier와 Name 설정
   2. User 생성자신의 IP를 등록 후 생성
   3. 이름과 비밀번호를 입력 후 생성

**Mongoose 설치**

몽고DB를 간단하게 쓸 수 있는 Object Modeling Tool

```bash
npm install mongoose --save
```

1. 몽고디비 커넥트 주소 복사

    <img width="622" alt="스크린샷 2022-12-27 오후 6 44 14" src="https://user-images.githubusercontent.com/79856225/209817294-83d7d37d-6593-4ccf-b6e5-31608330a46e.png">

    <img width="647" alt="스크린샷 2022-12-27 오후 6 44 36" src="https://user-images.githubusercontent.com/79856225/209817296-b5f5e8ca-cc5c-4c34-a2b8-5c42ade28f47.png">

    <img width="370" alt="스크린샷 2022-12-27 오후 6 55 40" src="https://user-images.githubusercontent.com/79856225/209817299-60cb6879-bb91-4096-af5d-639bd1401bb5.png">

2. 몽구스를 이용하여 몽고DB 연결 
    1. index.js파일 수정 

        ```jsx
        const mongoose = require('mongoose')
        mongoose.connect('mongodb+srv://유저아이디:유저비밀번호@junprojcet.kzx4jm1.mongodb.net/?retryWrites=true&w=majority',
        {
            useNewUrlParser: true, useUnifiedTopology: true 
        }).then(() => console.log('Successfully connected to mongodb'))
        .catch(e => console.error(e));
        ```

    - connet 부분에 자신의 유저 이메일과 비밀번호를 넣어줘야 함
    - 전체코드

        ```jsx
        const express = require('express')
        const app = express()
        const port = 3000

        const mongoose = require('mongoose')
        mongoose.connect('mongodb+srv://유저아이디:유저비밀번호@junprojcet.kzx4jm1.mongodb.net/?retryWrites=true&w=majority',
        {
            useNewUrlParser: true, useUnifiedTopology: true 
        }).then(() => console.log('Successfully connected to mongodb'))
        .catch(e => console.error(e));

        app.get('/', (req, res) => {
          res.send('Hello World!')
        })

        app.listen(port, () => {
          console.log(`Example app listening on port ${port}`)
        })
        ```

3. npm run start 명령어를 이용하여 확인

    <img width="595" alt="스크린샷 2022-12-28 오후 8 28 19" src="https://user-images.githubusercontent.com/79856225/209817303-69d05598-6f06-489f-9050-462782141465.png">