본문 바로가기

전체 글30

[Nuxt3] SSR CSR Hydration - Data fetching 효율적으로 하기 서버 사이드 렌더링 (SSR)Nuxt는 서버에서 HTML을 미리 렌더링하여 클라이언트에 전달한다.서버는 클라이언트가 필요한 데이터를 미리 가져와서 HTML에 포함시키고, 이 HTML이 브라우저에 전달되면 사용자가 페이지를 바로 볼 수 있게 된다. 이 과정에서 데이터는 서버에서 한 번 가져와 HTML에 렌더링된다.클라이언트 하이드레이션:클라이언트는 서버로부터 받은 HTML을 하이드레이션(Hydration)이라는 과정을 통해 Vue.js 애플리케이션으로 연결한다.하이드레이션 과정 > 클라이언트 사이드에서 Vue 컴포넌트가 초기화되고, 각 컴포넌트는 자신이 필요한 데이터를 다시 가져오려 할 수 있다.만약 클라이언트가 하이드레이션 시에 별도로 데이터를 가져오는 함수 ($fetch 같은 비동기 데이터 로딩 함수).. 2024. 10. 9.
(작성중)Node-fetch vs Axios vs Isomorcphic-fetch vs Ofetch https://npm-compare.com/axios,isomorphic-fetch,node-fetch,ofetch 2024. 10. 9.
[Nuxt3] useNuxtApp() 함수의 상호작용과 runWithContext()의 역할 Nuxt3 에서 script setup에 선언된 변수와 함수는 컴포넌트의 setup 함수 scope에서 실행된다.이는 해당 컴포넌트가 렌더링될 때 처음 한번만 실행되는 영영이다. 따라서, 아래와같인 script setup 최상단에서 useNuxtApp()을 호출하는 것은 올바른 방식이다.해당 시점에 컴포넌트 렌더링중으로 nuxtApp을 사용할 수 있다. 하지만, 비동기 타이머 콜백이 실행되는 시점에는 컨텍스트가 달라진다. 컨텍스트란?특정 시점에서의 Nuxt 어플리케이션 상태와 환경정보를 의미한다.에를들어, 컴포넌트 실행시 상태, 전역 설정, 플러그인, Nuxt 앱 관련 객체등의 정보이다.어플리케이션 상태정보 : Nuxt 어플리케이션이 현재 어디에서 실행(SSR, CSR)되는지 관련 정보를 포함한다.Nu.. 2024. 10. 9.
pnpm npm 은 아래의 1 pacakge와 같이 중첩되는 package도 폴별로 추가한다.node_modules - A package - 1 package - B package - 1 package pnpm은 node_modules/.pnpm 에 패키지 하드링크를 추가해 package 버전이 유지된다. 위의 예시를 pnpm으로 설치하면 아래와 같이 폴더구조가 생성된다.node_modules - .pnpm - 1 package - A package - B package  결론 : npm 2024. 10. 7.

티스토리툴바