[javascript] 앵귤러와 데이터베이스 연동(MongoDB, MySQL 등)

05 Dec 2023

javascript

앵귤러(Angular)는 현대적인 웹 애플리케이션 개발을 위한 프레임워크로, 데이터베이스와의 연동은 필수적인 요소입니다. 그 중에서도 MongoDB와 MySQL을 예시로 앵귤러와 데이터베이스를 어떻게 연동할 수 있는지 알아보겠습니다.

MongoDB 연동

설치

MongoDB와 앵귤러를 연동하기 위해서는 우선 MongoDB를 설치해야 합니다. MongoDB는 NoSQL 데이터베이스로써, 비관계형 데이터를 다루는 데 강력한 기능을 가지고 있습니다. MongoDB를 설치하기 위해서는 공식 홈페이지에서 다운로드하고 설치하면 됩니다.

라이브러리 설치 및 연동

앵귤러에서 MongoDB와의 연동을 위해 mongoose 라이브러리를 사용합니다. mongoose는 MongoDB를 쉽게 조작할 수 있는 기능을 제공합니다.

먼저 npm 패키지 매니저를 사용하여 mongoose를 설치합니다.
```
npm install mongoose
```
앵귤러 프로젝트에서 mongoose를 import합니다.
```
import * as mongoose from 'mongoose';
```

MongoDB 서버에 연결하기 위한 설정을 작성합니다.

mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true });

앵귤러 컴포넌트에서 mongoose를 사용하여 데이터를 조회, 추가, 수정, 삭제할 수 있습니다.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import * as mongoose from 'mongoose';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor() {}

  // 데이터 조회
  getData(): Observable<any> {
    return Observable.create(async observer => {
      const data = await mongoose.model('MyModel').find().exec();
      observer.next(data);
      observer.complete();
    });
  }

  // 데이터 추가
  addData(data: any): Observable<any> {
    return Observable.create(async observer => {
      const newData = await mongoose.model('MyModel').create(data);
      observer.next(newData);
      observer.complete();
    });
  }

  // 데이터 수정
  updateData(id: string, data: any): Observable<any> {
    return Observable.create(async observer => {
      const updatedData = await mongoose.model('MyModel').findByIdAndUpdate(id, data, { new: true }).exec();
      observer.next(updatedData);
      observer.complete();
    });
  }

  // 데이터 삭제
  deleteData(id: string): Observable<any> {
    return Observable.create(async observer => {
      const deletedData = await mongoose.model('MyModel').findByIdAndRemove(id).exec();
      observer.next(deletedData);
      observer.complete();
    });
  }
}

MySQL 연동

설치

MySQL을 앵귤러와 연동하기 위해서는 우선 MySQL 데이터베이스를 설치해야 합니다. MySQL은 관계형 데이터베이스로써, 데이터 간의 관계를 다루는 데 유용한 기능을 가지고 있습니다. MySQL을 설치하기 위해서는 공식 홈페이지에서 다운로드하고 설치하면 됩니다.

라이브러리 설치 및 연동

앵귤러에서 MySQL과의 연동을 위해 mysql 라이브러리를 사용합니다. mysql는 MySQL 데이터베이스를 쉽게 조작할 수 있는 기능을 제공합니다.

먼저 npm 패키지 매니저를 사용하여 mysql 패키지를 설치합니다.
```
npm install mysql
```
앵귤러 프로젝트에서 mysql 패키지를 import합니다.
```
import * as mysql from 'mysql';
```

MySQL 서버에 연결하기 위한 설정을 작성합니다.

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'mydatabase'
});

connection.connect();

앵귤러 컴포넌트에서 mysql 라이브러리를 사용하여 데이터를 조회, 추가, 수정, 삭제할 수 있습니다.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import * as mysql from 'mysql';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor() {}

  // 데이터 조회
  getData(): Observable<any> {
    return Observable.create(observer => {
      connection.query('SELECT * FROM mytable', (error, results) => {
        if (error) {
          observer.error(error);
        } else {
          observer.next(results);
        }
        observer.complete();
      });
    });
  }

  // 데이터 추가
  addData(data: any): Observable<any> {
    return Observable.create(observer => {
      connection.query('INSERT INTO mytable SET ?', data, (error, results) => {
        if (error) {
          observer.error(error);
        } else {
          observer.next(results);
        }
        observer.complete();
      });
    });
  }

  // 데이터 수정
  updateData(id: string, data: any): Observable<any> {
    return Observable.create(observer => {
      connection.query('UPDATE mytable SET ? WHERE id = ?', [data, id], (error, results) => {
        if (error) {
          observer.error(error);
        } else {
          observer.next(results);
        }
        observer.complete();
      });
    });
  }

  // 데이터 삭제
  deleteData(id: string): Observable<any> {
    return Observable.create(observer => {
      connection.query('DELETE FROM mytable WHERE id = ?', id, (error, results) => {
        if (error) {
          observer.error(error);
        } else {
          observer.next(results);
        }
        observer.complete();
      });
    });
  }
}

마무리

앵귤러와 MongoDB, MySQL을 연동하여 데이터베이스와의 상호작용은 웹 애플리케이션의 백엔드 개발에 필수적입니다. 위 예시 코드를 통해 앵귤러와 데이터베이스 간의 연동 방법을 익힐 수 있습니다.

MongoDB 연동

설치

라이브러리 설치 및 연동

MySQL 연동

설치

라이브러리 설치 및 연동

마무리

참고 자료