Frontend/Nuxt34 [Vue3] 객체 기본값 설정시 factory 함수 사용 (feat. undefined) Vue를 쓰다 보면, props나 data에서 기본값(default)을 설정해야 할 때가 자주 있다. 객체나 배열처럼 참조형 데이터의 기본값을 설정할 때는 반드시 factory 함수를 써야 한다. 왜 factory 함수를 꼭 써야 하는지, 어떤 문제가 발생할 수 있는지 다루어보려한다. 1. 기본값을 직접 할당하면 발생하는 문제props: { options: { type: Object, default: {} }} default: {}는 프로그램이 시작될 때 단 한 번만 평가되어, 하나의 {} 객체가 메모리에 만들어지게 된다.이후 컴포넌트를 여러 번 만들어도, Vue는 이 {} 객체를 계속 재사용하게 된다. 2. 실제로 생기는 문제 예를 들어, 를 두 번 썼다고 생각해 보자.두 개의 컴포넌트 .. 2025. 6. 10. [Nuxt3] SSR CSR Hydration - Data fetching 효율적으로 하기 서버 사이드 렌더링 (SSR)Nuxt는 서버에서 HTML을 미리 렌더링하여 클라이언트에 전달한다.서버는 클라이언트가 필요한 데이터를 미리 가져와서 HTML에 포함시키고, 이 HTML이 브라우저에 전달되면 사용자가 페이지를 바로 볼 수 있게 된다. 이 과정에서 데이터는 서버에서 한 번 가져와 HTML에 렌더링된다.클라이언트 하이드레이션:클라이언트는 서버로부터 받은 HTML을 하이드레이션(Hydration)이라는 과정을 통해 Vue.js 애플리케이션으로 연결한다.하이드레이션 과정 > 클라이언트 사이드에서 Vue 컴포넌트가 초기화되고, 각 컴포넌트는 자신이 필요한 데이터를 다시 가져오려 할 수 있다.만약 클라이언트가 하이드레이션 시에 별도로 데이터를 가져오는 함수 ($fetch 같은 비동기 데이터 로딩 함수).. 2024. 10. 9. [Nuxt3] useNuxtApp() 함수의 상호작용과 runWithContext()의 역할 Nuxt3 에서 script setup에 선언된 변수와 함수는 컴포넌트의 setup 함수 scope에서 실행된다.이는 해당 컴포넌트가 렌더링될 때 처음 한번만 실행되는 영영이다. 따라서, 아래와같인 script setup 최상단에서 useNuxtApp()을 호출하는 것은 올바른 방식이다.해당 시점에 컴포넌트 렌더링중으로 nuxtApp을 사용할 수 있다. 하지만, 비동기 타이머 콜백이 실행되는 시점에는 컨텍스트가 달라진다. 컨텍스트란?특정 시점에서의 Nuxt 어플리케이션 상태와 환경정보를 의미한다.에를들어, 컴포넌트 실행시 상태, 전역 설정, 플러그인, Nuxt 앱 관련 객체등의 정보이다.어플리케이션 상태정보 : Nuxt 어플리케이션이 현재 어디에서 실행(SSR, CSR)되는지 관련 정보를 포함한다.Nu.. 2024. 10. 9. [Nuxt3] Nuxt란? Vue의 meta-framework- meta-framework : 프레임워크를 위한 프레임워크 역할 : ui 프레임워크인 Vue가 어떤 라이브러리를 쓸지 고민하지 않게해줌1. rendering mode 설정Vue는 SPA(Single Page Application) : csr - 서버는 브라우저에 거의 빈 HTML보냄 == link to a Javascript file//fetched and parsedNo SEO : not crawled by serch enginesSSR : 브라우저가 진입전에 js run 안해도됨SEO, 공유하기, 성능면에서 좋음Universal Rendering : SSR + SPASSR : server rendered, downloadCSR : Hydration - SSR로.. 2024. 9. 13. 이전 1 다음