[javascript] Vue.js와 MongoDB의 연동 방법

01 Dec 2023

javascript

Vue.js는 모던한 웹 애플리케이션 개발을 위한 프론트엔드 프레임워크로, 사용자 인터페이스를 간편하게 구축할 수 있는 강력한 기능을 제공합니다. 반면에 MongoDB는 유연하고 확장 가능한 NoSQL 데이터베이스로, 데이터를 저장하고 조회하는 데에 탁월한 성능을 보여줍니다. 이제 Vue.js와 MongoDB를 함께 사용하여 애플리케이션을 개발하고자 할 때, 어떻게 연동할 수 있는지 살펴보겠습니다.

1. MongoDB 설치 및 실행

먼저 MongoDB를 설치하고 실행해야 합니다. MongoDB는 공식 웹사이트에서 다운로드할 수 있으며, 설치 과정은 간단합니다. 설치가 완료된 후 명령 프롬프트 또는 터미널에서 mongod 명령어를 사용하여 MongoDB를 실행합니다.

mongod

2. Vue.js 프로젝트 생성

다음으로, Vue.js 프로젝트를 생성해야 합니다. Vue CLI를 사용하면 간단하게 Vue.js 프로젝트를 생성할 수 있습니다. 아래의 명령어를 사용하여 Vue CLI를 전역으로 설치합니다.

npm install -g @vue/cli

설치가 완료되면 다음의 명령어를 사용하여 Vue.js 프로젝트를 생성합니다. 프로젝트 생성 시에는 vue create 명령어를 사용하고, 필요한 설정들을 선택하여 진행합니다.

vue create my-project

프로젝트 생성이 완료되면, 프로젝트 디렉토리로 이동하여 아래의 명령어를 실행하여 Vue.js 개발 서버를 실행합니다.

npm run serve

3. MongoDB와의 연동

Vue.js와 MongoDB를 연동하기 위해서는 mongoose 패키지를 사용합니다. mongoose는 MongoDB의 기능을 활용하기 위한 Node.js용 ODM(Object Data Modeling) 입니다. Vue.js 프로젝트 디렉토리에서 아래의 명령어를 실행하여 mongoose 패키지를 설치합니다.

npm install mongoose

설치가 완료되면, Vue.js 프로젝트의 main.js 파일을 열고 mongoose 모듈을 require하고 MongoDB와 연결하는 코드를 작성합니다.

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/my-database', { useNewUrlParser: true });

위의 코드에서 mongodb://localhost/my-database는 연결할 MongoDB의 주소입니다. 자신의 MongoDB 주소로 수정해주시기 바랍니다.

4. MongoDB 데이터 사용하기

이제 mongoose를 사용하여 MongoDB 데이터를 사용할 수 있습니다. 예를 들어, 데이터를 저장하고 조회하는 코드를 작성해보겠습니다. Vue.js 프로젝트의 App.vue 파일을 열고 아래의 코드를 작성합니다.

const mongoose = require('mongoose');

// MongoDB 스키마 정의
const userSchema = new mongoose.Schema({
  name: String,
  age: Number
});

// MongoDB 모델 생성
const User = mongoose.model('User', userSchema);

// 새로운 사용자 생성
const user = new User({
  name: 'John Doe',
  age: 30
});

// 사용자 저장
user.save();

// 사용자 조회
User.find({}, (error, users) => {
  console.log(users);
});

위의 코드에서 User는 MongoDB의 컬렉션에 해당하며, name과 age 필드를 가진 사용자 정보를 저장하고 조회하는 코드입니다.

결론

Vue.js와 MongoDB를 연동하여 웹 애플리케이션을 개발하는 것은 매우 간단하고 효율적입니다. mongoose를 사용하면 Vue.js와 MongoDB 간의 데이터 통신을 쉽게 처리할 수 있으며, 데이터의 저장과 조회 등 다양한 작업을 간편하게 수행할 수 있습니다. 이를 통해 더욱 효율적인 애플리케이션 개발을 할 수 있습니다.

참고 자료

Vue.js 공식 웹사이트: https://vuejs.org/
MongoDB 공식 웹사이트: https://www.mongodb.com/
Mongoose: https://mongoosejs.com/