새로운세계

안녕하세요, 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/│ ..

JavaScript의 ES 모듈(ECMAScript Modules) 시스템은 현대 웹 개발에서 중요한 역할을 합니다. 그 중심에는 import.meta라는 특별한 객체가 있는데, 이 객체는 현재 모듈의 메타데이터를 제공합니다. 이번 글에서는 import.meta의 대표 속성인 import.meta.url을 포함해, 관련 기능들을 기술 블로그 형식으로 살펴보겠습니다. Vue.js와 Vite 환경에서의 활용 예제도 함께 다룹니다.1. import.meta.url: 모듈의 위치를 알아내다import.meta.url은 현재 모듈의 절대 URL을 반환하는 속성입니다. 브라우저나 Node.js 환경에서 파일 경로를 동적으로 가져올 때 유용합니다.브라우저: 위 코드는 현재 .vue 파일의 경로를 템플릿에 출력합니다...

JupyterLab은 데이터 과학자, 머신러닝 엔지니어 등 데이터를 다루는 많은 사람들에게 필수적인 도구입니다. 다양한 데이터를 분석하고 시각화하며, 코드를 실행하는 통합 개발 환경을 제공합니다. 하지만 JupyterLab을 실행할 때마다 같은 디렉토리로 이동하는 것은 번거롭습니다. 이번 글에서는 JupyterLab의 초기 진입 경로를 원하는 디렉토리로 설정하는 방법을 자세히 알아보고, 더욱 효율적인 작업 환경을 구축하는 방법을 소개합니다.왜 초기 진입 경로를 설정해야 할까요?편의성 향상: 매번 디렉토리를 변경하지 않아도 원하는 프로젝트에 바로 접근할 수 있습니다.작업 효율성 증대: 자주 사용하는 데이터 파일이나 코드를 한 곳에 모아 관리할 수 있습니다.프로젝트 관리: 각 프로젝트별로 별도의 디렉토리를 ..

vue가 실행될때 포트번호가 어떻게 되는지 어떻게 알수있지? Vue.js 애플리케이션이 실행될 때 사용되는 포트 번호는 기본적으로 8080번 포트이며, 설정이나 환경에 따라 달라질 수 있습니다. 이를 확인하는 방법은 다음과 같습니다.1. 실행 로그 확인npm run serve 명령을 실행하면 터미널에 출력된 로그에서 포트 번호를 확인할 수 있습니다. 예를 들어: DONE Compiled successfully in 887ms App running at: - Local: http://localhost:8080/ - Network: http://192.168.0.10:8080/위 로그에서 8080번 포트가 사용 중임을 알 수 있습니다.2. vue.config.js 파일 확인프로젝트 디렉토리에 vu..