새로운세계

안녕하세요, 개발자 여러분! 오늘은 Nuxt와 Vuetify를 결합하여 Composition API를 활용한 실무에서 유용할 만한 다양한 사례를 블로그 형식으로 소개해드릴게요. Vue 3의 강력한 Composition API와 Vuetify의 Material Design 컴포넌트를 Nuxt 환경에서 어떻게 실무에 적용할 수 있는지, 실제로 자주 마주칠 법한 케이스를 중심으로 살펴보겠습니다. 초보자도 따라 할 수 있도록 단계별로 설명할 테니, 차근차근 따라와 보세요!환경 설정: Nuxt와 Vuetify 통합먼저, Nuxt 프로젝트에 Vuetify를 설정하는 방법부터 간단히 짚고 넘어가겠습니다. Nuxt 3와 Vuetify 3를 사용한다고 가정하고, 아래와 같이 설정을 시작합니다.프로젝트 생성 및 Vueti..

Nuxt.js는 Vue.js를 기반으로 한 강력한 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 쉽게 구현할 수 있게 해줍니다. 여기에 TypeScript를 도입하면 정적 타입 검사와 코드 가독성을 높일 수 있어, 대규모 프로젝트에서 특히 유용합니다. 이번 글에서는 Nuxt.js 프로젝트에서 TypeScript를 사용할 때 객체 타입(Object Types)과 인터페이스(Interface)를 별도의 파일로 정의하고, 이를 프로젝트 전반에서 재사용할 수 있도록 관리하는 방법을 자세히 살펴보겠습니다.1. 왜 별도의 파일로 타입을 관리해야 할까?TypeScript의 가장 큰 장점은 코드에 타입을 명시적으로 정의함으로써 런타임 오류를 줄이고, 개발자가 의도를 명확히 전달할 수 있다는 ..

안녕하세요, 오늘은 Nuxt.js를 활용해 메인 화면과 하위 5개의 탭으로 구성된 인터랙티브한 웹 애플리케이션을 만드는 방법을 블로그 형식으로 자세히 설명해보려고 합니다. 이 예제는 Vue.js 기반의 프레임워크인 Nuxt를 사용하며, 각 탭은 별도의 Vue 파일로 구성되어 상호작용하도록 설계됩니다. 키워드를 기반으로 한 실용적인 예제를 통해 단계별로 구현 방법을 알아보겠습니다.목표메인 화면: 전체 레이아웃의 중심이 되는 페이지.5개의 탭: 각각 독립적인 콘텐츠를 가진 탭 (예: Home, About, Blog, Portfolio, Contact).Vue 파일: 각 탭을 별도의 컴포넌트로 분리해 모듈화.상호작용: 탭 간 전환 및 데이터 공유.1. Nuxt 프로젝트 설정먼저 Nuxt 프로젝트를 생성합니다...

Nuxt.js는 프론트엔드 개발을 위한 강력한 프레임워크로, RESTful API 호출을 통해 백엔드 데이터를 가져오는 작업은 필수적입니다. 이번 글에서는 Nuxt에서 RESTful 호출을 구현하는 여러 방법을 소개하고, 각각의 특징과 사용 사례를 정리해 보겠습니다. useFetch부터 axios, 그리고 그 외 다양한 도구까지, 어떤 상황에서 어떤 방법을 선택해야 할지 알아보세요!1. Nuxt 내장 도구: useFetch설명useFetch는 Nuxt 3에서 제공하는 기본 컴포저블로, RESTful API 호출을 간편하게 처리할 수 있습니다. SSR(Server-Side Rendering)과 CSR(Client-Side Rendering)을 자연스럽게 지원하며, 반응형 데이터를 반환합니다. 사용법  co..

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

Nuxt.js 프로젝트에서 로컬 파일 시스템(예: 텍스트 파일, 이미지, JSON 등)에 접근하는 방법을 묻는 것으로 이해했습니다. Nuxt는 기본적으로 Node.js 기반의 서버 사이드 렌더링(SSR) 프레임워크이므로, 로컬 파일 접근은 주로 서버 측 코드에서 이루어집니다. 아래에 이를 상세히 블로그글 스타일로 설명드릴게요.Nuxt.js에서 로컬 파일 접근: 방법과 주의사항안녕하세요, Nuxt.js 개발자 여러분! 오늘은 Nuxt.js 프로젝트에서 로컬 파일(예: JSON, 텍스트, 이미지 등)에 접근하는 방법을 알아보겠습니다. Nuxt는 클라이언트와 서버 환경이 공존하는 프레임워크라서, 파일 접근 방식이 일반적인 프론트엔드와는 조금 다를 수 있습니다. 이 글에서는 서버 측에서 파일을 읽는 방법, 정적..

nuxt에서 axios로 데이터 셋을 그리드로 로딩한 후 그리드를 클릭할때마다 input text v-bind로 자동으로 바인딩하는 예  안녕하세요! 오늘은 Nuxt.js에서 Axios를 활용해 외부 데이터를 가져와 그리드로 표시하고, 사용자가 그리드 항목을 클릭할 때마다 input 텍스트 필드에 해당 데이터를 자동으로 바인딩하는 방법을 알아보겠습니다. 이 예제는 실무에서 자주 사용되는 데이터 목록 관리나 편집 기능을 구현하는 데 유용합니다.1. 프로젝트 설정 및 Axios 설치먼저 Nuxt 프로젝트가 준비되어 있어야 합니다. 아직 프로젝트가 없다면 아래 명령어로 생성하세요:bash npx create-nuxt-app my-projectcd my-projectnpm install그 다음, Axios를 설..

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)를 지정하면 그 소스를 반환하여 화면에 보여주는 예제 코드를 작성해드리겠습니다.전체 흐름Nuxt.js (클라이언트): 사용자..

네, CORS(Cross-Origin Resource Sharing) 에러는 도메인이 같더라도 포트가 다르면 발생할 수 있습니다. CORS 정책은 **origin(출처)**을 기준으로 동작하는데, 여기서 출처는 프로토콜(http, https 등), 도메인, 포트 번호의 조합으로 정의됩니다. 즉, 도메인이 동일하더라도 포트 번호가 다르면 브라우저는 이를 서로 다른 출처로 간주하고, 서버에서 적절한 CORS 헤더(예: Access-Control-Allow-Origin)가 설정되지 않았다면 CORS 에러가 발생합니다.예시http://example.com:8080에서 http://example.com:3000으로 요청을 보내면, 도메인(example.com)은 같지만 포트(8080 vs 3000)가 다르므로 브..