Nuxt.js, Spring Boot, Oracle DB로 저장 프로시저 소스 조회 구현하기

 
Nuxt.js 프론트엔드와 Spring Boot 백엔드를 사용해 Oracle DB에서 특정 저장 프로시저의 소스 코드를 조회하고 화면에 표시하는 방법을 소개합니다.

클라이언트에서 프로시저 이름을 입력하면, Spring Boot가 USER_SOURCE 뷰를 쿼리해 소스를 반환하고, Nuxt.js가 이를 화면에 렌더링합니다. 백엔드는 JdbcTemplate을 활용하며, 프론트엔드는 Axios로 API를 호출합니다.

 

Nuxt.js (Vue.js 기반 프론트엔드), Spring Boot (백엔드), Oracle DB 조합에서 클라이언트에서 특정 저장 프로시저(Stored Procedure)를 지정하면 그 소스를 반환하여 화면에 보여주는 예제 코드를 작성해드리겠습니다.

전체 흐름

1. Nuxt.js (클라이언트): 사용자가 저장 프로시저 이름을 입력하고 요청을 보냄.
2. Spring Boot (백엔드): Oracle DB에서 해당 저장 프로시저의 소스를 조회하여 반환.
3. Oracle DB: 저장 프로시저 소스를 조회할 수 있는 쿼리 사용.

---

 

1. Spring Boot 백엔드 코드

pom.xml (의존성 추가)

xml

 

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>com.oracle.database.jdbc</groupId>
        <artifactId>ojdbc8</artifactId>
        <version>21.1.0.0</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jdbc</artifactId>
    </dependency>
</dependencies>

application.properties (DB 설정)

properties

 

spring.datasource.url=jdbc:oracle:thin:@localhost:1521:ORCL
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.datasource.driver-class-name=oracle.jdbc.OracleDriver

ProcedureController.java

java

 

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api")
public class ProcedureController {

    @Autowired
    private JdbcTemplate jdbcTemplate;

    @GetMapping("/procedure-source")
    public String getProcedureSource(@RequestParam String procedureName) {
        String query = "SELECT TEXT FROM USER_SOURCE WHERE NAME = UPPER(?) AND TYPE = 'PROCEDURE'";
        try {
            String source = jdbcTemplate.query(query, 
                (rs, rowNum) -> rs.getString("TEXT"), 
                procedureName.toUpperCase()
            ).stream().collect(Collectors.joining("\n"));
            
            return source.isEmpty() ? "Procedure not found" : source;
        } catch (Exception e) {
            return "Error retrieving procedure source: " + e.getMessage();
        }
    }
}

설명

• USER_SOURCE 뷰를 사용해 Oracle에서 저장 프로시저의 소스 코드를 조회.
• procedureName 파라미터를 받아 대문자로 변환 후 쿼리 실행.
• 결과는 줄 단위로 연결되어 반환됨.

---

2. Nuxt.js 프론트엔드 코드

pages/index.vue

vue

 

<template>
  <div>
    <h1>Stored Procedure Source Viewer</h1>
    <input v-model="procedureName" placeholder="Enter procedure name" />
    <button @click="fetchProcedureSource">Get Source</button>

    <pre v-if="source">{{ source }}</pre>
    <p v-else>No source available</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      procedureName: '',
      source: '',
    };
  },
  methods: {
    async fetchProcedureSource() {
      try {
        const response = await this.$axios.get('/api/procedure-source', {
          params: { procedureName: this.procedureName },
        });
        this.source = response.data;
      } catch (error) {
        this.source = 'Error: ' + error.message;
      }
    },
  },
};
</script>

<style>
pre {
  background: #f4f4f4;
  padding: 10px;
  white-space: pre-wrap;
}
</style>

 

 

nuxt.config.js (Axios 설정)

javascript

 

export default {
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: 'http://localhost:8080', // Spring Boot 서버 주소
  },
};

설치 명령어

bash

 

npm install @nuxtjs/axios

설명

• 사용자가 입력한 procedureName을 백엔드로 전송.
• 백엔드에서 받은 소스 코드를 <pre> 태그로 화면에 표시.
• 간단한 스타일링으로 가독성 확보.

---

3. 동작 테스트

1. Oracle DB: 예시로 아래와 같은 저장 프로시저를 생성.
   sql

    

   CREATE OR REPLACE PROCEDURE SAMPLE_PROC AS
   BEGIN
       DBMS_OUTPUT.PUT_LINE('Hello, this is a sample procedure!');
   END SAMPLE_PROC;
   /

2. Spring Boot: 서버 실행 (mvn spring-boot:run).
3. Nuxt.js: 개발 서버 실행 (npm run dev).
4. 브라우저에서 http://localhost:3000 접속 후 SAMPLE_PROC 입력 후 버튼 클릭.

예상 결과

화면에 아래와 같은 소스가 표시됨:

 

CREATE OR REPLACE PROCEDURE SAMPLE_PROC AS
BEGIN
    DBMS_OUTPUT.PUT_LINE('Hello, this is a sample procedure!');
END SAMPLE_PROC;

---

참고

• Oracle DB 접속 정보는 실제 환경에 맞게 수정 필요.
• 에러 처리 및 보안을 위해 추가적인 검증 로직을 백엔드에 추가하는 것이 좋음.
• Nuxt에서 입력값 검증이나 로딩 상태를 추가하면 UX가 개선됨.

궁금한 점이 있으면 말씀해주세요!