새로운세계

안녕하세요, 개발자 여러분! 이번에는 Vue.js의 Composition API를 사용해 CRUD(Create, Read, Update, Delete) UI를 구성하면서 watch와 computed를 실무적으로 활용하는 방법을 블로그 글 형식으로 풀어보겠습니다. Composition API는 기존 Options API보다 유연하고 모듈화된 코드를 작성할 수 있게 해주며, 특히 로직 재사용성이 뛰어납니다.1. CRUD UI의 기본 설정CRUD UI를 구성한다고 가정하면, 사용자 목록을 표시하고 검색, 추가, 수정, 삭제 기능을 제공하는 인터페이스를 구현할 수 있습니다. Composition API를 사용하면 데이터와 로직을 함수 단위로 깔끔하게 분리할 수 있습니다. 먼저 기본 구조를 보겠습니다.  2. c..

CREATE TABLE `customers` (`del` enum('Y','N') NOT NULL DEFAULT 'N',`customerNumber` int(11) NOT NULL,`customerName` varchar(50) NOT NULL,`contactLastName` varchar(50) NOT NULL,`contactFirstName` varchar(50) NOT NULL,`phone` varchar(50) NOT NULL,`addressLine1` varchar(50) NOT NULL,`addressLine2` varchar(50) DEFAULT NULL,`city` varchar(50) NOT NULL,`state` varchar(50) DEFAULT NULL,`postalCode` var..

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

RESTful API, 웹 서비스의 기반을 이루는 아키텍처 스타일RESTful API란 무엇일까요?RESTful API는 Representational State Transfer의 약자로, HTTP 프로토콜을 기반으로 자원(resource)을 주고받는 인터페이스를 의미합니다. 즉, 웹 서버에 있는 데이터(자원)를 클라이언트(웹 브라우저, 모바일 앱 등)에서 간편하게 가져오거나 수정할 수 있도록 해주는 일종의 통로라고 생각하시면 됩니다.왜 RESTful API를 사용할까요?간결하고 직관적인 설계: HTTP 메서드(GET, POST, PUT, DELETE 등)와 URI(Uniform Resource Identifier)를 사용하여 자원을 명확하게 표현하고 조작할 수 있습니다.다양한 플랫폼 호환성: HTTP ..

Node.js 데이터베이스 모델링 및 CRUD 작업: 상세 가이드서론Node.js는 비동기 I/O 모델을 기반으로 하여 실시간 웹 애플리케이션 개발에 강점을 보이는 런타임 환경입니다. 이러한 Node.js를 활용하여 데이터베이스와 상호작용하고, 효율적인 데이터 관리를 위해서는 데이터베이스 모델링과 CRUD(Create, Read, Update, Delete) 작업에 대한 이해가 필수적입니다. 본 글에서는 Node.js에서 데이터베이스 모델링과 CRUD 작업을 수행하는 방법에 대해 자세히 알아보고, 실제 예시를 통해 학습 효과를 높이고자 합니다.1. 데이터베이스 모델링데이터베이스 모델링은 현실 세계의 데이터를 추상화하여 논리적인 구조로 표현하는 과정입니다. Node.js에서 주로 사용되는 데이터베이스 종류..

MongoDB와 Node.js 연동: Mongoose를 활용한 심층 분석서론Node.js는 비동기 이벤트 기반의 JavaScript 런타임 환경으로, 실시간 웹 애플리케이션 개발에 널리 사용됩니다. MongoDB는 유연하고 확장성이 뛰어난 NoSQL 데이터베이스로, JSON 형식의 데이터를 저장합니다. 이 두 기술을 결합하면 빠르고 효율적인 데이터 처리가 가능한 애플리케이션을 구축할 수 있습니다.이 글에서는 MongoDB와 Node.js를 연동하기 위한 ORM(Object-Relational Mapping) 도구인 Mongoose를 중심으로 자세히 알아보겠습니다. Mongoose를 사용하면 MongoDB의 복잡한 데이터 구조를 JavaScript 객체로 간편하게 모델링하고 조작할 수 있습니다.Mongoo..

스프링 부트 RESTful API 개발: 상세 가이드소개스프링 부트는 자바 개발자들에게 빠르고 쉽게 마이크로서비스를 개발할 수 있는 강력한 도구를 제공합니다. 특히 RESTful API 개발에 있어서 스프링 부트는 그 진가를 발휘합니다. 이 글에서는 스프링 부트를 이용하여 RESTful API를 개발하는 과정을 상세하게 설명하고, 실제 개발에 필요한 다양한 기능과 팁을 제공합니다.RESTful API란?RESTful API는 Representational State Transfer의 약자로, HTTP 프로토콜을 기반으로 자원(Resource)을 주고받는 웹 서비스 아키텍처 스타일입니다. RESTful API는 다음과 같은 특징을 가지고 있습니다.자원(Resource): 모든 데이터는 자원으로 표현되며, ..

스프링 엔티티 설계 및 CRUD 작업: 상세 가이드소개스프링 프레임워크는 자바 기반 엔터프라이즈 애플리케이션 개발을 위한 강력한 도구입니다. 특히, 스프링 데이터 JPA를 활용하면 객체 지향적인 방식으로 데이터베이스를 관리할 수 있어 생산성을 크게 향상시킬 수 있습니다. 이 글에서는 스프링 엔티티 설계와 CRUD(Create, Read, Update, Delete) 작업에 대해 심층적으로 다루고, 실제 개발에 필요한 다양한 개념과 예제 코드를 제공합니다.엔티티 설계엔티티는 객체 지향 모델에서 데이터베이스 테이블과 매핑되는 자바 클래스입니다. 스프링 데이터 JPA에서는 @Entity 애노테이션을 사용하여 엔티티를 선언합니다.엔티티 설계 시 고려해야 할 사항:@Id: 엔티티의 고유 식별자를 나타내는 필드에 ..