MERN (MongoDB, Express, React, NodeJS) 시작할 때 명령어 모음

1. 리액트 프로젝트 생성

npx create-react-app MyProject

MyProject는 만드려고 하는 프로젝트의 이름으로 설정해준다.

 

2. 서버 환경 구축하기

콘솔에서

cd MyProject를 통해 해당 폴더로 이동한 뒤 서버 폴더를 만들어준다.

mkdir backend

해당 폴더로 다시 이동한다.

cd backend

이후 package.json 파일을 만들어준다.

npm init -y

express, cors, mongoose, dotenv를 설치해준다.

yarn add express cors mongoose dotenv

// yarn이 없다면
npm install express cors mongoose dotenv

 

- express : NodeJS를 쉽게 개발할 수 있도록 해주는 프레임워크

- cors(Cross Origin Resource Sharing) : 도메인 및 포트가 다른 서버로 클라이언가 요청했을 때 브라우저가 보안상의 이유로 API를 차단하게 된다. SPA(Single Page Application)를 개발하면 API 서버과 웹 페이지 서버가 달라서 CORS가 일어나는데, 브라우저가 차단하는 것을 막기 위해서는 CORS 설정을 허용해줄 필요가 있다. 이를 위해 Access-Control-Allow를 하거나, 미들웨어를 설정해줘야 하는데, 이 때 필요한 것이 cors 라이브러리다.

- mongoose : 몽도DB에 대한 작업을 진행할 때 필요한 라이브러리

- dotenv : DB의 URL을 감추기 위한 파일 - 보안상의 이유로 깃허브에 공개하면 안되는 정보를 모아두는 곳

 

이후 nodemon을 설치해준다

yarn global add nodemon

// yarn이 없다면
npm install -g nodemon

- nodemon : 노드 개발을 하며 코드 수정이 이루어질때마다 자동으로 노드 애플리케이션을 재시작 해주는 역할을 한다. (매번 코드 수정이 이뤄질 때마다 수동으로 명령어 입력하고 재시작 할 필요가 없다)

 

3. server.js , .env파일만들고 MongoDB와 연결하기

backend폴더에 server.js와 .env를 만들어준다.

.env에는 ATLAS_URI를 적어준다. 

ATLAS_URI = mongodb+srv://name:<password>@mine.vpicc.mongodb.net/myFirstDatabase?retryWrites=true&w=majority

* URI는 MongoDB에 만들어둔 Atlas의 URI를 가져온다.

두 번째 (Connect your application을 클릭하면 나온다)

* 유의할 점 - NodeJS 버전에 따라 Connect URI가 다르니 자신의 버전에 맞는 방법으로 해야 한다.

<password>부분은 해당 Atlas를 생성할 때 설정한 패스워드로 바꿔준다.

 

이후 server.js에 아래 코드를 넣어준다.

const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose'); //mongoDB 연결 위함

require('dotenv').config();

const app = express();
const port = process.env.PORT || 5000; // .env파일에서 포트를 가져오거나 5000번을 사용

app.use(cors()); // cors 미들웨어 사용
app.use(express.json());

app.listen(port, () => { // 해당 포트로 서버가 실행되고 있을 때 실행됨
    console.log(`Server is running on port: ${port}`);
});

const uri = process.env.ATLAS_URI; // mongoDB uri를 .env에서 불러온다. (보안상의 이유로 .env에 저장)
mongoose.connect(uri, { useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true } // 새로운 정보 추가 / 변경이 일어날 때마다 적용되는 mongoDB 설정
).then(res => console.log("Connected to DB")) // mongoDB 연결 확인
.catch(err => console.log(err)); // 에러 처리 (안해주면 Warning)

const connection = mongoose.connection; // mongoDB 연결 확인
connection.once('open', () => {
  console.log("MongoDB database connection established successfully");
})

콘솔 창에 아래 내용을 입력하여 실행해본다.

nodemon server

위 사진처럼 MongoDB database connection established successfully 메시지가 나오면 연결 성공.