[MongoDB] 데이터 베이스 연결

hyejinJo·2023년 1월 13일
0

Vue

목록 보기
2/7

다음의 구성요소에 나만의 DB 를 생성하여 데이터베이스를 연결해보자

1. MongoDB 클라우드 가입 / 인스턴스 생성 및 설정

MongoDB 클라우드 사이트

  1. 회원가입후 나의 페이지에 들어가 프로젝트를 생성해준다
  2. 프로젝트 이름을 넣은 후 바로 Create Project 버튼을 눌러 생성해준다.
  3. 프로젝트의 DB 를 생성해준다 ⇒ Build a Database 버튼 클릭
  4. 무료 버전을 선택해준 후 Create Cluster 버튼을 눌러준다.
  5. 데이터베이스에 접근할 수 있는 계정을 생성해주자⇒ Username 은 test, 비밀번호는 1234 라 설정 (임의로)

  6. 어디서 접속할 것인지 지정한다.
    Add My Current IP Address 버튼을 누르면 자동으로 현재 내 IP 주소가 따진다.
  7. 마지막으로 Finish and Close 버튼을 누른다.
    ⇒ 왼쪽 메뉴에서 Database Access 버튼을 누르면 다음과 같이 DB 가 생성됐음을 알 수 있다.

IP 주소 설정

하지만 다른 컴퓨터, 노트북에서 접근할 땐 IP 주소가 달라지기 때문에 바꿔야하는 번거로움이 있는데, 왼쪽에 Network Access 를 통해 주소를 추가할 수 있다.

Add IP Address 라는 버튼을 클릭

어느 곳에서나 접근이 가능하다는 버튼을 누른 후 Confirm 버튼 클릭한다!
최종적으로 메뉴 Deployment > Database 에 들어가면 cluster0 이 생성된 것을 확인할 수 있다.

2. MongoDB 연결 확인

생성한 데이터베이스 인스턴스를 API 서버에 연결해보자

  1. Deployment > Database 에서 이전에 생성한 cluster0 의 Connect 라는 버튼을 누르자
  2. Connect your application 을 클릭
    우리가 조금전 생성한 MongoDB 의 클라우드 인스턴스, 즉 클라우드에 있는 데이터베이스에 대한 정보를 API 서버와 연결할 수 있게 된다.해당 정보를 복사하여 우리의 애플리케이션에 붙이면 된다.이때 test:<password> 부분에 우리가 앞서 설정한 계정의 비밀번호를 입력하면 된다.
    ⇒ API 서버가 MongoDB 클라우드에 있는 데이터베이스를 연결해서 전반적인 데이터를 저장하고, 읽고 수령할 수 있게 된다.
  • 다음과 같은 경고를 받으면 해당 객체를 넣어준다.

  • POST /signup 부분에서 API 문서에 아이디, 비번 등 내용을 입력했을 때 API 를 실제로 서버에 요청해서 데이터베이스까지 연결이 잘 되는지 확인할 수 있다.

    1. Try It out 클릭
    2. document 에 정보, 내용 입력
    3. Execute 클릭으로 데이터 요청

  • 결과:
    200응답 (요청 성공) ⇒ 이전에 입력한 내용들로 데이터가 생성됨을 알 수 있고 DB 가 정상적으로 연결되었음을 확인이 가능하다!




출처: 인프런 강의 - 캡틴판교 [Vue.js 끝장내기 실무에 필요한 모든 것]
profile
FE Developer 💡

0개의 댓글