Node.js와 Express를 활용한 CRUD 애플리케이션을 제작하는 과정은 웹 개발에서 매우 중요한 경험입니다. 이번 포스트에서는 Node.js와 Express를 통해 기본적인 CRUD(생성, 조회, 수정, 삭제) 기능을 구현하는 방법에 대해 알아보겠습니다. 이 글에서는 애플리케이션의 구조 설정부터 라우팅, 그리고 사용자 인터페이스까지의 전 과정을 살펴보겠습니다.
개발 환경 설정
프로젝트를 시작하기 위해서는 먼저 개발 환경을 구성해야 합니다. Node.js가 설치되어 있어야 하며, 터미널을 열고 새 디렉토리를 생성한 후 이동합니다:
mkdir my-crud-app && cd my-crud-app
이후, npm init 명령어를 실행하여 package.json 파일을 생성합니다. 이 파일은 프로젝트에 필요한 패키지의 메타 정보를 포함하게 됩니다. 모든 질문에 기본값을 선택하면 기본적인 설정이 완료됩니다.
필요한 패키지 설치
이제 애플리케이션에서 사용할 주요 패키지를 설치할 시간입니다. 아래 명령어를 입력하여 Express 및 기타 필요한 모듈을 설치합니다:
npm install express mongoose ejs body-parser dotenv
각 패키지의 역할은 다음과 같습니다:
- express: 웹 애플리케이션 프레임워크로, 서버와 라우팅을 쉽게 설정할 수 있게 도와줍니다.
- mongoose: MongoDB와 쉽게 상호작용할 수 있도록 해주는 ODM(Object Data Mapping) 라이브러리입니다.
- ejs: HTML을 동적으로 생성하는 템플릿 엔진입니다.
- body-parser: 요청 본문을 간편하게 처리하기 위한 미들웨어입니다.
- dotenv: 프로젝트의 환경 변수를 관리하기 위한 패키지입니다.
서버 코드 작성
서버 코드를 작성하기 위해 server.js 파일을 생성합니다. 아래의 코드를 사용하여 기본적인 Express 서버를 설정합니다:
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
require('dotenv').config();
const app = express();
const PORT = process.env.PORT || 3000;
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');
// MongoDB-Atlas 연결
mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true });
app.listen(PORT, () => {
console.log(서버가 http://localhost:${PORT}에서 시작되었습니다.);
});여기서 process.env.MONGODB_URI는 .env 파일에 설정된 MongoDB 연결 문자열을 사용합니다.
모델 구축
CRUD 기능을 위한 데이터 모델을 정의해야 합니다. models라는 디렉토리를 만들고 todo.js 파일을 생성하여 아래와 같은 구조로 데이터를 정의합니다:
const mongoose = require('mongoose');
const todoSchema = new mongoose.Schema({
title: { type: String, required: true },
completed: { type: Boolean, default: false }
}, { timestamps: true });
module.exports = mongoose.model('Todo', todoSchema);라우팅 설정
이제 각 CRUD 작업을 처리할 라우트를 설정해야 합니다. routes 디렉토리를 생성하고 todos.js 파일을 만들어 아래 코드를 추가합니다:
const express = require('express');
const router = express.Router();
const Todo = require('../models/todo');
// CREATE
router.post('/todos', (req, res) => {
const newTodo = new Todo({
title: req.body.title,
completed: req.body.completed
});
newTodo.save()
.then(() => res.redirect('/todos'))
.catch(err => res.status(400).send(err));
});
// READ
router.get('/todos', (req, res) => {
Todo.find()
.then(todos => res.render('todos', { todos }))
.catch(err => res.status(500).send(err));
});
// UPDATE
router.put('/todos/:id', (req, res) => {
Todo.findByIdAndUpdate(req.params.id, req.body)
.then(() => res.redirect('/todos'))
.catch(err => res.status(400).send(err));
});
// DELETE
router.delete('/todos/:id', (req, res) => {
Todo.findByIdAndDelete(req.params.id)
.then(() => res.redirect('/todos'))
.catch(err => res.status(500).send(err));
});
module.exports = router;이렇게 설정한 라우터는 각 메소드에 맞는 요청을 효과적으로 처리합니다. 각 요청의 성공적 처리에 따라 적절한 응답을 반환합니다.
템플릿 엔진 설정 및 뷰 작성
마지막으로, 사용자 인터페이스를 위해 뷰를 작성해야 합니다. views 디렉토리를 생성하고 todos.ejs 파일을 만들어 다음과 같이 작성합니다:
<h1>할 일 목록</h1>
<form action="/todos" method="POST">
<input type="text" placeholder="할 일 제목" name="title">
<button type="submit">추가하기</button>
</form>
<ul>
<% todos.forEach(todo => { %>
<li>
<%= todo.title %> - <%= todo.completed ? '완료' : '미완료' %>
<a href="/todos/<%= todo._id %>/edit">수정</a>
<a href="/todos/<%= todo._id %>/delete">삭제</a>
</li>
<% }); %>
</ul>위의 템플릿은 사용자가 할 일을 추가하고 수정 및 삭제할 수 있는 기능을 제공합니다.
애플리케이션 실행
모든 설정이 완료되었다면, 서버를 시작하고 애플리케이션이 정상적으로 작동하는지 확인해보세요. 터미널에서 다음 명령어를 입력합니다:
node server.js
브라우저에서 http://localhost:3000/todos에 접속하면 CRUD 기능이 제대로 작동하는지 확인할 수 있습니다.
결론
이번 포스팅에서는 Node.js와 Express를 활용하여 기본적인 CRUD 애플리케이션을 만드는 방법에 대해 알아보았습니다. MongoDB와의 통합 및 EJS 템플릿 엔진을 활용하여 데이터를 효율적으로 관리하는 과정에서 많은 것을 배울 수 있었습니다. 이러한 기술들을 조합하여 점점 더 복잡한 애플리케이션으로 발전시킬 수 있으며, 이는 여러분의 개발자로서의 역량을 확장하는 데 큰 도움이 될 것입니다.
자주 물으시는 질문
Node.js와 Express를 사용하여 CRUD 애플리케이션은 어떤 기능을 제공하나요?
Node.js와 Express를 이용한 CRUD 애플리케이션은 데이터 생성, 조회, 수정 및 삭제와 같은 기본적인 기능을 지원합니다. 이로 인해 사용자는 데이터 관리를 간편하게 수행할 수 있습니다.
MongoDB를 사용하는 이유는 무엇인가요?
MongoDB는 NoSQL 데이터베이스로, 유연한 데이터 구조를 제공하여 애플리케이션의 요구사항에 맞게 쉽게 데이터 모델을 조정할 수 있습니다.
Express 프레임워크의 장점은 무엇인가요?
Express는 경량의 웹 프레임워크로, 서버 구축과 라우팅을 손쉽게 할 수 있도록 돕습니다. 이는 빠른 개발과 유지보수를 가능하게 합니다.
CRUD 애플리케이션을 구축하는 데 얼마 정도의 시간이 소요되나요?
구축 시간은 경험과 프로젝트의 복잡성에 따라 다르지만, 기본적인 CRUD 기능을 갖춘 애플리케이션은 몇 시간 내에 완성할 수 있습니다.
