새로운세계

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

안녕하세요! 이번 포스트에서는 Vue.js와 Axios를 활용해 서버에서 데이터셋을 가져와 그리드로 표시한 뒤, 그리드의 특정 행을 클릭했을 때 input text에 해당 데이터를 자동으로 바인딩하는 방법을 자세히 다뤄보겠습니다. 이 예제는 실무에서 자주 사용되는 데이터 관리 및 UI 연동 패턴을 보여줍니다. 아래에서 단계별로 설명하고, 전체 코드를 제공하겠습니다. 1. 프로젝트 설정먼저, Vue 프로젝트를 생성하고 필요한 라이브러리를 설치해야 합니다. 아래 명령어를 사용해 기본 환경을 준비합니다. # Vue CLI 설치 (미설치 시)npm install -g @vue/cli# 프로젝트 생성vue create vue-axios-grid-example# 프로젝트 폴더로 이동cd vue-axios-grid-..

2025.02.21 - [Vue.js 를 배워보자] - json-server를 Vue와 Nuxt에서 활용하는 방법: 실습과 예제로 풀어보기 안녕하세요, 개발자 여러분! Vue.js 프로젝트에서 가짜 REST API를 제공해주는 json-server를 사용하다 보면, 기본 포트인 3000이 다른 서비스와 충돌하거나 특정 포트를 사용하고 싶을 때가 있죠. 오늘은 json-server의 포트를 변경하는 방법을 알아보겠습니다. 초보자도 쉽게 따라 할 수 있도록 코드와 함께 설명해볼게요!목표json-server의 기본 포트(3000)를 원하는 포트로 변경Vue.js 프로젝트와 연동해 사용하는 방법 확인1. 기본 설정 확인npm install -g json-server설치가 완료되면, 예를 들어 db.json이라는..

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 (클라이언트): 사용자..

Vue.js를 이용하여 사용자 로그인 기능을 구현하는 것은 웹 애플리케이션 개발에서 필수적인 과정입니다. 이 글에서는 Vue.js를 활용하여 안전하고 효율적인 사용자 로그인 시스템을 구축하는 방법을 단계별로 자세히 설명하고, 각 단계에서 고려해야 할 사항과 추가적인 기능 구현 방법을 함께 다룹니다.1. 프로젝트 생성 및 환경 설정Vue CLI로 프로젝트 생성vue create vue-logincd vue-loginnpm install axios vue-routeraxios: API 호출을 위한 HTTP 클라이언트vue-router: 라우팅 설정을 위한 패키지  프로젝트 디렉토리 구조 src/├── components/│ ├── Login.vue│ ├── Home.vue│ └── Dashboar..

Vue.js는 간결하고 유연한 구조로 프론트엔드 개발 생태계에서 널리 사용되는 프레임워크입니다. 이와 함께, axios는 자바스크립트에서 HTTP 요청을 간편하게 처리할 수 있는 라이브러리로, Vue.js 프로젝트에서 서버와 통신하는 주된 도구로 활용됩니다. 본 가이드에서는 Vue.js 프로젝트에서 axios를 이용하여 공공 API로부터 JSON 형태의 데이터를 가져오고, 이를 화면에 효과적으로 표시하는 방법을 상세하게 설명합니다. 1. 프로젝트 설정 및 axios 설치먼저, Vue.js 프로젝트를 생성하고 axios 라이브러리를 설치합니다. Vue CLI를 사용하여 간편하게 프로젝트를 생성할 수 있습니다.vue create my-projectcd my-projectnpm install axios 2. ..

Vue.js로 온라인 쇼핑몰 만들기: 상세 가이드 (부분 기능)Vue.js를 활용한 온라인 쇼핑몰 개발, 어디서부터 시작해야 할까요?Vue.js는 가볍고 유연하며, 컴포넌트 기반 개발 방식을 통해 복잡한 웹 애플리케이션을 효율적으로 구축할 수 있도록 지원하는 프론트엔드 프레임워크입니다. 이 글에서는 Vue.js를 이용하여 온라인 쇼핑몰의 주요 기능들을 구현하는 방법을 단계별로 상세히 설명하고, 필요한 기술 스택과 추가적인 고려 사항들을 함께 다루겠습니다.1. 프로젝트 설정 및 초기화Vue CLI 설치: 먼저, Vue 프로젝트를 빠르게 생성하고 관리하기 위한 Vue CLI를 설치합니다.프로젝트 생성: vue create my-shop과 같은 명령어를 통해 새로운 프로젝트를 생성하고, 필요한 기능들을 선택합..

Node.js 통합 테스트: 심층 분석 및 실제 예시Node.js 애플리케이션 개발에서 통합 테스트는 필수적인 단계입니다. 여러 모듈이나 구성 요소들이 서로 올바르게 작동하는지 확인하여 애플리케이션의 안정성을 높이고, 예상치 못한 문제를 사전에 방지하는 데 중요한 역할을 합니다. 이 글에서는 Node.js 통합 테스트의 개념, 필요성, 방법, 그리고 실제 예시를 통해 자세히 알아보겠습니다.통합 테스트란?통합 테스트는 개별 모듈 단위의 단위 테스트를 넘어, 서로 관련된 여러 모듈이나 구성 요소들이 함께 작동할 때 올바른 결과를 내는지 검증하는 테스트입니다. 예를 들어, 데이터베이스와 API 서버, 그리고 프론트엔드가 서로 통신하며 데이터를 주고받는 과정을 테스트하는 것이 통합 테스트에 해당합니다.Node...