Node.js Express로 CRUD 애플리케이션 만들기

Node.js Express로 CRUD 애플리케이션 만들기

Node.js와 Express를 활용하여 CRUD(생성, 조회, 수정, 삭제) 애플리케이션을 개발하는 과정은 웹 개발에 있어 필수적인 경험 중 하나입니다. 이번 글에서는 간단한 CRUD 기능을 구현하는 절차를 자세히 살펴보겠습니다.

개발 환경 설정

먼저, 프로젝트를 진행할 환경을 준비해야 합니다. 이를 위해 Node.js가 설치되어 있어야 하며, terminal을 열고 다음 명령어를 실행하여 새 디렉토리를 생성한 후 이동합니다.

mkdir my-crud-app && cd my-crud-app

그 다음, npm init 명령어를 사용하여 package.json 파일을 생성합니다. 이 파일은 프로젝트에 필요한 패키지의 정보를 포함하게 됩니다. 모든 질문에 기본값을 선택하면, 기본적인 설정이 완료됩니다.

필요한 패키지 설치

이제 애플리케이션에서 사용할 패키지를 설치하겠습니다. 아래의 명령어를 사용하여 Express, Mongoose 등 필요한 모듈을 설치합니다:

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;

 

라우터는 CRUD 작업을 효율적으로 처리하는 데 도움을 줍니다. 각 메소드에 맞는 요청을 다루며, 성공적인 결과에 따라 적절한 응답을 반환합니다.

반응형

템플릿 엔진 설정 및 뷰 작성

마지막으로, 사용자에게 데이터를 표시하기 위한 뷰를 작성해야 합니다. views 디렉토리를 만들고 todos.ejs 파일을 생성합니다:

 

 

 

 

 

 

 

할 일 목록

 

 

<% todos.forEach(todo => { %>

• <%= todo.title %> - <%= todo.completed ? '완료' : '미완료' %>
  
  
  
•  
• <% }); %>
•  

 

 

 

위의 템플릿은 사용자가 할 일을 추가하고 수정 및 삭제할 수 있는 기능을 제공합니다. EJS 템플릿 엔진을 이용하여 동적으로 데이터를 표현합니다.

애플리케이션 실행

모든 설정이 끝났다면, 서버를 시작하고 애플리케이션이 정상적으로 작동하는지 확인해보세요. 터미널에서 다음 명령어를 입력합니다:

node server.js

브라우저에서 http://localhost:3000/todos로 접속하면, CRUD 기능이 작동하는 것을 확인할 수 있습니다.

결론

위와 같이 Node.js와 Express를 사용하여 기본 CRUD 애플리케이션을 만드는 방법을 살펴보았습니다. 이 과정에서 MongoDB의 Mongoose와 EJS 템플릿 엔진을 활용하여 효율적인 데이터 관리를 학습할 수 있었습니다. 이러한 기술들을 조합하여 더 복잡한 애플리케이션으로 발전시키는 것은 개발자로서의 역량을 더욱 향상시킬 것입니다.

 

 

냉동 야채믹스 보관법과 소비기한 차이

 

반응형

자주 찾는 질문 Q&A

Node.js Express로 CRUD 애플리케이션을 시작하려면 어떻게 해야 하나요?

프로젝트를 시작하기 위해서는 Node.js와 Express를 설치하고 새로운 디렉터리를 생성해야 합니다. 그 후, npm을 통해 필요한 패키지를 설치하는 것이 중요합니다.

CRUD 기능은 어떤 방식으로 구현되나요?

CRUD 작업은 각각의 라우트를 설정하여 처리합니다. 이들 각 메소드는 생성, 조회, 수정 및 삭제 기능을 수행하며, 요청을 통해 데이터를 조작할 수 있습니다.

MongoDB와의 연결은 어떻게 하나요?

MongoDB에 연결하기 위해 Mongoose를 사용하며, 연결 문자열을 환경 변수에 설정한 후 서버 코드에서 이를 불러와 연결합니다.