풀스택 MERN To-Do 애플리케이션 빌드 가이드

댓글 남기기

본 내용은 풀스택 MERN To-Do 애플리케이션을 빌드하는 방법을 안내합니다.
여기서는 환경 설정, 핵심 CRUD(Create, Read, Update, Delete) 작업을 보여주는 코드 작성, 그리고 애플리케이션을 무료 클라우드 데이터베이스인 MongoDB Atlas에 연결하는 방법을 다룹니다.

선행 지식 안내

글을 읽기에 앞서 HTML, CSS, JavaScript 기초와, 기본적인 프런트엔드/백엔드 프레임워크 및 라이브러리 개념을 알고 계시면 훨씬 이해하기 쉬울 거예요.
저는 기능적인 부분(기능 구현, 데이터 처리)에 중점을 두었기 때문에, 디자인이나 스타일은 자유롭게 변경하셔도 됩니다.
명령어 예시는 Windows 환경 기준이며, Linux, macOS, Ubuntu 등 다른 운영체제를 사용하신다면 적절히 변형해서 사용해주세요.

이 과정을 마치면, 여러분의 시스템에서 완벽하게 동작하는 To-Do 앱을 설치하고 실행할 수 있게 됩니다.

목차

  1. MERN 스택 소개
  2. 개발 환경을 설정하는 방법
  3. 프런트엔드 설정
  4. 백엔드 설정
  5. MongoDB Atlas 설정
  6. 응용 프로그램을 실행하세요
  7. 결론

MERN 스택 소개

MERN 스택은 다음 4가지 기술로 구성된, 현대 웹 애플리케이션 개발에 인기 있는 JavaScript 스택입니다.

  1. MongoDB: 데이터를 저장하기 위한 NoSQL 데이터베이스
  2. Express.js: API를 구축하기 위한 백엔드 프레임워크
  3. React(UI 라이브러리) + Vite(빌드 도구) + TypeScript(타입 지정 JavaScript):
    • 확장성과 유지보수를 고려한 프런트엔드 스택
  4. Node.js: 서버에서 자바스크립트를 실행할 수 있는 런타임 환경

우리는 이 가이드에서 위 기술들을 사용해 할 일(To-Do) 목록을 관리하는 풀스택 애플리케이션을 만들게 됩니다.

개발 환경을 설정하는 방법

Node.js 및 npm 설치 – Node 패키지 관리자

프로젝트마다 Node.js를 중복 설치하기보다는, 시스템 전체에 설치해 두는 것이 여러 프로젝트에 활용하기 편합니다.

  1. Node.js 설치
    • 아직 설치하지 않았다면 공식 Node.js 웹사이트에서 LTS 버전을 다운로드하세요.
    • Node를 설치하면 자동으로 npm도 함께 설치됩니다.
  2. 설치 확인
    • Windows의 경우, ‘명령 프롬프트’ 혹은 ‘Git Bash’를 열고 아래 명령어를 입력하세요. bash복사
    • node --version
    • npm --version
    • 버전 정보가 정상적으로 나온다면 설치가 완료된 것입니다.

새로운 MERN 프로젝트를 설정하는 방법

  1. 프로젝트 폴더 생성
    • 원하는 디렉토리에 mern-todo 같은 폴더를 만들어서, 그 안에서 작업을 진행합니다. bash복사편집mkdir mern-todo cd mern-todo
  2. Node 프로젝트 초기화
    • npm init -y를 입력하면 기본 package.json 파일이 생성됩니다. bash복사편집npm init -y
    • 이후 필요한 의존성을 설치하면서 계속 프로젝트를 확장해나갈 수 있어요.

프런트엔드 설정

To-Do 앱 UI 구축

  • React + Vite + TypeScript 조합으로 빠르고 모던한 프런트엔드를 구성할 예정입니다.
  • 아래 명령어로 React + TypeScript 프로젝트를 부트스트랩할 수 있습니다: bash복사편집npm create vite@latest
    • 이후 프로젝트 이름을 묻는 메시지가 나오면 적절히 입력하고, 프레임워크로 React를, 변형으로 TypeScript를 선택하세요.

UI에서 작업 표시

  • 기본 React 프로젝트가 준비되면, App.tsx 등 핵심 컴포넌트에서 To-Do 목록을 표시하도록 코드를 작성합니다.
  • 예시: tsx복사편집// App.tsx import React, { useState } from "react"; function App() { const [tasks, setTasks] = useState<string[]>([]); return ( <div> <h1>내 할 일 목록</h1> <ul> {tasks.map((task, index) => ( <li key={index}>{task}</li> ))} </ul> </div> ); } export default App;
  • 이후, 사용자가 입력한 작업을 추가하거나 표시하는 로직을 점진적으로 추가할 수 있습니다.

앱에 맞춤형 스타일을 제공하세요

  • 기능에 초점을 둔다면, 기본 CSS만으로 충분할 수 있지만, Bootstrap, Tailwind CSS 등 다양한 라이브러리를 사용해도 무방합니다.
  • src/App.css 등에 원하는 스타일을 작성해 넣고, To-Do 목록의 디자인을 마음껏 바꿔보세요.

백엔드 설정

  1. Express.js 설치 bash복사편집npm install express
  2. 서버 구성
    • server 폴더를 만들고, 내부에 index.js(또는 index.ts) 등을 생성한 뒤, Express 서버를 셋업합니다. js복사편집const express = require('express'); const app = express(); const port = 4000; app.use(express.json()); app.get('/', (req, res) => { res.send('백엔드 동작 확인!'); }); app.listen(port, () => { console.log(`Server running on port ${port}`); });
  3. CRUD 라우트
    • /api/tasks 같은 경로로 Create, Read, Update, Delete 기능을 제공합니다.
    • React 프런트엔드에서 Axios 등을 사용해 이 API를 호출하면, 목록 CRUD가 가능해집니다.

MongoDB Atlas 설정

  1. MongoDB Atlas에 접속 후 회원 가입, 프로젝트 생성.
  2. Free Cluster(무료) 생성.
  3. 클러스터가 준비되면 Connection -> Connect -> Connection String을 확인.
    • 예: mongodb+srv://<사용자이름>:<비밀번호>@cluster0.xxxxx.mongodb.net/<DB이름>?retryWrites=true&w=majority
  4. 서버에서 연결 js복사편집const mongoose = require('mongoose'); mongoose.connect('mongodb+srv://<사용자명>:<비밀번호>@cluster0.xxxxx.mongodb.net/<DB이름>?retryWrites=true&w=majority') .then(() => console.log('MongoDB Atlas에 연결되었습니다!')) .catch(err => console.error('연결 오류:', err));
  5. 이후 Schema(예: Task 모델) 정의하고, Express 라우트에서 이를 사용해 실제 데이터를 저장/조회/수정/삭제할 수 있습니다.

응용 프로그램을 실행하세요

  1. 프런트엔드 실행
    • cd로 프런트엔드 폴더로 이동 후 bash복사편집npm run dev
    • 브라우저로 로컬 주소(http://localhost:5173 등)에 접속하면 React 앱이 열립니다.
  2. 백엔드 실행
    • cd server 폴더 등에서 bash복사편집node index.js
    • 혹은 Nodemon 등을 설치해 매번 재실행 없이 자동으로 서버를 재시작하도록 세팅 가능합니다.
    • 백엔드가 동작하는 http://localhost:4000 주소를 확인하세요.
  3. 프런트엔드 <-> 백엔드 연결
    • React에서 Fetch 또는 Axios를 사용해 http://localhost:4000/api/tasks 같은 엔드포인트를 호출하면, 실제 MongoDB Atlas와 연결된 데이터가 보여집니다.

결론

이 가이드를 통해 풀스택 MERN To-Do 애플리케이션을 빌드하는 방법을 간단히 살펴봤습니다.

  • 프런트엔드: React + TypeScript + Vite
  • 백엔드: Node.js + Express.js
  • 데이터베이스: MongoDB(Atlas로 호스팅)

이제 여러분은 기본 CRUD 기능을 갖춘 To-Do 앱을 실행할 수 있을 것이고, 여기에 원하는 기능(사용자 인증, 필터링, 소켓 알림 등)을 확장해볼 수도 있습니다.
더 나은 디자인이나 추가 API 연동, 배포(예: Heroku, Vercel, AWS)까지 시도해보면서 MERN 스택을 더욱 깊이 있게 활용해보세요.

팁: 기능 구현이 어느 정도 완료되면, 코드를 깃허브에 올리거나 CI/CD 파이프라인을 구성해 실서비스처럼 운영해보는 것도 좋은 학습 경험이 됩니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다