HELLO FOLIO(express, mongoose)- 2(MongoDB,Mongoose 연결 구현)

현재 폴더 구조

web_project/
├── db/
│   ├── model             # 각종 모델 폴더
│   ├── schemas           # 각종 스키마 폴더
│   └── index.js          # db 연결파일
├── middleware/           # 각종 middleware 폴더
├── passport/	          # 로그인 관련 passport 폴더
│   ├── strategies        # 전략 구성
│   └── index.js          # 전략 exports 파일
├── routes/               # 라우트 관련 폴더
│   └── index.js     	  # 라우트 exports 파일
├── services/             # 유저 관련 service 폴더
├── views/                # EJS 템플릿 폴더
├── public/               # static 파일 폴더
│   ├── css/              # CSS 파일들
│   ├── js/               # JS 파일들
│   └── images/           # 이미지 파일들
├── .env                  # 환경 변수 파일
├── .gitignore            # Git 무시 파일
├── package.json          # 프로젝트 메타데이터 및 종속성 목록
├── app.js                # 애플리케이션 진입점
├── index.js              # 서버 실행 파일
└── README.md             # 프로젝트 설명 파일

현재 설치한 모듈

  "dependencies": {
    "dotenv": "^16.4.5",
  }

 

홈페이지 구현의 꽃은 로그인과 회원가입이 아닐까 페이지부터 만들지 유저 기능부터 만들지 고민을 하다가 로그인과 회원가입 먼저 구현하기로 했다.

 

그 전에 실행파일부터 만들어보자 

 

express로 구현한다면 너무도 뻔한 라이브러리 express

 

$ npm i express 를 통해 가볍게 설치를 해보자

 

설치를 했다면 app.js에 입력해 주어야하는 기본 코드가 있다. 다음과 같이 입력해보자.

 

const express = require('express');                     
const app = express();                                  

app.get('/home', (req, res) => {						
	res.send('안녕하십니까')
})

app.listen(3000, () => {								
    console.log(`서버 실행완료!`);
});

 

express 라이브러리를 불러오고 express의 app을 사용하기위해 기본 설정을 해준다.

 

이 후, get method를 이용하여 페이지를 조회 하도록 만들고, app.listen 서버 실행코드를 입력하여 접속해보자.

(Port 번호는 3000이다.)

 

들어가면 res.send로 입력한 '안녕하십니까' 단어가 나온다. (req는 요청 res는 응답 res.send는 응답으로 보내준다 는 뜻.)

 

허나 나는 app.js 말고 최상단 index.js 를 실행파일로 쓸 것이다. app.js 파일은 application의 진입점으로 쓸 생각이다.

 

이러면 app.listen을 최상단 index.js 파일로 보내줘야하며, 기본적으로 app. 들을 내보내주어야 한다.

 

const express = require('express');                     
const app = express();                                  

app.get('/home', (req, res) => {						
	res.send('안녕하십니까')
})

app.listen(3000, () => {								
    console.log(`서버 실행완료!`);
});

module.exports = { app };

 

module.exports = { app }; 를 최 하단에 입력 해준 뒤 app을 내보내주고, app.listen 함수는 잠시 다른 곳에 놔둔 뒤에 app.js 파일에서 삭제해준다.

(왜 굳이 객체로 감싸주었냐면,  프로젝트가 커지거나 모듈이 복잡해질수록 확장성과 관리 측면에서 객체로 감싸는 것이 더 좋다.  

 

확장성 고려가 무엇이냐? 쉽게 말해서 모듈에 다른 함수나 변수를 더 추가하고 싶다면, 객체 형태로 바꿔야 한다. 왜냐면? 모듈을 중괄호 없이 ,(컴마)로 여러 개를 내보내는건 안된다.

 

그냥 여러 개의 함수를 내보낼때는 객체를 사용해야 한다고 생각하자. 그런데 나중에 써주기 귀찮아서 그냥 내보낼 때 무조건 중괄호를 써주는 것.)

 

이제 내가 입력한 data들을 저장할 database 이 프로젝트에선 mongoDB 를 사용하기로 했다.

 

이 mongoDB를 더 수월하게 사용하기 위해 Node.js 환경에서 MongoDB와 상호 작용 하기 위한 객체 데이터 모델링(ODM) 라이브러리 mongoose를 사용해보자.

 

먼저 $ npm i mongodb 그리고 $ npm i mongoose 를 터미널에 입력하여 라이브러리들을 설치해주자.

 

설치한 뒤, db 폴더의 index.js에 다음과 같이 입력해준다.

 

const mongoose = require("mongoose");

const MongoConnect = async () => {
  try {
    mongoose.connect(process.env.DB_URL , {
      dbName: process.env.DB_NAME ,
    });
    console.log('MongoDB 연결됨!');
  } catch (error) {
    console.error('MongoDB 에러남!');
  }
};

 

함수를 어떻게 만들지 걱정하지 말자.. 기본 코드는 npm 사이트에서 나와있다.

 

난 그냥 기본 코드를 가져와서 함수로 만들고, 내 mongoDB URL과 NAME을 입력해줬다.

 

(단, 여기서 process.env.DB_URL이 무엇이냐면 dotenv 라이브러리를 사용하기 위한 코드이다. 게시글 첫 문장에 기본 폴더 구조에 보면 알다시피 난 .env 파일을 만들어두었다. 이는 보안과 관리를 위해 사용하며, 파일은 git hub같은 원격저장소에는 올리면 안된다.

다시 말해서 db 주소와 이름은 민감한 정보이기 때문에 내가 따로 보관 하겠다는 뜻. 

 

.env 파일에 주소와 이름을 입력해주자

 

.env 파일 내용은 아래와 같다.

# DB 접속 URL
DB_URL="디비주소"
# DB 프로젝트 이름
DB_NAME="디비이름"

 

이렇게 적으면 .env 파일 안에있는 내용을 process.env.ENV파일에적은변수 

 

이걸로 다른 파일에서 사용할 수가 있다. 단, 프로젝트 폴더 최 상단에 .env파일을 위치시킬 것. 간혹 프로젝트를 진행하면서 .env파일을 다운받는경우 .(점) 이 제외되는 경우가 있으므로 다운을 받았을땐 이름을 꼭 .env 로 만들어주자.)

 

쉽게 설명하면 mongoose 라이브러리를 불러오고, npm 사이트에서 긁어온 코드를 MongoConnect 함수로 덮어준다. 

 

그러면 dotenv 라이브러리를 사용하기 위한 코드를 썼는데 dotenv 라이브러리를 불러와야 하는것이 아닌가? 할테지만 DB 실행코드를 함수로 만들어 놓은 이유가 다 있다.

const mongoose = require("mongoose");

const MongoConnect = async () => {
  try {
    mongoose.connect(process.env.DB_URL , {
      dbName: process.env.DB_NAME ,
    });
    console.log('MongoDB 연결됨!');
  } catch (error) {
    console.error('MongoDB 에러남!');
  }
};

module.exports = { MongoConnect }

 

module.exports = { MongoConnect } 코드를 최 하단에 추가하여 함수를 내보내보자.

 

이제 폴더 최상단의 index.js로 가보자.

 

바로 여기에서 dotenv 라이브러리를 아래와 같이 가져와준다. 

// 환경변수 라이브러리 불러오기
require('dotenv').config()

 

최상단 index.js에서 dotenv 라이브러리를 불러와준 이유는 실행파일에 dotenv 라이브러리를 가져오는 코드를 써주면 모든 파일들에대해 .env파일을 적용할 수 있게 된다.

 

(여기로 MongoConnect 함수를 가져와서 쓰기 때문에 함수 안에 env 라이브러리 코드가 있어서 최상단 index.js에 dotenv 라이브러리를 가져오는 코드를 써주는게 아님.)

 

이제 db폴더의 index.js에서 내보내 줬던 모듈을 가져와 주자. 모듈을 가져오는 방법은 간단하다.

const { MongoConnect } = require("./db");

 

이런식으로 가져오면 된다. (객체로 내보냈으니 객체로 가져오는 것.)

 

그러면 나는 이 최상단 index.js 파일에서 db폴더 안에있는 index.js를 사용할 수 있는 것이다.

 

또 아래 코드를 입력하여 app.js 에서 내보내 준 { app } 도 가져오자.

const { app } = require('./app');

 

그리고 잠시 다른 곳에 놔둔 app.listen 함수가 있지 않은 가? 그것도 여기로 가져오자. 그러면 파일 구조는 아래와 같이 된다.

// 환경변수 라이브러리 불러오기
require('dotenv').config()

// db 연결
const { MongoConnect } = require("./db");

MongoConnect(); 

// 서버 연결
const { app } = require('./app');

app.listen(3000, () => {
    console.log(`서버 실행완료!`);
});

 

 이러면 정상적으로 DB를 이용한 서버실행이 완료가 되며, 파일까지 깔끔하게 분리하였다. 

(여기서 또 등장하는 .env ........보통 서버 실행 포트도 .env에 변수로 저장을 해준다. 따라서 .env에 아래와 같이 코드를 작성해주자. DB URL과 DB NAME은 이미 입력 해준 것이다.)

# DB 접속 URL
DB_URL="디비주소"
# DB 프로젝트 이름
DB_NAME="디비이름"
# 서버 포트 번호
PORT=3000

 

이 후에 완성된. 최종 최상단 index.js 파일이다.

// 환경변수 라이브러리 불러오기
require('dotenv').config()

// db 연결
const { MongoConnect } = require("./db");

MongoConnect(); 

// 서버 연결
const { app } = require('./app');

app.listen(process.env.PORT, () => {
    console.log(`서버 실행완료!`);
});