새로운세계

안녕하세요! 이번 포스트에서는 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 (클라이언트): 사용자..

Node.js와 Express.js를 사용하여 API를 개발할 때, API 문서화는 필수적인 작업입니다. 잘 정돈된 API 문서는 개발자들 간의 효율적인 협업을 돕고, API를 사용하는 클라이언트 개발자들에게 명확한 가이드를 제공합니다. 이 글에서는 Swagger와 Redoc 라이브러리를 활용하여 Node.js Express 환경에서 API 문서를 자동 생성하는 방법을 상세히 알아보겠습니다. Swagger란 무엇인가?Swagger는 RESTful API를 위한 인터페이스 설명 언어(OpenAPI Specification)를 기반으로 API를 설계하고 문서화하는 오픈 소스 프레임워크입니다. Swagger를 사용하면 API의 구조, 요청/응답 데이터 형식, 인증 방법 등을 명확하게 정의할 수 있으며, 이를 ..

2024.11.24 - [Vue.js 를 배워보자] - Nuxt(Pinia) 게시판 페이징, 검색, RESTful API (Node.js, MySQL) 예제 Nuxt(Pinia) 게시판 페이징, 검색, RESTful API (Node.js, MySQL) 예제1. 프로젝트 설정# Nuxt 프로젝트 생성npx create-nuxt-app my-board# Pinia 설치cd my-boardnpm install pinia 2. Pinia Store 설정 (store/board.js)import { defineStore } from 'pinia'import axios from 'axios'export const useBoardStore = defineStonotion4570.tistory.com 기존의 게시판 ..

MySQL을 사용하여 Todo 리스트의 CRUD 기능을 구현하는 방법을 설명해드리겠습니다. 이번에는 Node.js와 Express를 백엔드로, React를 프론트엔드로 사용하고, 데이터베이스로 MySQL을 사용하겠습니다.백엔드 (Node.js + Express + MySQL)프로젝트 설정:mkdir todo-appcd todo-appnpm init -ynpm install express mysql2 corsMySQL 데이터베이스 설정:MySQL에 접속하여 다음 명령어를 실행합니다:CREATE DATABASE todoapp;USE todoapp;CREATE TABLE todos ( id INT AUTO_INCREMENT PRIMARY KEY, text VARCHAR(255) NOT NULL, comp..

Node.js와 Express를 백엔드로, React를 프론트엔드로 사용하여 Todo 리스트의 CRUD(Create, Read, Update, Delete) 기능을 구현하는 방법을 설명해드리겠습니다.백엔드 (Node.js + Express)프로젝트 설정:mkdir todo-appcd todo-appnpm init -ynpm install express mongoose corsserver.js 파일 생성:const express = require('express');const mongoose = require('mongoose');const cors = require('cors');const app = express();const PORT = process.env.PORT || 5000;app.use(co..

HTTP 메서드 (GET, POST, PUT, DELETE) 심층 분석: 웹 개발의 기본서론웹 개발에서 HTTP 메서드는 클라이언트(보통 브라우저)와 서버 간의 상호 작용을 정의하는 핵심적인 역할을 합니다. HTTP 메서드는 서버에 요청을 보낼 때 수행하고자 하는 동작을 명확하게 지정해줍니다. 이 글에서는 가장 많이 사용되는 HTTP 메서드인 GET, POST, PUT, DELETE에 대해 자세히 알아보고, 각 메서드의 특징과 사용 시 주의해야 할 점을 살펴보겠습니다.1. HTTP 메서드란 무엇인가?HTTP 메서드는 클라이언트가 서버에 요청을 보낼 때 사용하는 동사라고 생각하면 쉽습니다. 예를 들어, 책을 빌려보고 싶다면 도서관 사서에게 "책을 빌려주세요"라고 요청하듯이, 웹 브라우저는 서버에 "데이터를..

스프링 부트 실전 프로젝트: REST API 기반 백엔드 개발 상세 가이드서론스프링 부트는 개발 생산성을 높이고 간편한 설정을 제공하여 현대적인 웹 애플리케이션 개발에 있어 필수적인 프레임워크로 자리매김했습니다. 특히 REST API 기반의 백엔드 개발에 있어 스프링 부트는 강력한 도구입니다. 본 글에서는 스프링 부트를 활용하여 실제 프로젝트에서 REST API 기반 백엔드를 개발하는 과정을 상세히 설명하고, 각 단계별로 고려해야 할 사항과 추가적인 팁을 제공합니다.1. 프로젝트 초기 설정스프링 초기화: Spring Initializr (start.spring.io)를 이용하여 프로젝트를 생성합니다. 필요한 의존성 (Spring Web, Spring Data JPA 등)을 선택합니다.빌드 도구: Mave..

스프링 부트 @RestController와 @RequestMapping을 이용한 REST API 개발 심층 분석서론스프링 부트는 간편하고 효율적인 개발 환경을 제공하여 REST API 개발을 획기적으로 용이하게 만들었습니다. 특히, @RestController와 @RequestMapping 애노테이션은 REST API 개발의 핵심 구성 요소로 자리매김하며 개발자들의 생산성을 크게 향상시켰습니다.본 글에서는 스프링 부트를 이용한 REST API 개발의 기본 개념부터 심층적인 내용까지 상세하게 다루어, REST API 개발에 대한 이해를 높이고 실제 개발에 적용할 수 있도록 돕고자 합니다.1. REST API란 무엇인가?REST(Representational State Transfer)는 웹 서비스를 위한 ..