본문 바로가기
반응형

분류 전체보기39

Nuxt 3 설치할 땐 왜 nuxi를 쓰나요? create-nuxt-app과의 차이점 정리 🧩Nuxt 3를 처음 설치할 때 공식 문서에서는 이렇게 안내하죠:bash복사편집npx nuxi init my-nuxt-app Vue 개발자 입장에서는 “어? create-nuxt-app은 어디 갔지?”라는 생각이 들 수 있어요.맞아요. Nuxt 2까지 사용되던 create-nuxt-app은 Nuxt 3에서는 더 이상 권장되지 않습니다.🤖 nuxi란?nuxi는 Nuxt 3 전용 CLI(Command Line Interface) 도구예요.Nuxt 3 프로젝트를 초기화하고, 실행하거나 빌드할 때 사용하는 모든 명령어는 이제 nuxi를 통해 처리합니다.📦 기본 설치 명령bash복사편집npx nuxi init my-nuxt-app cd my-nuxt-app npm.. 2025. 4. 14.
Nuxt 3란 무엇인가? Vue 개발자를 위한 빠른 시작 Vue를 이미 알고 있다면 Nuxt 3는 마치 “Vue의 확장팩”처럼 느껴질 거예요.하지만 단순한 확장을 넘어, SSR 기반 SEO 최적화, 파일 기반 라우팅, 정적 사이트 생성(SSG) 같은 고급 기능들을 거의 설정 없이 제공하는 프레임워크랍니다.✅ Nuxt 3는 왜 쓰나요?기존 Vue 프로젝트에서는 직접 설정해야 했던 부분들을 Nuxt는 자동으로 해줘요. 예를 들어:기능VueNuxt라우팅vue-router 직접 설정파일 기반 자동 라우팅SEO 설정 직접 구성useHead() 제공SSR 구성webpack, express 등 따로 구성기본 내장정적 사이트 생성별도 플러그인 필요nuxt generate 한 줄이면 끝🧪 Nuxt 3 설치 및 프로젝트 생성bash복사편집npx nuxi init nuxt3-b.. 2025. 4. 14.
Nuxt에서 말하는 SSR과 SSG 완전 정복 ✅ 1. SSR (Server-Side Rendering)💬 개념브라우저가 보기 전에, 서버가 먼저 HTML을 만들어서 보내주는 방식사용자가 페이지에 접속하면 서버가 HTML을 그때 생성함초기 로딩이 빠르고 SEO에 강함 (검색 엔진이 쉽게 읽을 수 있음)서버가 항상 살아있어야 함💻 흐름브라우저가 /posts 요청Nuxt 서버가 HTML을 서버에서 렌더링완성된 HTML이 브라우저에 전송됨브라우저에서 Hydration(인터랙션 가능하게) 진행🔧 Nuxt 설정 (기본값)Nuxt 3는 기본이 SSR 모드야. 따로 설정하지 않아도 동작해.ts복사편집// nuxt.config.ts export default defineNuxtConfig({ ssr: true }) 🧠 언제 쓰면 좋을까?SEO가 중요한 페이.. 2025. 4. 14.
Nuxt 3로 블로그 만들기 #1 – Nuxt는 도대체 뭘까? Vue는 알겠는데... Nuxt는 뭔가요?Vue로 웹앱을 만들다 보면 어느 순간 이런 생각이 들어요."라우팅을 자동으로 해주면 좋겠는데...""서버도 같이 다룰 수 있으면 좋겠는데...""정적 사이트로도, SSR도 하고 싶고..."이런 고민을 해결해주는 게 바로 Nuxt.js입니다.Nuxt는 Vue를 기반으로 한 프레임워크로, Vue를 더 편하고 더 강력하게 쓸 수 있도록 도와줍니다.💡 Nuxt 3는 뭐가 다른가요?Nuxt는 현재 Nuxt 3로 진화했고, 내부적으로 많은 변화가 있었습니다.Vue 3, Vite, Nitro 등 최신 기술을 품고 훨씬 가벼워지고 빨라졌죠.Nuxt 2Nuxt 3Vue 2 기반Vue 3 기반Webpack 사용Vite 사용서버 기능 제한API, Middleware 등 백엔드 내.. 2025. 4. 14.
반응형