[#6] Server 셋팅하기 | Express.js, MongoDB, and Mongoose

728x90

초반엔 supabase를 이용해서 백엔드를 해결하려고 했었다. 하지만, 얼마 전에 팀원 한분이 나가면서 총 2명이서 프로젝트를 진행하게 되었다. 이참에 둘이서 시간이 좀 걸리더라도 나중에 필요한 기술들을 지금 해보자라는 이야기가 나왔고 연차가 쌓일수록 거의 대부분이 풀스택을 하는 것이 보였다. 그래서 Express.js를 이용해서 간단한 user 관리와 todo에 필요한 CRUD 정도만 해보기로 했다. 간단한 설명과 함께 최신에 올라온 Express.js, MongoDB, Mongoose 설치방법이 없어서 정리한다.

Express.js란?

공식 문서화면에 제일 잘 설명되있다.

Express는 웹 및 모바일 애플리케이션을 위한 강력한 기능 세트를 제공하는 최소한의 유연한 Node.js 웹 애플리케이션 프레임워크입니다.

다양한 HTTP 유틸리티 메소드와 미들웨어를 마음대로 사용할 수 있으므로 강력한 API를 빠르고 쉽게 생성할 수 있습니다.

Express는 여러분이 알고 있고 좋아하는 Node.js 기능을 모호하게 하지 않으면서 기본 웹 애플리케이션 기능의 얇은 계층을 제공합니다.

Express는 Express 미들웨어
모듈을 사용하여 확장할 수 있는 최소한의 핵심 기능을 갖춘 가볍고 유연한 라우팅 프레임워크입니다 .

MongoDB란?

NoSQL, Document 지향 데이터베이스로, 데이터를 배열 및 중첩 Document와 같은 복잡한 데이터 유형을 효율적으로 저장할 수 있는 유연한 JSON과 유사한 형식인 BSON(Binary JSON)으로 저장한다.
여러 장점이 있지만 구글링하면 많이 나오기 때문에 스킵하고, 사실 내가 쓰는 이유는 프론트엔드 개발자에게 굉장히 친화적인 DB라고 생각되어서이다. MongoDB 사이트에서 조금만 사용을 해보면 DB에 대해 아는 게 없는 내가 봤을 때도 쉽게 어떤 부분이 어떤 역할을 하는지 알 수 있다.

Mongoose란?

Mongoose는 Node.js와 MongoDB를 연결해주는 ODM이다.

**ODM(Object Document Mapping) : 객체와 문서를 1대1로 매칭하는 역할

MongoDB의 ODM 중 가장 유명하다.

Mongoose는 Schema라는 개념이 존재한다. 스키마는 SQL의 table과 비슷한 개념이라고 생각하시면 되는데, 데이터를 넣을 때 schema에서 선언한 틀에 맞게 데이터를 넣을 수 있도록 해준다. (아래 코드보면 쉽게 이해 가능)

feat. Nodemon
: 노드 서버를 키고 코드를 수정하거나 업데이트했을 때, 서버를 내리고 다시 켜서 반영시키는 작업을 자동으로 해주는 라이브러리

즉, 서버 코드 짤 때마다 터미널에 안다녀와도 됨.(즉시 반영) react와 같다.

-----------------------------------------

설치 시작

1. Express.js, MongoDB, Mongoose 설치

npm init
npm i express
npm i mongodb
npm i mongoose

// 편리하게 작업할 수 있게 해주는 라이브러리들
npm install --save-dev nodemon
npm i dotenv // .env파일을 index.js에서 바로 쓸 수 있게 해줌

2. package.json 변경

- nodemon으로 쉽게 express를 이용하게 되었다.

{
    "name": "co-task-server",
    "version": "1.0.0",
    "description": "Express.js, MongoDB",
    "main": "index.js",
    "type": "module", //이부분 추가 -> react처럼 import 구문 사용하기 위함
    "scripts": {
        "start": "nodemon index.js" // 이부분 수정
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "dotenv": "^16.4.5",
        "express": "^4.19.2",
        "mongodb": "^6.6.1",
        "mongoose": "^8.3.4",
    },
    "devDependencies": {
        "nodemon": "^3.1.0"
    }
}

3. 이 부분에서 겁나 애를 먹었다. 꼭 database이름을 넣도록 하자!

MongoDB -> 내 Database -> Connect -> Drivers -> 3. connection string 부분 복사

- 모자이크 부분은 <name:password>로 넣으면 된다.

- 저 땀흘리는 친구위에 내 database 이름을 넣으면 된다. (두번째 database)

- 마지막에 appName은 하나의 클러스트의 이름을 의미한다. (첫번째 Database)

즉, 내 MongoDB구조가 Cluster0 > todoappdb > users 이다.

(여기서 Cluster0와 todoappdb 둘다 database라고 이름이 지칭되어있는데 왜그런지는...이것 때문에 엄청 시간을 허비했다.)

4. index.js 만들기

- mongoose의 Schema도 사용해서 테스트겸 코드를 작성했다. Model부분은 나중에 폴더로 따로 모듈화 시킬 예정!

- dotenv덕분에 바로 process.env.~를 사용할 수 있게 되었다.

import express from 'express';
import mongoose from 'mongoose';
import dotenv from 'dotenv';

const app = express();
dotenv.config();

const PORT = process.env.PORT || 7000;
const MONGOURL = process.env.MONGO_URI;

mongoose
    .connect(MONGOURL)
    .then(() => {
        console.log('DB is connected Successfully.');
        app.listen(PORT, () => {
            console.log(`Server is running on port ${PORT}`);
        });
    })
    .catch((err) => console.log(err));

const userSchema = new mongoose.Schema({
    name: String,
    email: String,
    password: String,
});

const UserModel = mongoose.model('users', userSchema);

app.get('/getUsers', async (req, res) => {
    const userData = await UserModel.find();
    res.json(userData);
});

5. 테스트

전부 다 잘 날라오는 것을 확인할 수 있다.

++ 혹시 깃헙에 올린다면 .gitignore도 잊지말자

# dependencies
/node_modules

.env

<후기>

: 분명히 db가 연결됬는데 [] 빈배열이 자꾸 날라와서 구글링을 엄청 했지만 다 조금씩 코드가 달라서 오히려 더 헷갈렸다. 그래서 침착하고 다시 유트브에 검색해서 아래의 영상과 진행했던 부분을 조합해서 코드를 완성했다. 진짜 이래서 경험이 중요하구나.. 한다. 정말 간단한 내용이였는데 거의 몇시간이 걸렸다.. 그래도 한번 해봤으니, 이제는 express와 mongodb, 그리고 mongoose 셋팅은 걱정없다.

[참고]

찾은 영상 중 가장 최근에 올라 온 것