새로운세계

안녕하세요, Nuxt 개발자 여러분! 이번에는 Nuxt 3의 서버 핸들러(defineEventHandler)에서 MariaDB 데이터베이스에 연결하고, SELECT 쿼리를 실행해 결과를 클라이언트에 리턴하는 방법을 알아보겠습니다. MariaDB는 MySQL과 호환되는 오픈소스 데이터베이스로, Node.js 환경에서 쉽게 통합할 수 있습니다. 단계별로 상세히 설명할게요!1. 기본 환경 설정MariaDB에서 데이터를 가져오려면 먼저 프로젝트에 데이터베이스 연결 라이브러리를 설치하고, Nuxt의 서버 환경에서 이를 사용해야 합니다.1.1. 프로젝트 구조 my-nuxt-project/├── pages/│ └── index.vue├── server/│ └── api/│ └── getData.js..

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/│ ..

Vue 3와 Nuxt 3에서 Composition API를 활용하여 서버와 데이터를 주고받는 방법을 살펴보겠습니다. 이 글에서는 ref()를 사용한 반응형 데이터 관리, setup()을 활용한 상태 공유, $fetch()를 이용한 서버 API 호출 방법을 설명하며, 예제 코드와 함께 상세한 설명을 제공합니다.1. 프로젝트 구조 및 개요이 예제에서는 setup()을 이용해 상태를 관리하며, ref()를 활용하여 반응형 데이터를 사용합니다. Nuxt 3의 $fetch()를 사용해 API 호출을 수행하고, 서버에서 클라이언트가 보낸 데이터를 받아 다시 응답하는 구조를 가집니다.1. Vue 템플릿 코드 (컴포넌트에서 데이터 처리)이제 Vue 템플릿과 JavaScript 코드가 어떻게 구성되어 있는지 살펴보겠습니..