Vue Router Server-side Routing(MPA) VS Client-side Routing(SPA) MPA SPA 이미지 출처 : Vue Mastery-facebook Server-side Routing(MPA) client 가 URL을 변경 요청할 때마다 서버로 요청이 가고 서버로부터 페이지를 Return 받는 방식 Client-side Routing(SPA) SPA에서 컨텐츠를 탐색하기 위한 방식 (SPA는 하나의 페이지에서 모든 리소스들을 로드한 후 다이나믹하게 화면을 업데이트 함) 이번 강의에서는 Client-side Routing에 대해 학습할 예정이고 추후 SSR(Server Side Rendering)에 대해 다룰 예정임 (SSR에 대한 내용이 궁금하시다면 velog - SPA..
Vue CLI Vue.js 개발 환경을 빠르고 쉽게 제공 공식 지원되는 도구 project scffoding 제공 (👉 프로젝트 폴더 구조 및 라이브러리 설정) Vue CLI를 쓰지 않고 직접 설정도 가능하지만 추천 ❌ 현재 v4.0.0-rc.7 까지 Pre-release 된 상태이지만 3.x version을 사용할 예정입니다. 게으른 탓인지 글을 쓰는 중에 4.x version이 공식 릴리즈 되었습니다 😅 4.x version 을 사용해야 할 것 같습니다 ㅎ Vue CLI 구성요소 CLI vue 명령어 제공 command desc create [options] 프로젝트 생성 add [options] [pluginOptions] npm install + 이미 생성된 프로젝트에 plugin 추가 invok..
Components 컴포넌트란? 재사용 가능한 코드 블럭 모듈화 및 관리가 용이한 코드베이스를 만드는데 도움이 됨 컴포넌트들을 조합하여 어플리케이션 개발 컴포넌트들은 부모 자식 관계로 트리 구조 형성 이미지 출처 : Cracking Vue.js 컴포넌트는 SPA(Single Page Application) 개발 시 가장 기본적이고 중요한 요소임 전역 컴포넌트 Vue.component("product", {}); 첫번째 인자값은 컴포넌트 명 두번째 인자는 컴포넌트의 option들을 설정 (type은 object) ⭐ Component 작성시 data 속성은 함수 형태로 선언 Vue.component("product", { template: ``, data() { return {}; }, methods: {..
🚀사전 준비 쇼핑몰 예제 코드 작성 (Step_0) 예제 소스 내려받기 $> git clone https://github.com/wooyoung85/vuejs-study.git $> cd vuejs-study/example ## Visual Studio Code 실행 $> code . 템플릿, 보간법, Mustache 구문, Interpolation ({{}}) I have a {{ product }} {{ product + 's' }} {{ onSale ? 'YES' : 'NO' }} {{ product.getSalePrice() }} Mustache 구문 안에 있는 값은 해당 data 속성 값으로 대체됨 data 속성 값이 변경될 때 마다 화면이 갱신됨 (아래 예제에서는 product나 onSale ..
Vue.js 란? progressive framework for building user interfaces 2014 년 11월 9일에 Vue.js v0.11 Release 후 현재 v2.6.10 까지 Release 됨 vue - Roadmap | github Google Creative Lab에서 일하던 EVAN YOU 가 개발 현재 가장 주목받고 있는 Frontend Framework 중 하나 이미지 출처 : risingstars.js.org npm-stat 확인 npm-stat.com 사용량으로 보면 React가 월등히 앞서고 있음 🙄 but, 2~3년 전과 비교해 본다면 그 격차가 매우 줄었음 Developer Survey Results 2019 React.js and Vue.js are both..