반응형 전체 글38 Nuxt 3 vs WordPress: 개발자 기준 비교 ✅ Nuxt 3 vs WordPress: 개발자 기준 비교항목WordPressNuxt 3사용 편의성비개발자도 가능 (GUI)개발자 친화적커스터마이징제한적 / PHP 기반자유도 높음 (Vue, JS, API 등)퍼포먼스무거운 편 (PHP + DB)가볍고 빠름 (SSG/SSR + Vite)SEO플러그인에 의존 (Yoast 등)기본 구조 자체가 SEO 친화적확장성테마 & 플러그인 중심모듈 기반 유연한 확장유지보수쉬우나 느림 (보안 패치 多)코드 기반 유지보수 가능💡 왜 Nuxt 3가 더 낫다고 생각하냐면…UI/UX, 퍼포먼스, SEO 모두 직접 제어할 수 있음Vue 생태계 전체 활용 가능 (Pinia, Composition API, GraphQL 등)Markdown, CMS, API 등 블로그 구조를 자유롭.. 2025. 4. 14. Nuxt 3에서 SEO 최적화 제대로 하기 Nuxt 3에서 SEO 최적화 제대로 하기 🌐구글에 잘 노출되는 블로그 만들기Nuxt 3의 가장 큰 장점 중 하나는 SEO 친화적인 웹사이트를 손쉽게 만들 수 있다는 거예요.Vue 단독 프로젝트는 클라이언트 사이드 렌더링(CSR)이라 검색엔진 최적화가 어렵지만,Nuxt 3는 SSR(서버 사이드 렌더링) 및 SSG(정적 사이트 생성)을 기본 지원해검색 엔진이 페이지 내용을 잘 읽을 수 있도록 해줍니다.✅ 기본 개념 정리SSR (Server Side Rendering)서버에서 HTML을 먼저 렌더링 → 검색엔진이 바로 인식 가능 SSG (Static Site Generation)미리 렌더된 HTML을 배포 → 속도 빠르고 SEO 우수🧠 useHead()로 메타태그 설정하기Nuxt 3에서 SEO의 핵심은.. 2025. 4. 14. Nuxt 3 라우팅 완전정복 vue-router 설정 안 해도 되는 신세계, 자동 라우팅 시스템Nuxt 3를 처음 시작하면 가장 감탄하게 되는 기능 중 하나가 바로**"파일 기반 자동 라우팅"**입니다.Vue에서는 vue-router를 직접 설치하고, routes 배열을 수동으로 관리해야 했죠.하지만 Nuxt에서는 그냥 pages/ 폴더에 .vue 파일만 만들면 끝이에요!📁 기본 페이지 생성bash복사편집/pages/index.vue /pages/about.vue /pages/contact.vue 위처럼 파일을 만들면 아래처럼 자동으로 라우트가 생성돼요:파일명라우트 주소index.vue/about.vue/aboutcontact.vue/contact👆 이게 Nuxt의 자동 라우팅 시스템이에요.⚙️ 실제 예시: about.vuevu.. 2025. 4. 14. 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. [망고의 유튜브 도전기] 말투를 바꿔서 쇼츠를 올렸다 - 구독자 323 새로 올린 쇼츠로 구독자가 12명 가량 늘었다. 올린지 12시간정도 된 시점에 조회수는 약 6천 정도. 이번에 올린 쇼츠는 벤치마킹한 분의 톤과 말투를 따라서 영상을 제작했다. 특히 신경 쓴 부분은 첫 멘트 였는데 쇼츠의 특성상 첫 멘트가 궁금하지 않으면 바로 이탈하기 때문에 긴 영상 보다 훨씬 중요한 것 같다. 첫 멘트는 "수능 만점자가 쓴 걸 가져와봤는데" 로 시작했고 영상은 수능 만점자가 소개한 플래너를 보여주었다. 시작 부분의 결과는 엄청 괜찮았다. 평소 영상의 조회율에 비해 2배 이상의 좋은 결과를 냈으니까. (쇼츠는 조회율 * 시청지속 시간이 좋을 수록 많은 노출이 발생한다.) 그런데 특이한 점은 싫어요 비율이 굉장히 높은 영상이었다. 내 예상으로는 너무 짧게 하려다 보니 제대로 설명이 안되서.. 2024. 4. 15. 이전 1 2 3 4 5 다음 반응형
