Vue34 [Vue3] Vue3 Basic with composition api 반복문 key를 고유값으로 해주는게 좋다. 그래야 VueRK 리랜더링할 구역을 쉽게 찾아. 최적화됨값 동적 바인딩을 위해 :key 로 사용({값}, index) 형태로 사용 가능key에 index 넣는건 디폴트이기때문에 딱히 의미없음. 다른 고유값넣기Array, Object 지원.데이터 반응형으로 Array에 값이 추가되거나 삭제시에도 반영됨{{ index, name }} Formv-model modifier 은 커스텀이 가능하다.참고 : https://vuejs.org/guide/components/v-model같은 데이터에 여러 input이 바인딩되면, 각각 업데이트되는대로 데이터가 변경된다.{{ data }} // clickA : A / clickB : Bmodel 여러개와 modifier 쓰기.. 2024. 11. 3. [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 Vue3 npm install vs npm ci `npm i npm install` 로 설치되지않다가 `npm ci`로 설치하면 잘 되는 경우가 있다.둘은 어떤 차이가 있을까?아래에 참고 링크를 추가해두었으니 보다 자세한 사항은 해당 글 참고.주요한 부분만 번역하여 정리해보았다. npm inpm ci설치 항목package와 dependency 설치dependency 만 설치package.json, package-lock.json 수정수정됨dependeny가 없다면 추가함절대 수정되지 않음dependeny가 없다면 error 발생속도상대적으로 느림상대적으로 빠름node_modules가 있다면해당 항목 설치되지않음재설치됨 참고https://www.geeksforgeeks.org/difference-between-npm-i-and-npm-ci-in-no.. 2024. 10. 4. 이전 1 다음