새로운세계

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는 Vue.js 기반의 유연하고 강력한 SSR 프레임워크입니다. 하지만 때로는 더욱 복잡한 백엔드 로직이나 커스텀 서버 설정이 필요할 때가 있습니다. 이러한 경우 Express.js를 Nuxt.js와 함께 활용하면 효과적인 해결책이 될 수 있습니다.본 가이드에서는 Nuxt.js 프로젝트에 Express.js를 통합하여 API 서버를 구축하고, SSR을 더욱 유연하게 관리하는 방법을 자세히 알아보겠습니다.1. Nuxt.js 프로젝트 생성 및 설정먼저 새로운 Nuxt.js 프로젝트를 생성하고 필요한 패키지를 설치합니다.npx create-nuxt-app my-nuxt-appcd my-nuxt-appnpm install express2. Express 서버 구현server 디렉토리에 index.j..

Vue 3의 핵심 기능인 ref와 reactive는 데이터 반응성을 구현하는 데 필수적인 도구입니다. 두 개념은 비슷해 보이지만, 사용하는 상황과 데이터의 특성에 따라 적절하게 선택해야 합니다. 이 글에서는 ref와 reactive의 차이점을 명확히 하고, 다양한 예제를 통해 각각의 사용법을 상세히 설명하여 Vue 3 개발에 대한 이해를 높이는 것을 목표로 합니다.ref는 단일 값에 대한 반응성 참조를 생성하는 함수입니다. 즉, 문자열, 숫자, boolean 등의 기본 타입이나 객체, 배열도 감싸서 반응성을 부여할 수 있습니다. ref로 감싼 값에 접근할 때는 .value 프로퍼티를 사용합니다.import { ref } from 'vue';const count = ref(0);// 값 변경count.va..

Nuxt.js는 Vue.js를 기반으로 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 제공하는 프레임워크입니다. Nuxt에서 컴포넌트를 작성할 때, 위 예제에서 볼 수 있듯이, 인터페이스를 사용하여 복잡한 타입 정의를 간소화할 수 있습니다.withDefaults를 사용하여 속성 기본값을 설정할 수 있습니다.2. 컴포넌트 내 데이터 타입 정의ref 또는 reactive를 사용하여 컴포넌트 내 데이터를 정의할 때 타입을 명시하여 데이터의 안정성을 확보할 수 있습니다.3. 함수 타입 정의함수의 매개변수와 반환 값 타입을 명시하여 함수의 동작을 예측 가능하게 만들고 오류를 방지할 수 있습니다.4. 이벤트 핸들러 타입 정의이벤트 핸들러 함수의 매개변수 타입을 명시하여 이벤트 객체의 속성에 안전하..

Vue.js에서 데이터 변화에 따라 UI를 동적으로 업데이트하는 것은 매우 중요한 기능입니다. 이를 위해 Vue.js는 computed와 watch라는 두 가지 강력한 도구를 제공합니다. 하지만 두 개념을 명확하게 이해하지 못하면 개발 과정에서 혼란을 겪을 수 있습니다. 이 글에서는 computed와 watch의 차이점을 명확하게 설명하고, 실제 개발 환경에서 어떻게 활용해야 하는지 다양한 예시와 함께 자세히 알아보겠습니다.computed와 watch: 무엇이 다를까?computed는 데이터의 변화에 따라 계산된 값을 반환하는 데 사용됩니다. 즉, 특정 데이터가 변경될 때마다 자동으로 계산되어 새로운 값을 출력합니다. 반면, watch는 데이터의 변화를 감시하여 특정 이벤트를 트리거하는 데 사용됩니다. ..

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

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의 생산성과 유연성, 그리고 Electron의 강력한 데스크탑 앱 개발 기능을 결합하여, 웹 개발자라면 누구나 쉽고 빠르게 고품질의 데스크탑 앱을 만들 수 있습니다. 이 글에서는 Vue와 Electron을 활용하여 데스크탑 앱을 개발하는 방법에 대해 자세히 알아보고, 실제 개발 과정에서 필요한 다양한 기술과 노하우를 공유합니다.왜 Vue와 Electron일까요?Vue.js: 컴포넌트 기반의 아키텍처, 가볍고 빠른 성능, 뛰어난 문서화 등으로 웹 개발자들에게 많은 사랑을 받는 프레임워크입니다.Electron: Node.js와 Chromium을 기반으로 하여, 웹 기술을 사용하여 데스크탑 앱을 개발할 수 있도록 지원합니다. 즉, Vue로 개발한 웹 애플리케이션을 Electron으로 포장하여 mac..

Nuxt.js는 Vue.js 기반의 서버 사이드 렌더링(SSR) 프레임워크로, 풍부한 사용자 경험을 제공하는 웹 애플리케이션 개발에 매우 유용합니다. 특히, 대량의 데이터를 효율적으로 관리하고 사용자에게 제공하기 위해 페이징 기능은 필수적입니다. 이번 글에서는 Nuxt.js에서 Pinia를 활용하여 페이징된 그리드 데이터를 바인딩하는 방법에 대해 자세히 알아보고, 실제 구현 예시를 통해 이해를 돕겠습니다.왜 Pinia를 사용해야 할까요?Pinia는 Vue.js용 상태 관리 라이브러리로, Vuex의 단점을 보완하고 더욱 간결하고 직관적인 API를 제공합니다. Nuxt.js 3에서는 Pinia가 기본 상태 관리 라이브러리로 채택되어, Vuex를 대체하고 있습니다. Pinia를 사용하면 다음과 같은 장점이 있..

현대 웹 애플리케이션에서 실시간 데이터 통신은 필수 요소가 되고 있습니다. 채팅 애플리케이션, 실시간 알림 시스템, 주식 거래 애플리케이션, 게임, 실시간 데이터 시각화 등 다양한 요구를 충족시키기 위해 웹소켓은 중요한 기술로 자리 잡았습니다. 이 글에서는 Vue.js를 사용하여 웹소켓 기반 애플리케이션을 만드는 방법을 단계별로 자세히 살펴보겠습니다. 키워드는 "Vue.js, 웹소켓, 실시간, 채팅 앱, Node.js, Socket.IO, 프론트엔드, 백엔드, 실시간 데이터, Vuex, 상태 관리, 이벤트 처리, 비동기 통신, 코드 예제, 웹소켓 연결, JSON 데이터 처리, UI 업데이트, 사용자 알림, 보안, 최적화, CORS 설정"입니다.1. 웹소켓이란?웹소켓(WebSocket)은 브라우저와 서버 ..