[MERN] MongoDB + Express + React + Node + Typescript 백엔드 설정하기

일요일에 모여 하는 스터디로 공부하고 싶은 주제를 정해 스터디원과 함께 공유하는 시간을 갖습니다.

 

2022년 12월, 처음으로 클론 코딩을 통해 백엔드를 공부하게 되었습니다. 그토록 프론트만 고집하던 제가 다른 것을 다 제쳐두고 백엔드를 공부하게 된 이유는 결국 두루두루 알아야 프론트를 더 잘할 수 있다는 것을 깨달았기 때문이죠! 백엔드를 직접 만들어보고 나니 전체 프로세스가 한눈에 들어왔습니다. 물론 클론해서 배운 것이기 때문에 지식을 완벽하게 습득했다고 말하기 어려워 풀스택으로 새로운 프로젝트를 만들게 되었습니다. 프로젝트에 앞서 제가 이 스택을 선택한 이유와 백엔드 설정을 기록해보려고 합니다.

 

 

---

 

Why MERN stack? 

저는 제목에서 알 수 있듯 MongoDB + Express + React + Node ( + Typescript )으로 프로젝트를 구성했습니다.

MongoDB에서 MERN 아키텍처를 잘 나타낸 그림을 찾아볼 수 있었습니다.

https://www.mongodb.com/mern-stack

React.js는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로 상호작용이 많은 인터페이스를 구축하고 데이터가 변경됨에 따라 컴포넌트를 렌더링합니다. 기존에 계속해서 공부해왔고 잘 사용하고 있었기 때문에 망설임 없이 React.js를 선택했습니다.

 

Express.js와 Node.js는 백엔드를 처음 배우면서 익혔던 스택인데 Express.js는 역시 이름에서 알 수 있 듯이 자바스크립트로 작성할 수 있어 쉽게 접근할 수 있었습니다.  Express.js는 Node 상에서 동작하는 웹 애플리케이션 프레임워크입니다. 가볍고 유연하게 프레임워크를 구성할 수 있습니다.

 

MongoDB는 NoSQL(Not Only SQL)로 기존 RDBMS(관계형 데이터베이스)의 한계를 극복하기 위해 만들어진 새로운 형태의 저장소 입니다. 기존 RDBMS에서 SQL에 의해 저장되고 정해진 스키마에 따라 데이터를 저장해야하는 반면 NoSQL에서는 테이블 간의 관계를 정의하지 않으며 자유로운 데이터 구조를 가질 수 있어 수평적 확장에 유리합니다. JSON 형태의 key-value 쌍으로 이루어진 데이터 구조로 개발 친화적인 방식을 가지고 있어 선택하게 되었습니다.

 

 

MERN stack Backend Setup

그럼 본격적으로 MERN + Typescript로 백엔드를 설정하겠습니다.

 

1. 프로젝트 만들기

// 터미널에서 폴더를 만드는 것으로 시작해봅시다!

mkdir mern-setup

 

2. package.json 추가하기

npm init -y

 

3. gitignore 추가하기

// cmd + shift + p (맥 기준)
add gitignore
Node
// Node에 맞는 gitignore가 자동으로 생성됩니다.

 

4. README 추가하기

touch README.md

 

5. 서버 설정하기

// express 설치하기
npm i express

// express 설치 후 다음과 같은 파일이 추가됩니다.
+ node_modules // gitignore에 추가해 깃허브에 올라가지 않도록 합니다.
+ package-lock.json

// body-parser, cors 설치하기
npm i body-parser cors

// server/server.js

import bodyParser from 'body-parser';
import express from 'express';
import cors from 'cors';

const app = express();

const PORT = 4000;

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

const handleListening = () =>
  console.log(`✅ Server listening on port http://localhost:${PORT} 🚀`);

app.listen(PORT, handleListening);

// package.json

{
  // ...
  "scripts": {
    // "npm run dev"를 통해 server.js가 node로 실행됩니다.
    "dev": "node src/server/server.js"
  },
  // ...
}

 

6. Babel 추가하기

Babel은 자바스크립트 컴파일러로 최신 자바스크립트 문법을 구형 브라우저가 이해할 수 있는 문법으로 변환해주는 역할을 한다.

npm install @babel/core @babel/preset-env @babel/preset-react --save-dev

// @babel/core: babel의 코어에 해당
// @babel/preset-env: babel의 설정이 조합된 프리셋

// babel.config.json

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

npm install @babel/node --save-dev

// @babel/node: babel로 Node.js 런타임을 실행해줍니다.

// package.json

{
  // ...
  "scripts": {
    // node -> babel-node
    "dev": "babel-node src/server/server.js"
  },
  // ...
}

 

7. nodemon 추가하기

nodemon은 서버 코드가 변경 시 이를 감시해 서버를 자동으로 재실행하게 합니다.

npm i nodemon --save-dev

// package.json

{
  // ...
  "scripts": {
    "dev": "nodemon --exec babel-node src/server/server.js"
  },
  // ...
}

 

8. morgan 추가하기

morgan은 로깅에 도움을 주는 미들웨어 입니다.

npm i morgan

// server/server.js

import bodyParser from 'body-parser';
import express from 'express';
import cors from 'cors';
import morgan from 'morgan';

const PORT = 4000;

const app = express();
const logger = morgan('dev');

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(logger);

const handleListening = () =>
  console.log(`✅ Server listening on port http://localhost:${PORT} 🚀`);

app.listen(PORT, handleListening);

 

9. Typescript 추가하기

npm i typescript --save-dev

// tsconfig 만들기
tsc --init

// tsconfig.json

{
  "compilerOptions": {
    "lib": ["es5", "es6", "dom"],
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./build",
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "jsx": "react-jsx"
  }
}

// types가 필요한 패키지 추가 설치하기
npm i @babel/preset-typescript @types/node @types/express @types/morgan @types/react @types/react-dom @types/cors @types/body-parser @types/multer --save-dev

npm i ts-node --save-dev

// package.json

{
  // 
  "scripts": {
    // babel-node -> ts-node
    "dev": "nodemon --exec ts-node src/server.ts"
  },
  // ...
  "dependencies": {
    "express": "^4.18.2",
    "morgan": "^1.10.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.7",
    "@babel/node": "^7.20.7",
    "@babel/preset-env": "^7.20.2",
    "@types/express": "^4.17.15",
    "@types/morgan": "^1.9.4",
    "@types/node": "^18.11.18",
    "nodemon": "^2.0.20",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4"
  }
}

 

10. MongoDB 연결하기

Mongoose는 Node.js와 MongoDB를 위한 ODM 라이브러리입니다.

dotenv는 .env 파일에 서버 주소, API Key 값 등 기밀로 관리해야 하는 정보를 변수로 등록해주는 모듈입니다.

npm i mongoose

// db.ts

import mongoose from 'mongoose';

mongoose.set('strictQuery', true);
mongoose.connect(process.env.DB_URL);

const db = mongoose.connection;

const handleOpen = () => console.log('✅ Connected to DB');
const handleError = (error) => console.log('❌ DB Error', error);
db.on('error', handleError);
db.once('open', handleOpen);

npm i dotenv

// .env

DB_URL=mongodb://127.0.0.1:27017/mern-setup

// server.ts

import 'dotenv/config';
import './db';
...

 

여기까지 서버 기본 설정을 하고 데이터베이스 연결했습니다. 

실전 프로젝트에서는 이를 기반으로 CRA를 추가해 진행해보겠습니다.