출시·고도화 중
Framework · 2014년 공개
Vue.js는 화면을 컴포넌트로 나눠 선언적으로 만드는 점진적 자바스크립트 프레임워크이고, Nuxt는 그 위에 라우팅·서버 렌더링·서버 API를 더한 풀스택 프레임워크입니다.
Vue.js는 Evan You가 만들어 2014년에 처음 공개한 오픈 소스 자바스크립트 프레임워크로, 사용자 인터페이스를 만드는 데 쓰입니다. HTML 기반 템플릿과 반응형 상태를 결합해 데이터가 바뀌면 화면이 자동으로 갱신되며, 템플릿·스크립트·스타일을 한 파일에 담는 단일 파일 컴포넌트(.vue)가 기본 단위입니다. Nuxt는 Vue 위에 만든 풀스택 프레임워크로, 파일 기반 라우팅, 자동 가져오기, 서버 사이드 렌더링, Nitro 서버 엔진 기반의 서버 API를 기본으로 제공합니다.
Vue는 기존 페이지 일부에 스크립트 하나로 붙이는 가벼운 사용부터 Vite로 빌드하는 단일 페이지 애플리케이션까지, 필요한 만큼 점진적으로 도입할 수 있습니다. 관리 화면, 대시보드, 사내 도구처럼 상호작용이 많은 화면에 잘 맞습니다. 검색 엔진 노출과 첫 화면 속도가 중요하거나 화면과 API를 한 프로젝트에서 다루고 싶다면 Nuxt가 서버 렌더링과 정적 생성, 서버 라우트를 함께 제공하며, Node.js 서버나 정적 호스팅 등 여러 환경에 배포할 수 있습니다.
처음 배운다면 Node.js를 설치한 뒤 공식 사이트의 대화형 튜토리얼과 가이드를 따라 반응성, 컴포넌트, 템플릿 문법을 익히는 것을 권합니다. 그다음 npm create vue@latest로 Vite 기반 프로젝트를 만들어 직접 화면을 만들어 보고, 라우팅과 서버 렌더링이 필요해지면 Nuxt로 넘어가면 됩니다. 상태 관리는 Pinia, 단위 테스트는 Vitest가 공식적으로 권장되는 조합입니다.
ref, reactive, computed로 선언한 상태가 바뀌면 그 값을 쓰는 화면 부분만 효율적으로 다시 그립니다.
템플릿, 스크립트, 스타일을 .vue 파일 하나에 담고, 범위가 제한된 스타일과 TypeScript를 바로 쓸 수 있습니다.
관련 로직을 함수 단위로 묶고 composable로 재사용하므로, 큰 컴포넌트도 기능별로 정리하기 쉽습니다.
파일 기반 라우팅, 자동 가져오기, 서버 렌더링과 정적 생성, server 폴더의 API 라우트를 별도 설정 없이 제공합니다.
Vue와 Nuxt 도구는 Node.js 위에서 동작합니다. nodejs.org에서 LTS 버전을 설치한 뒤 node와 npm 버전이 표시되는지 확인합니다.
node --version && npm --version공식 프로젝트 생성 도구 create-vue를 실행하면 TypeScript, Vue Router, Pinia, Vitest 등을 쓸지 차례로 묻습니다. 만들어진 폴더에서 npm install과 npm run dev를 실행하면 Vite 개발 서버가 열립니다.
npm create vue@latestNuxt를 쓰려면 nuxi로 새 프로젝트를 만듭니다. 만들어진 폴더로 이동해 npm run dev를 실행하면 개발 서버가 기본적으로 http://localhost:3000에서 열립니다.
npx nuxi@latest init my-nuxt-appsrc/App.vue는 create-vue 프로젝트의 최상위 컴포넌트입니다. script setup 블록에서 ref(0)으로 반응형 상태 count를 만들고, 템플릿에서는 이중 중괄호로 값을 보여 주며 @click으로 클릭할 때마다 값을 1씩 늘립니다. count가 바뀌면 Vue가 바뀐 부분만 다시 그립니다. npm run dev로 개발 서버를 띄운 채 파일을 저장하면 바뀐 내용이 브라우저에 곧바로 반영됩니다.
src/App.vue
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<h1>Hello, Vue!</h1>
<button @click="count++">Clicked {{ count }} times</button>
</template>
npm create vue@latest hello-vue && cd hello-vue && npm install && npm run dev설치부터 Vue.js · Nuxt 의 핵심 개념까지, 여섯 장으로 차근차근 따라 합니다.
Vue.js · Nuxt 에 관해 묻고, 경험을 나누고, 의견을 주고받는 곳입니다.
아직 토론이 없습니다. 첫 이야기를 시작해 보세요.
댓글 0개
로그인 · 로그인하면 댓글을 남길 수 있습니다.
첫 댓글을 남겨 보세요.