참고 자료 : https://joshua1988.github.io/web-development/vuejs/v-model-usage/ 🚀 V-model이란? 🔽 속성 공식 문서에 안내된 v-model 속성의 사용법은 아래와 같아요. new Vue({ data: { inputText: '' } }) 이렇게 이용자의 입력을 받는 UI 요소들에 v-model이라는 속성을 사용하면 입력 같이 자동으로 뷰 Data 속성에 연결되게 되는 것이에요. 🔽 v-model 동작 방식 v-model 속성은 v-bind와 v-on의 기능의 조합으로 동작하게 되요. 매번 개발자가 하나하나 v-bind와 v-on 속성을 다 지정해 주지 않아도 좀 더 편하게 개발할 수 잇게 고안된 문법인 것이에요. 앞에서 살펴본 코드를 아래와 같이..

Git Hub 한 권으로 배우는 Vue js 3 웹 애플리케이션 개발 기초 실전 (영진책) COUPANG www.coupang.com "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 🗂 목차 ● [Vue+Nuxt.js] Nuxt.js 기본 ●[Vue+Nuxt.js] Nuxt.js 시작하기 ● [Vue+Nuxt.js] Nuxt.js Data 호출 방식과 API 연동 ●[Vue+Nuxt.js] Nuxt.js를 이용하여 쇼핑 상품 목록 페이지와 상세 페이지 개발 ● [Vue+Nuxt.js] Nuxt.js를 이용하여 쇼핑 상품 검색 UI 개발 ●[Vue+Nuxt.js] Vuex를 이용하여 장바구니 Page 만들기 ● [Vue+Nuxt.js] Vuex 새로고침 시 초기화..

Git Hub 한 권으로 배우는 Vue js 3 웹 애플리케이션 개발 기초 실전 (영진책) COUPANG www.coupang.com "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 🗂 목차 ● [Vue+Nuxt.js] Nuxt.js 기본 ●[Vue+Nuxt.js] Nuxt.js 시작하기 ● [Vue+Nuxt.js] Nuxt.js Data 호출 방식과 API 연동 ●[Vue+Nuxt.js] Nuxt.js를 이용하여 쇼핑 상품 목록 페이지와 상세 페이지 개발 ● [Vue+Nuxt.js] Nuxt.js를 이용하여 쇼핑 상품 검색 UI 개발 ● [Vue+Nuxt.js] Vuex를 이용하여 장바구니 Page 만들기 🚀 API 연동하기 🔽 Axios 📦 Axios 설치 ..

🚀 Nuxt.js 비동기 데이터 🔽 호출 방법 📦 개요 Nuxt.js는 SSR(Server Side Rendering) Framework로 Vue.js Single Paga Application과 `REST API` 호출 방식을 다르게 접근해야 합니다. 📦 Single Page Application과의 차이점 CSR(Client Side Rendering)인 Vue Single Page Application Data 호출 방식은 아래와 같습니다. {{ user }} `Created()` Life Cycle Hook을 이용해 Component가 생성되면 Server에 Data를 요청해 받아온 결과를 화면에 표시하는 Code에요. 이때 Server에 Data를 요청하는 시점은 브라우저에서 Vue.js Cod..

🚀 HMR(Hot Module Replacement) `HMR`은 브라우저를 새로 고치지 않아도 `Web Pack`으로 Build한 결과물이 Web Application에 실시간으로 반영될 수 있게 도와주는 설정 입니다. 브라우저 새로 고침을 위한 `Live Reload` 대신 이용 가능하고, `Web Pack Dev Server`와 함께 이용할 수도 있는 것이에요. 🔽 HMR 설정 React.js, 앵귤러, Vue.js와 같이 대부분의 Framework에서 이미 `HMR`을 이용할 수 있는 Loader들을 지원하고 있으나, 만약 개별적으로 설정하고 싶다면 아래와 같은 방식으로 설정할 수 있습니다. module.exports = { devServer: { hot: true } } Dev Server에 O..

Git Hub 🗂 목차 ● [Vue+Nuxt.js] Nuxt.js 기본 ●[Vue+Nuxt.js] Nuxt.js 시작하기 ● [Vue+Nuxt.js] Nuxt.js Data 호출 방식과 API 연동 ●[Vue+Nuxt.js] Nuxt.js를 이용하여 쇼핑 상품 목록 페이지와 상세 페이지 개발 ● [Vue+Nuxt.js] Nuxt.js를 이용하여 쇼핑 상품 검색 UI 개발 ●[Vue+Nuxt.js] Vuex를 이용하여 장바구니 Page 만들기 ● [Vue+Nuxt.js] Vuex 새로고침 시 초기화 되는 문제 해결 🗂 부록 ● [FrontEnd] HMR(Hot Module Replacement) ● [Nuxt.js] 비동기 데이터 호출 방법 ● V-Model 동작 원리와 활용 방법 ● [Nuxt.js] N..