📕 MongoDB 셋팅

MongoDB가 뭔데

데이터를 일정한 형식으로 저장할 수 있게 도와주는 곳이 Database다.
보통 SQL 언어를 써서 데이터를 입력, 출력하는데 MongoDB는 별다른 언어 필요 없다.
MongoDB의 장점은
1. 처음 다룰 때 어려운 셋팅작업이 필요하지 않음(스키마 생성 없음)
2. SQL 안배워도 됨
3. 복잡한 자료형 몰라도 됨
4. 평생 무료 호스팅 해주는 곳이 있다!

MongoDB Atlas 가입

호스팅 & DB셋팅

평생 무료 호스팅 받는 그곳이다.
지금까지 DB를 내 컴퓨터로 사용했는데 실제 배포를 고려하면 클라우드 서비스를 사용해야한다.
백업도 알아서 해주고 사람 많아도 용량 걱정 없다.
무엇보다 접속 속도가 빠름.
이 모든걸 해주는 무료 사이트가 바로 MongoDB Atlas다.

사이트 접속해서 회원가입하고 빠르게 셋팅해주면 끝이다.

1. 구글에 Mongodb atlas 라고 검색해서 들어가거나 mongodb.com 홈페이지를 방문함

2. 무료 티어 선택하고 Provider - aws / Region - 서울 선택하고 생성

3. Database Access 메뉴에서 DB 접속용 아이디 / 비번 생성해준다.
   주의점 ) 생성된 User의 설정을 들어가서 Database User Privileges 하단의 Built-in Role - Atlas admin 으로 변경
   이거 해줘야 nodejs에서 DB 접속가능함

4. Network Access 메뉴에서 내 IP 추가 + 공공장소에서 접속할거 고려해서 Allow access from anywhere누르거나 0.0.0.0/0도 추가)

5. Database / collection 만들기
   Cluster는 하나의 호스팅 공간이고 거기 안에 내 데이터베이스를 만들어야 데이터 저장할 수 있음
   좌측 Database 탭에서 Browse Collections - create database 데이터베이스와 콜렉션 이름 작명 해서 생성해주기

이제 DB 셋팅 끝이고 접속하면 된다.

MongoDB 접속

server.js에서 DB로 접속해보자.

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

상단에 코드를 추가한다.
그리고 하단에 다음 코드를 이어 추가한다.

MongoClient.connect('아까 챙겨온 접속URL', function(에러, client){
  if (에러) return console.log(에러);
  //서버띄우는 코드 여기로 옮기기
  app.listen('8080', function(){
    console.log('listening on 8080')
  });
})

app.listen()을 내부로 옮겨야한다.
그래야 DB 연결시 서버 띄워짐 그리고 챙겨온 접속 URL 집어넣으면 된다. (챙겨오는법 하단에 첨부)
그러면 생성했던 DB 아이디랑 비번 입력해주면 됨(password -> 내 비번으로 바꿔치기)
주의 ) : / ? # [ ] @ 특수문자 비번에 넣었으면 따로 인코딩해줘야함

접속 URL 챙겨오는 법

📗 Database 자료 저장하는 법

에러처리 방법

MongoClient.connect('아까 챙겨온 접속URL', function(에러, client){
  if (에러) return console.log(에러); // -> 이러면 에러나면 터미널에 띄워줌
})

if문 한줄 추가해주면 된다.
MongoDB 관련된 함수들 전부 콜백함수에서 에러처리 가능하다.
에러뜨는 경우는 대부분 require()함수, connect()함수, URL 주소 오타인 경우니까 잘 작성하도록 하자.

자료 저장하기

server.js에서 코드를 짜서 db와 통신해보자.

var db; // 변수생성
MongoClient.connect('접속URL', { useUnifiedTopology: true }, function (에러, client) {
	if (에러) return console.log(에러)
	db = client.db('todoapp');

	app.listen(8080, function () {
		console.log('listening on 8080')
	});
});

페이지 전체에서 쓸 수 있는 전역변수 db를 만들어주고 client.db('todoapp')이라는 함수로 database에 접속시키는 명령을 내린다.

(connect()에 추가된 { useUnifiedTopology: true } 속성은 워닝메세지 제거용임. 써주면 깔끔해서 좋음)

  db.collection('post').insertOne( {이름 : 'John', _id : 100} , function(에러, 결과){
    console.log('저장완료'); 
  });

그리고 내부에 db.collection().insertOne( object, 콜백함수 ) 부분을 추가해준다.
db.collection('post')라는건 DB의 collection 중에 post라는 이름을 선택하는 뜻이고
뒤에 insertOne을 붙이면 자료를 추가한다는 의미다. (object 자료형식으로 추가)
사용법은 insertOne(추가할 자료, 콜백함수) 이다.

db.collection('post').insertOne() 

이 패턴을 잘 기억해둬야한다.
DB에서 자료 사용할 때 필수적으로 계속 나오는거임

_id

DB에서는 자료들을 서로 구분하기 위해 고유 id가 필요하다.
안집어넣으면 알아서 외계어 생성해주지만 보통 직접 1,2,3,... 숫자형식으로 저장한다.
넣는 방법은 { _id : 어쩌구 } 해주면 되는데 나중에 자세히 배워본다고 함

자료저장 응용 코드

// 서버로 post 요청하기
app.post('/add', function(요청,응답){
    응답.send('전송완료')
    console.log(요청.body.title); // '외근하기' 출력
    console.log(요청.body.date); // '2023-4-1' 출력

    // DB에 저장하기
    db.collection('post').insertOne({ 제목: 요청.body.title, 날짜: 요청.body.date }, function(에러, 결과){
        console.log('저장완료')
    })
});

숙제 정답

참고로 응답.send() 이 부분은 항상 존재해야한다.
전송이 성공하든 실패하든 뭔가를 서버에서 보내줘야 브라우저가 멈추지 않는다.

(메세지 같은걸 보내주기 싫다면 간단한 응답코드나 아니면 리다이렉트(페이지강제이동)를 해주는 코드도 있음)

📘 HTML에 DB데이터 넣는 법(EJS)

EJS

그냥 단순히 HTML 파일만 보내주면 흔히 말하는 Static한 페이지가 된다.
HTML에는 실제 DB 데이터를 넣어서 보내줄 수가 없다.
그래서 EJS, Pug 같은 템플릿 엔진을 사용한다.
EJS는 서버 데이터를 HTML에 쉽게쉽게 박아넣을 수 있게 도와주는 일종의 HTML 렌더링 엔진이다.
설치하고 HTML에 데이터를 넣어보자.

설치 & 셋팅

1. 터미널에 입력해서 설치한다.
   npm install ejs

2. Server.js 파일 상단에 불러와서 express 등록해준다.

 app.set('view engine', 'ejs');

3. EJS 파일을 만든다
   EJS 파일은 그냥 HTML과 똑같은 형식으로 작성하면 된다.
   단, 확장자를 파일명.ejs로 설정하고 views 폴더 하위에 위치시킨다.

EJS 문법

<%= %>

<h2><%= user.name %></h2>

HTML 중간중간에 이런식으로 ejs 문법을 이용해서 서버 데이터를 가져오면 된다.
<%= 서버에서 보낸 데이터의 변수명 %>
그럼 HTML 글자로 렌더링 된다.

<% %>

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

HTML에 if문을 적용하거나 반복문을 적용하고 싶을 땐
<% %> 내부에 자바스크립트 문법을 담으면 된다.
위의 예제 코드는 user 변수가 참일 때만 h2 코드를 보여주게 된다.

여기까지 ejs 파일을 보여주는 방법이었다.
HTML파일이 이쁘게 출력되지만 실질적으로 DB가 들어오진 않는 상태다. (user.name 먹통임)
이제 저기에 꽂히는 DB 데이터를 서버에서 가져오는 방법을 알아보자.

📙 Database 자료 가져오는 법(DB데이터 읽기)

DB 읽기 (render() 하기)

MongoDB에서 데이터를 꺼내고 싶다면
db.collection('post').find() 이런식으로 하면 꺼내올 수 있다.
하나가 아닌 post 콜렉션에 저장된 모든 데이터를 가져오고 싶으므로 다음과 같이 코드 짠다.

(server.js)

app.get('/list', function(요청, 응답){
  db.collection('post').find().toArray(function(에러, 결과){
    console.log(결과)
    응답.render('list.ejs', { posts : 결과 })
  })
})

.find().toArray() 는 collection('post')에 있는 모든 데이터를 Array 형식으로 가져온다. ( [자료1, 자료2, ...] )

그리고 가져온 데이터를 list.ejs 파일로 보내주기 위해 render()를 사용한다.
render() 함수에 둘째 파라미터를 작성해주면 liset.ejs 파일을 렌더링 함과 동시에 { posts : 결과 } 라는 데이터를 함께 보내줄 수 있다.

정리하면 결과라는 모든 데이터를 posts 라는 이름로 ejs 파일에 보낸 것이다.

그럼 이제 list.ejs 파일에서 posts라는 변수를 사용해서 데이터를 여기저기 사용할 수 있다.

(views/list.ejs)

<% for (var i = 0; i < posts.length; i ++) { %>
  <h4><%= posts[i].제목 %></h4>
  <p><%= posts[i].날짜 %></p>
<% } %>

posts에 데이터 잘 들어오는거 확인됨