새로운세계

Vue 3에서 Composition API와 TypeScript를 사용해 RESTful API 데이터를 부모 컴포넌트에서 호출하고, 자식 컴포넌트 두 개(테이블 그리드와 상세 뷰)를 탭으로 구분해 바인딩하는 방법을 소개합니다. Vuetify를 활용해 깔끔한 UI를 구현하며, 실용적인 예제를 통해 배우고자 하는 분들께 도움이 되고자 합니다.이번 예제에서는 부모 컴포넌트에서 검색어 입력과 버튼으로 데이터를 가져오고, 두 자식 컴포넌트가 각각 데이터를 테이블 형태와 클릭 시 개별 행의 상세 정보를 표시하는 방식으로 동작합니다. Vuetify의 탭과 그리드 컴포넌트를 사용해 직관적인 UI를 구성합니다.프로젝트 개요우리의 목표는 다음과 같습니다:부모 컴포넌트: 검색어 입력 필드와 버튼으로 RESTful API 호..

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

FastAPI는 Python으로 RESTful API를 빠르고 쉽게 구현할 수 있는 현대적인 프레임워크로, 비동기 지원과 자동 Swagger UI 같은 강력한 기능을 제공합니다. 아래에서 이를 구체적으로 설명하고, 독립적인 예제를 통해 사용 방법을 보여드리겠습니다.FastAPI란?FastAPI는 Python 3.6 이상에서 동작하며, Starlette(비동기 웹 프레임워크)과 Pydantic(데이터 검증 및 직렬화)을 기반으로 설계되었습니다. Flask와 달리 비동기 처리를 기본으로 지원하며, API 문서 자동 생성과 타입 힌트를 활용한 코드 가독성이 큰 장점입니다.주요 특징: 비동기 지원과 자동 Swagger UI1. 비동기 지원FastAPI는 Python의 asyncio와 async/await 구문을..

Python의 경량 프레임워크 Flask를 사용해 Django 없이 간단한 RESTful API를 구현하는 방법을 소개합니다. GET, POST, PUT, DELETE 메서드로 아이템을 관리하며, Vue.js 프론트엔드와 연동 시 발생할 수 있는 CORS 문제를 flask-cors로 해결합니다. 메모리 내 데이터로 동작하는 기본 예제와 Oracle DB 연결 옵션을 제공하며, 특정 출처와 메서드를 제한하는 CORS 설정도 다룹니다. Vue.js에서 Flask API를 호출하는 간단한 예제 포함. Python으로 Django를 사용하지 않고 간단한 RESTful API를 구현하려면, Flask나 FastAPI 같은 가벼운 프레임워크가 적합합니다. 여기서는 초경량 프레임워크인 Flask를 사용해 간단한 예제..

데이터 분석 환경에서 Jupyter Notebook은 친숙한 인터랙티브 환경을 제공하여 데이터 탐색, 시각화, 모델링 등 다양한 작업을 수행하는 데 널리 사용됩니다. 하지만, 분석 결과를 다른 시스템이나 서비스와 공유하고 자동화된 파이프라인을 구축하려면 추가적인 개발이 필요했습니다. 이러한 문제를 해결하기 위해 등장한 것이 바로 notebook_http 확장입니다.notebook_http는 Jupyter Notebook의 특정 셀을 HTTP API 엔드포인트로 노출시켜, 노트북을 마치 RESTful API 서버처럼 사용할 수 있도록 해줍니다. 즉, 외부에서 HTTP 요청을 통해 노트북의 코드를 실행하고 결과를 받아올 수 있다는 의미입니다. 이를 통해 데이터 분석 파이프라인을 자동화하고, 머신러닝 모델을 ..

Vue.js와 Node.js를 활용하여 실시간 주식 시세를 표시하는 웹 애플리케이션을 개발하는 과정을 단계별로 자세히 설명하고, 실제 코드와 함께 예시를 제시합니다. 이 가이드를 통해 독자들은 Vue.js와 Node.js를 이용하여 실시간 데이터를 처리하고 시각화하는 웹 애플리케이션을 개발하는 데 필요한 지식과 기술을 습득할 수 있을 것입니다.1. 프로젝트 개요본 프로젝트는 Vue.js를 사용하여 사용자 인터페이스를 구축하고, Node.js를 사용하여 백엔드 서버를 구축하여 실시간 주식 시세를 표시하는 웹 애플리케이션을 개발하는 것을 목표로 합니다. 주요 기능은 다음과 같습니다.실시간 주식 시세 표시: 외부 주식 데이터 API를 통해 실시간 주식 시세를 가져와 화면에 표시합니다.WebSocket 통신: ..

오라클 데이터베이스에서 JSON(JavaScript Object Notation) 데이터를 생성하고 조작하는 것은 현대적인 애플리케이션 개발에서 필수적인 기술입니다. 특히, RESTful API를 통해 다양한 클라이언트와 데이터를 교환하는 경우 JSON 형식은 사실상 표준으로 자리 잡았습니다. 이 글에서는 위에 제시된 오라클 스토어드 프로시저 코드를 통해 JSON 데이터를 생성하고 출력하는 과정을 상세히 설명하고, 실제 개발 환경에서 어떻게 활용될 수 있는지 다양한 예시와 함께 살펴보겠습니다. 코드 분석제공된 코드는 오라클 스토어드 프로시저를 통해 user 테이블의 데이터를 JSON 배열 형식으로 변환하여 출력하는 간단한 예시입니다.JSON_ARRAY_T, JSON_OBJECT_T: 오라클에서 JSON ..

Spring Boot 프로젝트에서 RESTful API를 개발할 때, API 문서를 작성하는 것은 필수적인 작업입니다. 잘 정돈된 API 문서는 개발팀 간의 협업을 원활하게 하고, API를 사용하는 다른 개발자들에게 명확한 정보를 제공하여 개발 생산성을 향상시킵니다. Swagger UI는 이러한 API 문서를 자동으로 생성하고 시각적으로 제공하는 강력한 도구입니다. 이 글에서는 Spring Boot 프로젝트에 Swagger UI를 적용하는 방법과, 각 코드의 의미를 상세히 설명하며 실제 예제를 통해 이해를 돕겠습니다. 아래는 위 Swagger 주석과 API 구현을 Spring Boot로 변환한 예제입니다. Spring Boot에서는 주로 Springdoc OpenAPI를 사용하여 Swagger 문서를 생..

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 = defineStore('board', { state: () => ({ boards: [], currentPage: 1, pageSize: 10, searchKeyword: '', }), actions: { async fetchBoards() { const response = await a..

JSON Schema는 JSON 데이터의 구조와 유효성을 정의하는 표준화된 방법입니다. 특히 RESTful API 개발에서 데이터 교환 형식을 명확히 하고, 클라이언트와 서버 간의 오류를 미리 방지하는 데 중요한 역할을 합니다. 이 글에서는 자바 환경에서 JSON Schema를 활용하여 데이터 유효성 검증을 수행하는 방법을 상세히 알아보고, 실제 코드 예제를 통해 이해를 돕겠습니다. 왜 JSON Schema를 사용해야 할까요?명확한 데이터 구조 정의: JSON Schema를 통해 데이터의 필수 속성, 데이터 타입, 허용 값 등을 정확하게 명시할 수 있습니다.자동화된 유효성 검증: 개발 과정에서 JSON 데이터가 정의된 스키마에 부합하는지 자동으로 검증하여 오류를 조기에 발견할 수 있습니다.API 문서화:..