Nuxt.js에서 defineEventHandler로 Oracle DB 데이터 조회하기

Nuxt.js의 서버 핸들러(defineEventHandler)를 사용해 Oracle 데이터베이스에서 SELECT 쿼리를 실행하고, 그 결과를 클라이언트로 반환하는 방법을 알아보겠습니다. Oracle DB는 강력한 엔터프라이즈 데이터베이스인데, Node.js 환경에서 oracledb 모듈을 활용하면 쉽게 연결할 수 있습니다. 단계별로 상세히 다뤄볼게요!

1. 사전 준비: Oracle DB와 Nuxt 환경 설정

Oracle 데이터베이스에서 데이터를 조회하려면 몇 가지 준비가 필요합니다.

1.1. 프로젝트 환경

Nuxt 3 프로젝트가 이미 설정되어 있다고 가정합니다. server/api 디렉토리에서 서버 핸들러를 작성할 예정입니다:

 

my-nuxt-project/
├── server/
│   └── api/
│       └── oracleData.js
├── pages/
│   └── index.vue
├── package.json
└── nuxt.config.js

1.2. oracledb 모듈 설치

Oracle 데이터베이스와 통신하려면 oracledb 패키지가 필요합니다. 프로젝트 디렉토리에서 설치합니다:

 

npm install oracledb

주의: oracledb는 Node.js 환경에서 Oracle Instant Client 라이브러리를 요구합니다. 설치 후 환경 설정이 필요할 수 있으니, 아래를 참고하세요.

1.3. Oracle Instant Client 설치

oracledb가 작동하려면 Oracle Instant Client가 시스템에 설치되어 있어야 합니다. 맥에서 진행한다면:

1. Oracle Instant Client 다운로드 페이지에서 macOS용 ZIP 파일을 받습니다(예: instantclient-basic-macos.x64-19.8.0.0.0dbru.zip).
2. ZIP 파일을 풀고, 홈 디렉토리에 배치(예: ~/oracle/instantclient_19_8).
3. 환경 변수 설정:

   export DYLD_LIBRARY_PATH=~/oracle/instantclient_19_8:$DYLD_LIBRARY_PATH

   이를 .zshrc나 .bashrc에 추가해 영구 적용하세요.

1.4. 데이터베이스 연결 정보 준비

Oracle DB에 접속하려면 연결 정보가 필요합니다. 예를 들어:

• 사용자 이름: myuser
• 비밀번호: mypassword
• 연결 문자열: localhost:1521/myservice (호스트, 포트, 서비스 이름)

이 정보는 DBA나 환경 설정에서 확인하세요.

2. 서버 핸들러 작성: Oracle 데이터 조회

이제 server/api/oracleData.js 파일에서 Oracle DB에 연결하고 SELECT 쿼리를 실행하는 코드를 작성합니다.

2.1. 코드 예제

 

import oracledb from 'oracledb';

export default defineEventHandler(async (event) => {
  let connection;

  try {
    // Oracle DB 연결 설정
    connection = await oracledb.getConnection({
      user: 'myuser',
      password: 'mypassword',
      connectString: 'localhost:1521/myservice',
    });

    // SELECT 쿼리 실행
    const result = await connection.execute(
      `SELECT id, name, email FROM users WHERE rownum <= 10`, // 예시 쿼리
      [], // 바인드 변수 (없으면 빈 배열)
      { outFormat: oracledb.OUT_FORMAT_OBJECT } // 결과를 객체 형태로 반환
    );

    // 조회 결과 반환
    return {
      success: true,
      data: result.rows, // 쿼리 결과 데이터
    };
  } catch (error) {
    return {
      success: false,
      error: '데이터 조회 실패',
      details: error.message,
    };
  } finally {
    // 연결 해제
    if (connection) {
      try {
        await connection.close();
      } catch (err) {
        console.error('연결 해제 실패:', err);
      }
    }
  }
});

코드 설명:

• 연결 설정: oracledb.getConnection으로 Oracle DB에 접속합니다.
• 쿼리 실행: connection.execute로 SELECT 쿼리를 실행하며, outFormat을 OBJECT로 설정해 JSON 형태로 결과를 받습니다.
• 결과 반환: 성공 시 result.rows에 데이터가 배열로 담겨 반환됩니다.
• 에러 처리: try/catch로 예외를 처리하며, 실패 시 에러 메시지를 반환.
• 연결 해제: finally 블록에서 연결을 안전하게 종료.

2.2. 쿼리 커스터마이징

위 예시는 users 테이블에서 id, name, email을 조회합니다. 원하는 테이블과 컬럼에 맞게 쿼리를 수정하세요. 예를 들어:

 

SELECT product_id, product_name, price FROM products WHERE category = :cat

바인드 변수가 필요하면:

const result = await connection.execute(
  `SELECT product_id, product_name, price FROM products WHERE category = :cat`,
  { cat: 'electronics' },
  { outFormat: oracledb.OUT_FORMAT_OBJECT }
);

3. 프론트엔드에서 데이터 사용

pages/index.vue에서 API를 호출해 데이터를 표시합니다.

3.1. 예제 코드

 

<template>
  <div>
    <h1>Oracle DB 데이터</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <button @click="fetchData">데이터 조회</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const users = ref([]);

const fetchData = async () => {
  const response = await $fetch('/api/oracleData');
  if (response.success) {
    users.value = response.data;
  } else {
    console.error(response.error, response.details);
  }
};
</script>

• $fetch: Nuxt의 기본 HTTP 클라이언트로 /api/oracleData 엔드포인트를 호출.
• users: 조회된 데이터를 반응형 변수에 저장.

4. 실행 및 테스트

1. npm run dev로 Nuxt 개발 서버를 실행합니다.
2. 브라우저에서 http://localhost:3000에 접속하고 버튼을 클릭합니다.
3. Oracle DB에서 조회된 데이터가 리스트로 표시되면 성공!

5. 주의사항과 최적화

5.1. 연결 풀 사용

위 예시는 요청마다 연결을 생성/해제하는데, 성능을 위해 연결 풀(Connection Pool)을 사용하는 것이 좋습니다:

 

import oracledb from 'oracledb';

// 전역 연결 풀 초기화 (최초 한 번만 실행)
let pool;
async function initPool() {
  if (!pool) {
    pool = await oracledb.createPool({
      user: 'myuser',
      password: 'mypassword',
      connectString: 'localhost:1521/myservice',
      poolMin: 1,
      poolMax: 10,
    });
  }
  return pool;
}

export default defineEventHandler(async (event) => {
  let connection;
  try {
    const pool = await initPool();
    connection = await pool.getConnection();
    const result = await connection.execute(
      `SELECT id, name, email FROM users WHERE rownum <= 10`,
      [],
      { outFormat: oracledb.OUT_FORMAT_OBJECT }
    );
    return { success: true, data: result.rows };
  } catch (error) {
    return { success: false, error: error.message };
  } finally {
    if (connection) await connection.close();
  }
});

5.2. 환경 변수 사용

연결 정보를 코드에 하드코딩하지 말고 .env 파일에 저장하세요:

 

ORACLE_USER=myuser
ORACLE_PASSWORD=mypassword
ORACLE_CONNECT=localhost:1521/myservice

nuxt.config.js에서 환경 변수를 설정하고, 코드에서 사용

 

const config = {
  user: process.env.ORACLE_USER,
  password: process.env.ORACLE_PASSWORD,
  connectString: process.env.ORACLE_CONNECT,
};

5.3. 에러 처리

네트워크 오류, 쿼리 문법 오류 등을 대비해 상세한 에러 메시지를 로그로 남기세요.

마무리

Nuxt.js의 defineEventHandler에서 Oracle DB 데이터를 조회하는 방법을 배웠습니다. oracledb 모듈과 연결 풀을 활용하면 안정적이고 효율적인 데이터 조회가 가능합니다. 이 방법을 기반으로 원하는 쿼리를 자유롭게 적용해보세요. 추가 질문이 있다면 언제든 물어보세요!