dog paw / development

17단계: Nuxt의 최적화 기법Nuxt는 기본적으로 성능 최적화를 잘 지원하지만, 추가 설정으로 더욱 빠른 앱을 만들 수 있습니다.1. Lazy Loading (지연 로딩)Nuxt의 pages/ 파일 기반 라우팅은 기본적으로 코드 분할이 적용됩니다. 하지만 컴포넌트에 대해 명시적으로 지연 로딩을 설정할 수도 있습니다.예제 2. 이미지 최적화Nuxt Image 모듈을 활용해 이미지를 최적화합니다.이미지 설정nuxt.config.ts:export default defineNuxtConfig({ modules: ['@nuxt/image'], image: { domains: ['example.com'], // 외부 이미지 도메인 허용 dir: 'assets/images', // 로컬 이미지 디..

12단계: Nuxt 미들웨어Nuxt는 middleware 디렉토리를 통해 라우팅과 상태 관리를 쉽게 제어할 수 있습니다.1. 미들웨어란?미들웨어는 특정 페이지에 접근하기 전에 실행되는 코드입니다.인증, 로깅, 리다이렉션 등을 처리할 때 유용합니다.2. 글로벌 미들웨어모든 페이지에 적용되는 미들웨어.예제: 글로벌 미들웨어middleware/logger.global.js 생성:export default defineNuxtMiddleware((to, from) => { console.log(`Navigating from ${from.fullPath} to ${to.fullPath}`);});nuxt.config.ts에서 등록:export default defineNuxtConfig({ router: { ..

7단계: Nuxt의 데이터 페칭Nuxt는 데이터 페칭을 간단하고 강력하게 처리할 수 있는 내장 메서드를 제공합니다.1. useFetchuseFetch는 클라이언트와 서버에서 데이터를 가져올 수 있는 API입니다.사용 예제Post: {{ post.title }}{{ post.body }}const { data: post } = await useFetch('https://jsonplaceholder.typicode.com/posts/1');장점:서버에서 데이터를 가져오면 페이지 로드 시 데이터가 포함된 HTML이 렌더링되어 SEO와 초기 로딩 속도에 유리.클라이언트에서 실행하면 동적 데이터도 처리 가능.2. useAsyncDatauseAsyncData는 페이지 또는 컴포넌트에서 데이터를 비동기로 가져오는 데..

Nuxt에 대한 학습 내용을 단계적으로 정리해 설명하겠습니다. Nuxt는 Vue.js를 기반으로 한 프레임워크로, SSR(Server-Side Rendering), SSG(Static Site Generation), 파일 기반 라우팅, SEO 최적화, 모듈화된 구조 등 Vue.js 프로젝트를 더욱 강력하게 만들어주는 도구입니다.1단계: Nuxt란 무엇인가?Nuxt의 주요 특징SSR(서버 사이드 렌더링):서버에서 HTML을 렌더링하고 클라이언트로 보냄.SEO와 초기 로딩 속도에 유리.단순한 SPA와는 다르게 검색 엔진이 HTML을 쉽게 읽을 수 있음.SSG(정적 사이트 생성):빌드 시 모든 페이지를 HTML로 생성.Netlify, Vercel과 같은 정적 호스팅 서비스에 적합.파일 기반 라우팅:pages/..

React VS Vue리엑트나 뷰 중 어떤걸 배워야 좋을까요? 개인적으로 오랫동안 개발을 해오다 보니 어떤 언어든지 크게 중요하다고 생각하지 않습니다. 특히나 리엑트나 뷰 둘다 자바스크립트를 기반으로 한 언어라 더더욱 그런듯 싶습니다. 저 같은 경우 본업이 FE 개발은 아니지만... 회사 업무는 리엑트 아르바이트나 개인 프로젝트는 뷰를 이용하고 있습니다.이유는 여러가지가 있겠지만, 회사업무에서 리엑트를 사용하는 이유는 대부분의 회사 FE개발팀이 리엑트를 사용하고 있는데 있으며, 개인 프로젝트에 뷰를 사용하는 이유는 가볍게, 빠른 개발을 하기위 함입니다.  Quasar framework (Vue)6년전쯤 아르바이트를 하다가 React 스터디 하고 개발을 진행하다가 Vue 의 UI 프레임웍인 vuetify ..