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 설치 ..

🚀 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..

🚀 Vue-Cookie 🔽 개요 Cookie는 Browser(Client의 Local)에 저장하는 임시 저장소 같은 것이에요. Cookie 삭제 등을 하게 되거나, 만료일이 지나게 되면 삭제 할 수 있답니다! Cookie 외에 `localStorage`, `sessionStorage` 등 Local에 사용하는 저장소들이 또 있는 것이에요. 참고로 Cookie를 이용하게 되면 Data는 Browser에는 저장되지만, Server에는 저장 되지 않는 것이에요. 그렇기 때문에 보안에 관련된 정보는 절대 넣으면 안 되는 것이에요. 예:) 비밀번호 참고로 `vue-cooke`이랑 `vue-cookies`가 존재하는데, `vue-cookies`가 더 대중적이고, `Readme`도 잘 되어 있어 주니하랑은 이것을 이..

🚀 Vuex 🔽 개요 Vuex(뷰엑스)란 Application 상태 관리(State Management)를 돕는 Library인 것이에요. 먼저 상태(State)란 Vue의 data 속성과 비슷한 것이에요. 여기서 상태 관리란 현대 FE(Front End) Framework에서 모두 사용하는 개발 Pattern을 의미하는 것이에요. Vue.js에서는 Vuex라는 상태 관리 Pattern을 사용하는 것이에요. 상태 관리가 필요한 이유는 Component의 숫자가 많아졌을 때, Component 간 Data 전달이나, 관리가 어렵기 때문인 것이에요. Data 전달을 더 명시적이고, 효율적으로 하기 위한 방법이 상태 관리랍니다. Vuex란 Vue.js의 상태 관리 Pattern이자 Library인 것이에요. ..

🧑🏻‍💻 Git Hub 주소 🗂 목차 ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - Home / Main ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 목록 조회 ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 상세 조회 ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 등록 / 수정 ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 삭제 ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 답변 등록 / 수정 ● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 답변 삭제 👨‍👩‍👧‍..