[카테고리:] Nuxt.js

  • [Nuxt.js-8] Nuxt.js 서버 엔진 (Server engine) 활용

    [Nuxt.js-8] Nuxt.js 서버 엔진 (Server engine) 활용

    Nuxt.js의 8번째 포스트입니다. 지난 번에는 Pinia를 활용한 상태 관리 과정을 살펴보았는데요. 이번에는 Nuxt.js의 강력한 기능 중 하나인 서버 엔진(Server engine)를 활용하여 자체 API 엔드포인트를 구축하는 방법에 대해 알아보겠습니다. Nitro 서버 엔진 소개 Nuxt 3부터는 Nitro라는 강력한 서버 엔진이 내장되어 있습니다. Nitro는 Nuxt의 서버 사이드 로직을 처리하는 엔진으로, 다음과 같은 특징을 가지고 있습니다: 이러한 Nitro 엔진을…

  • [Nuxt.js-7] Nuxt.js 상태 관리 심화 (Pinia)

    [Nuxt.js-7] Nuxt.js 상태 관리 심화 (Pinia)

    안녕하세요, Nuxt.js 7번째 포스트입니다! 지난 번에는 Nuxt의 기본적인 상태 관리 방법인 useState에 대해 알아보았습니다. 이번 시간에는 대규모 애플리케이션에서 효과적으로 상태를 관리할 수 있는 Pinia에 대해 알아보겠습니다. 1. Pinia란 무엇인가? Pinia는 Vue 생태계의 공식 상태 관리 라이브러리로, Vue 3와 함께 사용하도록 설계되었습니다. 기존의 Vuex를 대체하는 차세대 상태 관리 도구로, 더 간단한 API와 타입스크립트 지원, 더 나은…

  • [Nuxt.js-6] 상태 관리(State Management)와 useState

    [Nuxt.js-6] 상태 관리(State Management)와 useState

    Nuxt.js 여섯번째 포스팅입니다. 지난 번에는 데이터 가져오기(Data Fetching)에 대해 알아보았는데요, 이번 시간에는 Nuxt.js에서 상태 관리를 어떻게 할 수 있는지, 특히 useState 컴포저블을 활용한 방법에 대해 자세히 알아보겠습니다. 상태 관리(State Management)란? 웹 애플리케이션이 복잡해질수록 여러 컴포넌트 간에 데이터를 공유하고 관리하는 것이 중요해집니다. 이러한 데이터를 ‘상태(State)’라고 부르며, 이 상태를 효율적으로 관리하는 방법을 ‘상태 관리’라고 합니다. 프로젝트에서는 사용자가…

  • [Nuxt.js-5] Nuxt.js 데이터 가져오기 (Data Fetching)

    [Nuxt.js-5] Nuxt.js 데이터 가져오기 (Data Fetching)

    지난 포스팅에는 에셋과 정적 파일 관리에 대해 알아보았는데요, 이번에는 Nuxt.js의 핵심 기능 중 하나인 데이터 가져오기(Data Fetching)에 대해 자세히 알아보겠습니다. 웹 애플리케이션에서 외부 API와의 연동은 필수적인 요소입니다. Nuxt.js는 이러한 데이터 가져오기를 위한 강력하고 직관적인 도구들을 제공하는데, 오늘은 그 중에서도 useFetch와 useAsyncData를 중심으로 살펴보겠습니다. 1. Nuxt.js의 데이터 가져오기 특징 Nuxt.js의 데이터 가져오기 기능은 다음과 같은 특징을…

  • [Nuxt.js-4] Nuxt.js 에셋(Assets) 및 정적 파일(Public) 관리

    [Nuxt.js-4] Nuxt.js 에셋(Assets) 및 정적 파일(Public) 관리

    지난 포스팅에는 레이아웃과 컴포넌트에 대해 설명했는데요, 이번에는 웹 애플리케이션 개발에 필수적인 정적 리소스 관리 방법에 대해 알아보겠습니다. 이미지, CSS, 폰트 등의 리소스를 효율적으로 관리하는 방법과 Nuxt.js에서 제공하는 assets과 public 디렉토리의 차이점을 이해하고, 실제 프로젝트에 적용하는 방법을 배워보겠습니다. 1. 에셋(Assets)과 정적 파일(Public)의 차이 Nuxt.js에서는 정적 파일을 관리하기 위한 두 가지 주요 디렉토리를 제공합니다: assets와 public. 이…

  • [Nuxt.js-3] Nuxt.js 레이아웃과 컴포넌트

    [Nuxt.js-3] Nuxt.js 레이아웃과 컴포넌트

    지난 포스트에는 Nuxt.js의 파일 기반 라우팅 시스템에 대해 알아보았습니다. 이번 포스트에는 Nuxt.js의 레이아웃 시스템과 컴포넌트 관리에 대해 자세히 알아보겠습니다. 1. 레이아웃(Layouts)이란? 레이아웃은 여러 페이지에서 공통으로 사용되는 UI 구조를 정의하는 컴포넌트입니다. 헤더, 푸터, 사이드바와 같이 여러 페이지에서 반복되는 요소들을 레이아웃으로 분리하면 코드 중복을 줄이고 일관된 사용자 경험을 제공할 수 있습니다. 2. 레이아웃 디렉토리 구조 Nuxt.js에서는 layouts…

  • [Nuxt.js-2] Nuxt.js 페이지와 라우팅 시스템

    [Nuxt.js-2] Nuxt.js 페이지와 라우팅 시스템

    지난 포스트에서 Nuxt.js의 기본 개념과 개발 환경 설정에 대해 알아보았습니다. 이번 포스트는 Nuxt.js의 핵심 기능 중 하나인 파일 기반 라우팅 시스템에 대해 자세히 알아보겠습니다. Vue.js에서는 라우팅을 위해 별도로 router 설정을 해주어야 했지만, Nuxt.js에서는 파일 구조만으로 자동으로 라우팅이 구성되는 편리한 시스템을 제공합니다. 1. Nuxt.js의 파일 기반 라우팅 Nuxt.js에서는 app/pages 디렉토리 내의 파일 구조가 곧 애플리케이션의 라우팅…

  • [Nuxt.js-1] Nuxt.js 소개 및 개발 환경 설정

    [Nuxt.js-1] Nuxt.js 소개 및 개발 환경 설정

    Nuxt.js의 기초부터 심화 내용까지 차근차근 알아보겠습니다. 오늘은 Nuxt.js가 무엇인지, 왜 사용해야 하는지, 그리고 개발 환경을 어떻게 설정하는지에 대해 포스팅합니다. Nuxt 최신 버전은 4입니다. (2025.07 기준) ver3과 ver4에 대해서 함께 다루겠습니다만, 가급적 최신 버전에 맞춰 설명하도록 하겠습니다. Nuxt.js란 무엇인가? Nuxt.js는 Vue.js 애플리케이션을 더 쉽게 개발할 수 있도록 도와주는 프레임워크입니다. Vue.js의 장점을 그대로 가져오면서 서버 사이드 렌더링(SSR),…

  • nuxt.js 개요

    (해당 글은 version3.13 기준으로 작성되었습니다.) 소개 Nuxt의 목표는 웹 개발을 직관적이고 성능이 뛰어나게 만들며, 뛰어난 개발자 경험을 집중하는는 것입니다. Nuxt는 Vue.js를 사용하여 타입 안전하고, 성능이 뛰어나며, 프로덕션 급의 풀스택 웹 애플리케이션과 웹사이트를 만들기 위한 직관적이고 확장 가능한 무료 오픈 소스 프레임워크입니다. Nuxt는 개발 초기부터 .vue 파일을 작성하는 것을 가능하게 하여 개발 중에는 핫 모듈 교체를…