새로운세계

💡 useFetch 실습: API 데이터 가져오기와 로딩/에러 처리

지난 시간에는 Nuxt의 자동 라우팅과 컴포넌트 자동 임포트 기능을 익혔습니다. 이제 실제로 애플리케이션에 생명을 불어넣을 데이터(Data)를 외부 API에서 가져와 봅시다.Nuxt의 핵심 컴포저블인 useFetch를 사용하여 데이터를 가져오고, 사용자 경험을 개선하기 위해 로딩 상태와 에러 처리까지 완벽하게 구현하는 실습을 진행합니다.1. ⚙️ useFetch의 자동 상태 관리 이해일반적인 Vue 환경에서는 API를 호출할 때 isLoading, data, error 세 가지 상태를 직접 관리해야 합니다. 하지만 useFetch는 이 모든 것을 한 번에 처리해줍니다.useFetch는 비동기 작업 후 다음과 같은 3가지 반응형(Reactive) 변수를 반환합니다.변수설명용도dataAPI 호출로 받은 최종..

🛠️ Nuxt 앱 실행 및 디버깅: 개발 서버와 nuxt.config.ts 이해

프로젝트 파일을 만들고 컴포넌트를 구성했다면, 이제 앱을 구동하고 문제가 발생했을 때 효과적으로 디버깅하는 방법을 알아야 합니다. Nuxt는 개발자 경험(DX)을 극대화하는 강력한 개발 서버와 도구를 제공합니다.1. 💻 개발 서버(Dev Server) 명령어 이해하기Nuxt 프로젝트를 초기화하면 package.json 파일에 몇 가지 스크립트가 자동 등록됩니다. 이 중 개발에 가장 핵심적인 것은 dev 명령어입니다.1.1. Nuxt 개발 서버 실행개발 중 실시간으로 변경 사항을 확인하고 싶다면 이 명령어를 사용합니다.npm run dev기능: **Hot Module Replacement (HMR)**을 지원하여 코드를 저장하는 즉시 브라우저에 반영합니다. 서버와 클라이언트 코드를 동시에 컴파일하고 실행..

🗺️ Nuxt의 파일 기반 마법: 자동 라우팅 및 컴포넌트 자동화 실습

Nuxt 개발의 진정한 시작은 자동화된 개발 경험(DX)을 체감하는 것입니다. 라우팅 설정 파일(router.js 같은)을 작성할 필요도 없고, 컴포넌트 임포트 문을 길게 쓸 필요도 없습니다.이번 시간에는 페이지 3개와 공통 헤더 컴포넌트를 직접 만들면서 Nuxt가 얼마나 빠르게 개발을 시작할 수 있게 하는지 경험해봅시다.1. 📂 실습 1: 파일 시스템 라우팅 (pages/) 바로 경험하기Nuxt는 pages/ 폴더 내에 .vue 파일을 생성하는 것만으로 자동으로 URL 경로를 연결해줍니다.1.1. 기본 페이지 3개 생성프로젝트 루트의 pages 디렉토리에서 다음 3개의 파일을 생성합니다.파일 경로URL 경로목적pages/index.vue/홈 (메인) 페이지pages/about.vue/about회사 소..

🚀 10분 만에 Nuxt 프로젝트 초고속 시작하기

안녕하세요! Nuxt.js는 Vue.js를 기반으로 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 등 복잡한 설정을 자동화해주는 프레임워크입니다. 이 글을 통해 단 10분 만에 Nuxt 개발 환경을 구축하고, 그 마법 같은 자동화 기능을 바로 경험해봅시다.1. ⏱️ 5분: 필수 준비물 확인 및 프로젝트 생성가장 먼저 필요한 준비물과 프로젝트 생성 명령어입니다. Nuxt는 Nuxi라는 공식 CLI 도구를 통해 쉽게 프로젝트를 관리할 수 있습니다.1.1. 준비물 체크Node.js: 버전 18 이상 (터미널에 node -v 입력하여 확인)터미널/명령 프롬프트: (VS Code 내장 터미널 사용 추천)코드 에디터: VS Code1.2. Nuxi로 프로젝트 생성프로젝트를 만들고 싶은 경로로 이동한 뒤,..

💡 NestJS에서 Gateway란?

NestJS에서 Gateway는 실시간 양방향 통신을 처리하기 위한 특별한 클래스입니다. 가장 흔하게는 WebSockets 기술을 사용하여 클라이언트(예: 웹 브라우저)와 서버 간의 지속적인 연결을 관리하고 데이터를 주고받는 역할을 합니다.쉽게 말해, Gateway는 서버와 클라이언트 사이에서 "실시간으로 소식을 전달하는 문지기" 또는 "우체국" 같은 역할을 한다고 생각할 수 있습니다.📬 왜 Gateway를 사용할까요? (일반적인 API와의 차이점)일반적인 REST API는 클라이언트가 요청(Request)을 보내야만 서버가 응답(Response)을 보내는 단방향/요청-응답 방식입니다.반면에 Gateway는 WebSockets을 사용하여 다음과 같은 이점을 제공합니다.특징REST API (Control..

📢 NestJS: 멀티 WebSocket 서버 운용 전략 (4000번 & 4001번)

안녕하세요! NestJS를 사용해 HTTP 포트(3000번)와는 별개로 두 개 이상의 독립적인 WebSocket 서버를 운용하는 방법을 찾고 계시는군요.두 개의 다른 포트(예: 4000번과 4001번)에서 WebSocket Gateway를 구동하는 것은 서비스별로 트래픽을 분리하거나, 각 Gateway에 특화된 로직을 적용할 때 매우 유용합니다.주어진 시나리오를 바탕으로, 서버 모니터링(4000번)과 별도의 실시간 알림(4001번)을 처리하는 두 개의 Gateway를 분리하여 구동하는 예제를 보여드리겠습니다. 🛠️ 1단계: Gateway 클래스 생성 및 설정두 개의 독립적인 WebSocket 서버를 구동하기 위해 각각 다른 포트를 지정하는 두 개의 Gateway 클래스를 생성합니다.1. Monitori..

NestJS + NuxtJS로 실시간 서버 헬스 모니터링 대시보드 만들기 (WebSocket 기반)

Backend (NestJS): 서버의 리소스 상태를 주기적으로 체크하고, 연결된 클라이언트들에게 WebSocket 이벤트를 Broadcasting 합니다.Frontend (NuxtJS): 소켓 서버에 접속하여 데이터를 수신하고, 이를 시각적인 UI로 렌더링합니다. 실시간으로 서버의 CPU, 메모리, 디스크 사용량을 모니터링하고 싶다면?NestJS 백엔드와 Nuxt 3 프론트엔드를 WebSocket으로 연결해서 멋진 대시보드를 만들어보자!키워드NestJS, Nuxt3, WebSocket, Gateway, Socket.io, 서버 모니터링, 실시간 대시보드, CPU 사용량, 메모리 사용량, os 모듈, Chart.js목표NestJS에서 주기적으로 서버 상태(os 정보)를 수집WebSocket Gateway..