공지 사항역대 가장 빠른 MongoDB, MongoDB 8.0을 소개합니다! 더 보기 >

공지 사항Voyage AI가 MongoDB와 협력하여 Atlas에서 더욱 정확하고 신뢰할 수 있는 AI 애플리케이션을 지원합니다. 자세히 알아보기 >

MERN Stack 사용 방법: 전체 가이드

이 튜토리얼에서는 MongoDB Atlas 데이터베이스에 액세스할 수 있어야 합니다. 계정이 없는 경우 무료로 가입하면 진행할 수 있습니다.

이 튜토리얼에서는 사용 가능한 최신 도구를 사용하여 풀스택 MERN 애플리케이션(이 경우 직원 데이터베이스)을 구축하는 방법을 보여줍니다. 시작하기 전에 Node.js와 React.js의 기본 사항을 잘 알고 있는지 확인하세요. 이 튜토리얼을 진행하려면 MongoDB Atlas 데이터베이스에도 액세스해야 합니다. 전체 코드는 GitHub 리포지토리에서 확인할 수 있습니다.

MERN 스택이란 무엇인가요?
프로젝트 설정
MongoDB Atlas에 연결
React 애플리케이션 설정
React 라우터 설정
프론트엔드와 백엔드 연결

MERN 스택이란 무엇인가요?

MERN 스택은 MongoDB, Express, React.js, Node.js로 구성된 웹 개발 프레임워크입니다. 이는 MEAN 스택의 여러 변형 중 하나입니다.

MERN 스택을 사용할 때 React로 프레젠테이션 계층을 구현하고, Express와 Node.js로 중간 또는 애플리케이션 계층을 구성하며, MongoDB로 데이터베이스 계층을 생성합니다.

이 MERN 스택 튜토리얼에서는 이 네 가지 기술을 활용하여 직원들의 정보를 기록하고 React 프론트엔드를 사용하여 표시할 수 있는 기본 애플리케이션을 개발해 보겠습니다.

MERN 스택을 시작하는 방법

시작하려면 다음을 수행해야 합니다.

Node.js 설치

LTS 버전이나 현재 버전을 다운로드하여 Node.js를 설치합니다.
참고: 이 튜토리얼에서 사용된 버전은 v20.11.0입니다.

코드 에디터 보유 또는 설치

이 튜토리얼에서는 원하는 코드 편집기를 사용할 수 있습니다. 하지만 이 데모에서는 Visual Studio Code를 사용할 예정입니다.

시각적으로 학습하는 방법을 선호한다면 이 튜토리얼의 동영상 버전을 확인해 보세요.

프로젝트 설정

(자유롭게 코드를 작성하거나 GitHub 리포지토리에서 전체 코드를 다운로드할 수 있습니다)

MERN을 사용하면 풀스택 솔루션을 만들 수 있습니다. 따라서 그 가능성을 최대한 활용하기 위해 MERN 스택 프로젝트를 만듭니다. 이 프로젝트에서는 백엔드와 프론트엔드를 모두 생성합니다. 프론트엔드는 React로 구현되고 백엔드는 MongoDB, Node.js, Express로 구현됩니다. 프론트엔드 클라이언트와 백엔드 서버를 호출합니다.

먼저 빈 디렉토리인 MERN을 만들어 보겠습니다. 이 폴더에는 클라이언트 및 서버 폴더가 포함됩니다.

Code Snippet

그런 다음 백엔드용 폴더를 만들고 이름을 server로 지정합니다. 그런 다음 npm init을 사용하여 package.json 파일을 초기화합니다.

Code Snippet

공식적으로 지원되는 표준 형식인 ECMAScript 모듈을 사용하여 JavaScript 코드를 재사용할 수 있도록 패키징하기 위해 패키지 package.json 파일에 한 줄을 추가합니다.

Code Snippet

종속성도 설치합니다.

Code Snippet

위의 명령은 세 가지 패키지를 설치합니다.

mongodb — Node.js 애플리케이션이 데이터베이스에 연결하고 데이터 작업을 수행할 수 있도록 해주는 MongoDB 데이터베이스 드라이버
express — Node.js용 웹 프레임워크(우리의 삶을 더 편리하게 만들어 줍니다)
cors — 교차 출처 리소스 공유를 허용하는 Node.js 패키지

package.json 파일에서 설치된 종속성을 확인할 수 있습니다. 패키지가 버전과 함께 나열되어야 합니다.

종속성이 성공적으로 설치되었는지 확인한 후 다음 코드를 사용하여 server.js라는 파일을 생성합니다.

mern/server/server.js

Code Snippet

여기서는 사용할 express와 cors를 가져옵니다. const port = process.env.PORT는 다음에 만들 config.env에서 포트 변수에 액세스합니다.

MongoDB Atlas에 연결

이제 서버를 데이터베이스에 연결할 차례입니다. 데이터베이스로 MongoDB Atlas를 사용하겠습니다. MongoDB Atlas는 강력한 데이터 보안과 안정성을 제공하는 클라우드 기반 데이터베이스 서비스입니다. MongoDB Atlas는 만료되지 않는 프리 티어 클러스터를 제공하며 이를 통해 Atlas 기능 및 기능의 하위 집합에 액세스할 수 있습니다.

Atlas 시작하기 가이드에 따라 계정을 만들고, 첫 번째 클러스터를 배포하고, 클러스터의 연결 문자열을 찾습니다.

이제 연결 문자열이 있으니 서버 디렉토리로 돌아가서 config.env 파일을 만듭니다. 그런 다음 연결 문자열을 새 ATLAS_URI 변수에 할당합니다. 완료되면 파일은 아래와 비슷하게 보일 것입니다. < username >, < password >, < clusterName >, < projectId >를 데이터베이스 사용자 이름, 비밀번호, 클러스터 이름, 프로젝트 ID로 바꿉니다.

mern/server/config.env

Code Snippet

server 디렉토리에 db라는 폴더를 만들고, 그 안에 connection.js라는 파일을 만듭니다. 다음 코드를 추가하여 데이터베이스에 연결할 수 있습니다.

mern/server/db/connection.js

Code Snippet

서버 API 엔드포인트

데이터베이스가 완료되었습니다. 서버가 완료되었습니다. 이제 API 엔드포인트 차례입니다. 먼저, routes 폴더를 만들고 그 안에 record.js를 추가해 보겠습니다. 'server' 디렉토리로 다시 이동하여 새 디렉토리와 파일을 만듭니다.

Code Snippet

routes/record.js 파일에는 다음과 같은 코드 줄도 포함됩니다.

mern/server/routes/record.js

Code Snippet

import express from "express";

// This will help us connect to the database
import db from "../db/connection.js";

// This help convert the id from string to ObjectId for the _id.
import { ObjectId } from "mongodb";

// router is an instance of the express router.
// We use it to define our routes.
// The router will be added as a middleware and will take control of requests starting with path /record.
const router = express.Router();

// This section will help you get a list of all the records.
router.get("/", async (req, res) => {
  let collection = await db.collection("records");
  let results = await collection.find({}).toArray();
  res.send(results).status(200);
});

// This section will help you get a single record by id
router.get("/:id", async (req, res) => {
  let collection = await db.collection("records");
  let query = { _id: new ObjectId(req.params.id) };
  let result = await collection.findOne(query);

if (!result) res.send("Not found").status(404);
  else res.send(result).status(200);
});

// This section will help you create a new record.
router.post("/", async (req, res) => {
  try {
    let newDocument = {
      name: req.body.name,
      position: req.body.position,
      level: req.body.level,
    };
    let collection = await db.collection("records");
    let result = await collection.insertOne(newDocument);
    res.send(result).status(204);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error adding record");
  }
});

// This section will help you update a record by id.
router.patch("/:id", async (req, res) => {
  try {
    const query = { _id: new ObjectId(req.params.id) };
    const updates = {
      $set: {
        name: req.body.name,
        position: req.body.position,
        level: req.body.level,
      },
    };

let collection = await db.collection("records");
    let result = await collection.updateOne(query, updates);
    res.send(result).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error updating record");
  }
});

// This section will help you delete a record
router.delete("/:id", async (req, res) => {
  try {
    const query = { _id: new ObjectId(req.params.id) };

const collection = db.collection("records");
    let result = await collection.deleteOne(query);

res.send(result).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error deleting record");
  }
});

export default router;

이 시점에서 애플리케이션을 실행하면 연결이 설정되면서 터미널에 다음과 같은 메시지가 표시됩니다. 최신 버전의 Node.js에 내장된 환경 변수 기능을 사용하고 있다는 점에 유의하세요.

Code Snippet

백엔드는 여기까지입니다. 이제 프론트엔드 작업을 시작합니다.

React 애플리케이션 설정

프론트엔드에서는 React 애플리케이션을 만드는 현대적인 방법인 Vite를 사용합니다. mern 디렉토리 내의 새 터미널에서 다음을 설정해 보겠습니다.

Code Snippet

프로젝트에 사용될 몇 가지 추가 종속성이 있습니다. Tailwind CSS부터 시작해 보겠습니다.

Code Snippet

다음으로 tailwind.config.js 파일에서 content 필드를 편집합니다.

Code Snippet

src/index.css 파일에서 Tailwind 지침을 추가하고 나머지는 모두 삭제해야 합니다.

Code Snippet

마지막으로 react-router-dom을 설치합니다.

Code Snippet

Tailwind는 미리 정의된 클래스 이름을 활용하여 CSS 스타일을 추가할 수 있는 유틸리티 우선 CSS 프레임워크입니다. 그리고 React Router는 React에 클라이언트 사이드 페이지 라우팅을 추가합니다!

React 라우터 설정

src/main.jsx 내부에서 다음 코드를 추가합니다.

mern/client/src/main.jsx

Code Snippet

router 변수에 애플리케이션 페이지 경로를 설정하고 RouterProvider를 사용하여 UI와 URL을 동기화했습니다. RouterProvider는 구성 요소 간 전환 시 원활한 전환을 지원합니다. 기본적으로 전체 페이지를 새로 고침하거나 다시 로드하는 대신, 변경해야 하는 구성 요소만 다시 로드하거나 새로 고침합니다. React Router는 필수는 아니지만 앱의 반응성을 높이려면 중요합니다.

구성 요소 만들기

다음으로 경로에 정의한 구성 요소를 만들어 보겠습니다. src 폴더 안에 components 폴더를 만듭니다. 우리가 생성하는 각 구성 요소에 새로운 .js 파일 (components 폴더 안에 있음)을 추가합니다. 이 경우에는 Navbar.jsx, RecordList.jsx, ModifyRecord.jsx를 추가합니다.

Code Snippet

아래 스냅샷은 각 파일의 모습을 보여줍니다.

Navbar.jsx

navbar.js 구성 요소에서 다음 코드를 사용하여 필요한 구성 요소에 연결되는 탐색 모음을 만듭니다.

mern/client/src/components/Navbar.jsx

Code Snippet

RecordList.jsx

다음 코드는 기록을 위한 구성 요소 보기 역할을 합니다. GET 메서드를 통해 데이터베이스의 모든 기록을 가져옵니다.

mern/client/src/components/RecordList.jsx

Code Snippet

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const Record = (props) => (
  <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.name}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.position}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.level}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      <div className="flex gap-2">
        <Link
          className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 h-9 rounded-md px-3"
          to={`/edit/${props.record._id}`}
        >
          Edit
        </Link>
        <button
          className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 hover:text-accent-foreground h-9 rounded-md px-3"
          color="red"
          type="button"
          onClick={() => {
            props.deleteRecord(props.record._id);
          }}
        >
          Delete
        </button>
      </div>
    </td>
  </tr>
);

export default function RecordList() {
  const [records, setRecords] = useState([]);

// This method fetches the records from the database.
  useEffect(() => {
    async function getRecords() {
      const response = await fetch(`http://localhost:5050/record/`);
      if (!response.ok) {
        const message = `An error occurred: ${response.statusText}`;
        console.error(message);
        return;
      }
      const records = await response.json();
      setRecords(records);
    }
    getRecords();
    return;
  }, [records.length]);

// This method will delete a record
  async function deleteRecord(id) {
    await fetch(`http://localhost:5050/record/${id}`, {
      method: "DELETE",
    });
    const newRecords = records.filter((el) => el._id !== id);
    setRecords(newRecords);
  }

// This method will map out the records on the table
  function recordList() {
    return records.map((record) => {
      return (
        <Record
          record={record}
          deleteRecord={() => deleteRecord(record._id)}
          key={record._id}
        />
      );
    });
  }

// This following section will display the table with the records of individuals.
  return (
    <>
      <h3 className="text-lg font-semibold p-4">Employee Records</h3>
      <div className="border rounded-lg overflow-hidden">
        <div className="relative w-full overflow-auto">
          <table className="w-full caption-bottom text-sm">
            <thead className="[&_tr]:border-b">
              <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Name
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Position
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Level
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Action
                </th>
              </tr>
            </thead>
            <tbody className="[&_tr:last-child]:border-0">
              {recordList()}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

Record.jsx

다음 코드는 레코드를 생성하거나 업데이트하는 양식 구성 요소로 사용됩니다. 이 구성 요소는 생성 명령이나 업데이트 명령을 서버에 제출합니다.

mern/client/src/components/Record.jsx*

Code Snippet

import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";

export default function Record() {
  const [form, setForm] = useState({
    name: "",
    position: "",
    level: "",
  });
  const [isNew, setIsNew] = useState(true);
  const params = useParams();
  const navigate = useNavigate();

useEffect(() => {
    async function fetchData() {
      const id = params.id?.toString() || undefined;
      if(!id) return;
      setIsNew(false);
      const response = await fetch(
        `http://localhost:5050/record/${params.id.toString()}`
      );
      if (!response.ok) {
        const message = `An error has occurred: ${response.statusText}`;
        console.error(message);
        return;
      }
      const record = await response.json();
      if (!record) {
        console.warn(`Record with id ${id} not found`);
        navigate("/");
        return;
      }
      setForm(record);
    }
    fetchData();
    return;
  }, [params.id, navigate]);

// These methods will update the state properties.
  function updateForm(value) {
    return setForm((prev) => {
      return { ...prev, ...value };
    });
  }

// This function will handle the submission.
  async function onSubmit(e) {
    e.preventDefault();
    const person = { ...form };
    try {
      let response;
      if (isNew) {
        // if we are adding a new record we will POST to /record.
        response = await fetch("http://localhost:5050/record", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(person),
        });
      } else {
        // if we are updating a record we will PATCH to /record/:id.
        response = await fetch(`http://localhost:5050/record/${params.id}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(person),
        });
      }

if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
    } catch (error) {
      console.error('A problem occurred with your fetch operation: ', error);
    } finally {
      setForm({ name: "", position: "", level: "" });
      navigate("/");
    }
  }

// This following section will display the form that takes the input from the user.
  return (
    <>
      <h3 className="text-lg font-semibold p-4">Create/Update Employee Record</h3>
      <form
        onSubmit={onSubmit}
        className="border rounded-lg overflow-hidden p-4"
      >
        <div className="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-slate-900/10 pb-12 md:grid-cols-2">
          <div>
            <h2 className="text-base font-semibold leading-7 text-slate-900">
              Employee Info
            </h2>
            <p className="mt-1 text-sm leading-6 text-slate-600">
              This information will be displayed publicly so be careful what you
              share.
            </p>
          </div>

<div className="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 ">
            <div className="sm:col-span-4">
              <label
                htmlFor="name"
                className="block text-sm font-medium leading-6 text-slate-900"
              >
                Name
              </label>
              <div className="mt-2">
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-slate-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                  <input
                    type="text"
                    name="name"
                    id="name"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-slate-900 placeholder:text-slate-400 focus:ring-0 sm:text-sm sm:leading-6"
                    placeholder="First Last"
                    value={form.name}
                    onChange={(e) => updateForm({ name: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <div className="sm:col-span-4">
              <label
                htmlFor="position"
                className="block text-sm font-medium leading-6 text-slate-900"
              >
                Position
              </label>
              <div className="mt-2">
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-slate-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                  <input
                    type="text"
                    name="position"
                    id="position"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-slate-900 placeholder:text-slate-400 focus:ring-0 sm:text-sm sm:leading-6"
                    placeholder="Developer Advocate"
                    value={form.position}
                    onChange={(e) => updateForm({ position: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <div>
              <fieldset className="mt-4">
                <legend className="sr-only">Position Options</legend>
                <div className="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0">
                  <div className="flex items-center">
                    <input
                      id="positionIntern"
                      name="positionOptions"
                      type="radio"
                      value="Intern"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Intern"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionIntern"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Intern
                    </label>
                    <input
                      id="positionJunior"
                      name="positionOptions"
                      type="radio"
                      value="Junior"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Junior"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionJunior"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Junior
                    </label>
                    <input
                      id="positionSenior"
                      name="positionOptions"
                      type="radio"
                      value="Senior"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Senior"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionSenior"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Senior
                    </label>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
        </div>
        <input
          type="submit"
          value="Save Employee Record"
          className="inline-flex items-center justify-center whitespace-nowrap text-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 hover:text-accent-foreground h-9 rounded-md px-3 cursor-pointer mt-4"
        />
      </form>
    </>
  );
}

이제 src/App.jsx 파일에 다음을 추가합니다.

mern/client/src/App.jsx

Code Snippet

이것이 주요 레이아웃 구성 요소입니다. Navbar는 항상 모든 페이지의 맨 위에 표시되고 Outlet은 이전에 main.jsx 파일에서 경로에 정의한 자식 구성 요소를 허용합니다.

프론트엔드와 백엔드 연결

구성 요소 생성 프로세스가 완료되었습니다. 또한 fetch를 사용하여 React 앱을 백엔드에 연결했는데, 이는 HTTP 요청을 처리하는 더 깔끔하고 쉬운 방법을 제공합니다. Record.jsx에서 onSubmit(e) 블록에 다음 코드를 추가했습니다. POST 또는 PATCH 요청이 URL로 전송되면 fetch는 데이터베이스에 새 레코드를 추가하거나 데이터베이스의 기존 기록을 업데이트합니다.

Code Snippet

또한 기존 레코드가 있으면 이를 로드하기 위해 생성자 블록 아래에 있는 Record.jsx에 다음 코드 블록을 추가했습니다.

Code Snippet

마지막으로 RecordList.jsx. RecordList.jsx는 데이터베이스에서 기록을 가져오므로 fetch의 GET 메서드를 사용하여 데이터베이스에서 기록을 검색합니다. 이를 위해 RecordList.jsx의 RecordList() 함수 위에 다음 코드 줄을 추가했습니다.

Code Snippet

모든 것을 닫은 후 앱을 시작하려면 아래 단계를 따르세요.

서버 앱이 계속 실행 중인지 확인합니다. 그렇지 않은 경우 server 디렉토리에서 다음 명령을 실행하여 시작합니다.

Code Snippet

새 터미널에서 클라이언트 디렉토리로 이동하여 다음 명령을 실행합니다.

Code Snippet

다음은 'Create Employee(직원 생성)' 버튼을 통해 'Jesse Hall', 'Kushagra Kesav', 'Stanimira Vlaeva'에 대한 기록을 추가한 후 기록 구성 요소의 랜딩 페이지가 표시되는 모습입니다.

직원을 추가할 수 있는 화면은 다음과 같습니다.

첫 번째 MERN 애플리케이션을 구축한 것을 축하드립니다. 더 많은 아이디어와 고급 개념을 알아보려면 개발자 센터를 방문하고, 궁금한 점은 커뮤니티 포럼에 게시하세요.

MongoDB Atlas 시작하기

무료 체험판 다운로드

자세히 알아보기