본문 바로가기

Frontend Study - 2/Node.js

Node.js : Database에 연결하기, 자료 저장하기 feat. MongoDB

보내주어야 하는 데이터들,  혹은 받아온 데이터들을 저장할 곳이 필요하다. 

데이터베이스에 저장한다. 데이터베이스는 데이터를 일정한 형식으로 저장할 수 있게 도와주는 곳이다. (ex. Excel)

 

보통 사용하는 데이터베이스의 종류는 크게 두가지 이다.

SQL (관계형 데이터베이스)와 NoSQL 데이터베이스.

 

대표적인 NoSQL 중 하나인 MongoDB를 통해서 데이터베이스를 사용해 보려한다.

512mb까지 무료 호스팅 가능한 MongoDB Atlas를 이용했다.

 

 

https://cloud.mongodb.com/

우선 가입을 한다.

 

 

- 가입 후 데이터베이스 엑세스 카테고리에 들어가서 user 등록을 해준다. 

 

 

- 카테고리 중 한칸 아래인 Network Access에 들어가서 이용가능한 IP주소를 추가해준다.

Allow access anywhere 을 입력하면 어디서든 접속이 가능하다. 

 

 

 

 

- 그 다음 Database - Browse Collections 메뉴에 들어가서 database 를 만든다. 

 

 

- 이 때 Database name은 폴더명 이라고 생각하면 되고, Collection name은 파일명 이라고 생각하면 된다. 

 

 

 

여기까지 Atlas 세팅이 완료되었다. 

이제 server.js에서 코드를 통해 데이터베이스에 접근해야 한다. 

 

 

- 터미널을 통해 프로젝트에 몽고db를 설치한다.

yarn add mongodb 

or

npm install mongodb

 

- 아래와 같이 mongodb를 불러와서 변수에 넣어준다.

const MongoClient = require('mongodb').MongoClient;

 

- 아래와 같이 MongoClient에 연결을 진행한다. 

 MongoClient.connect('mongodb+srv://goddemi0124:비밀번호@goddemi.1vzb0je.mongodb.net/?retryWrites=true&w=majority',
 function(err, client){
  if (err) return console.log(err);
  
  
  //서버 생성 코드를 이곳으로 옮겨오기.
  app.listen('8080', function(){
    console.log('listening on 8080')
  });
}

'URL' 을 가진 데이터베이스에 연결하는 과정이다. 

URL에 들어가는 url은 카테고리 Database - Connect - Connect your application 에 들어가서 확인 가능하다.

 

이 때 <password> 자리에는 초기에 Database Access에서 등록해 주었던 계정의 비밀번호를 넣어주어야 한다.

mongodb+srv://goddemi0124:<password>@goddemi.1vzb0je.mongodb.net/?retryWrites=true&w=majority

 

두번째 줄은 에러가 발생했을 때 콘솔로그로 에러 내용을 알려주는 것.

 

그리고 서버를 생성하는 코드 app.listen 을 데이터베이스 연결 코드 안에 넣어서, 

"데이터베이스에 연결이 완료되었을때, 서버를 생성해라 !" 라는 의미가 되었다. 

 

 

- 그리고 아래와 같이 사용한다.

let myDb;   /// atlas 클라우드 데이터베이스 폴더를 연결할 변수 선언 해주기

const MongoClient = require("mongodb").MongoClient;
MongoClient.connect(
  "mongodb+srv://goddemi0124:******@goddemi.1vzb0je.mongodb.net/?retryWrites=true&w=majority",
  function (err, client) {
    if (err) return console.log(err); //에러 처리. url 오타로 인한 에러가 많다.

    myDb = client.db("todoapp"); //투두앱 이라는 폴더를 아까 선언한 변수로 가져온다.

    myDb.collection("post").insertOne(
      { name: "강철", age: 32 },
      function (err, res) {
        console.log("저장완료");
      }
    );
    // post라는 파일에 insert 한다. 그냥 형식을 외우면 된다. 저장해두고 필요할 때 꺼내 쓰면 되는 형식.

    app.listen(8080, () => {
      console.log("server open in 8080");
    });
  }
);

 

1) let myDb; : cloud의 Database와 연결 해줄 변수를 생성한다.

2) myDb = client.db("todoapp"); : cloud에서 만들었던 Database "todoapp"을 로컬에서 만든 변수 myDb와 연결시킨다.

3) myDb.collection("post").insertOne(
      { name: "강철", age: 32 },
      function (err, res) {
        console.log("저장완료");
      }
    );

연결된 Database인 myDb. 그리고 우리는 cloud에서 'todoapp' Database를 만들 때 collection 으로 'post'를 만들어 주었었다. 

Database는 폴더, collection은 파일 느낌이라는 것을 기억. myDb.collection("post") 이것은 "post"라는 컬렉션을 선택하는 것. 

insertOne은 그 안에 자료를 넣어주는 것이다. insertOne("data" , callback(err, res){} ) data에는 저장할 데이터를 넣고, 뒤의 콜백함수는 에러가 났을 때와 성공한 뒤의 결과값을 지정해준다.

 

 

서버를 작동하고

index.html에서 form을 submit한 뒤에

클라우드를 열어보면 자료가 데이터베이스에 잘 들어간 것을 확인할 수 있다.

form 에서 submit을 할 때는 name과 age값만 저장이 되게 하였다. 그런데 _id 값이 하나 더 생겼다. 

_id는 자료 하나 하나의 고유값을 위해 자동으로 지정된다. 자료 저장시 _id값을 직접 입력하면 추가 생성되지 않고 해당 값으로 지정된다. 

 

우측에 보면 스키마도 자동으로 지정되는 걸 알 수 있다.