Web/Vue.js 4

Vue.js_03 (Vuex)

Vuex statement manage pattern + library for vue.js 상태 관리 패턴 + 라이브러리 상태를 전역 저장소로 관리할 수 있도록 지원하는 라이브러리 state가 예측 가능한 방식으로만 변경될 수 있도록 보장하는 규칙 설정 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할 Vue의 공식 devtools와 통합되어 기타 고급 기능을 제공 State state는 data이며 해당 어플리케이션의 핵심이 되는 요소 각 컴포넌트에서 관리 (.html의 경우 new Vue({}), SFC에서는 .vue에 해당) DOM은 data(state)에 반응하여 DOM을 렌더링 Pass props & Emit event 각 컴포넌트는 독립적으로 데이터를 관리 데이터는 단방향 흐름으로 ..

Web/Vue.js 2021.05.16

Vue.js__02 (Vue CLI)

Component 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화 하는데 도움을 줌 CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미 즉, 컴포넌트 개발을 함에 있어 유지보수를 쉽게 만들어 줄 뿐만 아니라, 재사용성의 측면에서도 매우 강력한 기능을 제공 Vue 컴포넌트 === Vue 인스턴스 Vue Component 구조 예시 SFC Single File Component Vue의 컴포넌트 기반 개발의 핵심 특징 하나의 컴포넌트는 .vue라는 하나의 파일 안에서 작성되는 코드의 결과물 화면의 특정 영역에 대한 HTML, CSS, JavaScript 코드를 하나의 파일(.vue)에서 관리 즉, .vue 확장자를 가진 싱글 파일 컴포넌트를 통해 개발하는 방식 V..

Web/Vue.js 2021.05.15

Vue.js__01 (Vue Instance & Syntax)

Concepts of Vue.js MVVM 애플리케이션 로직을 UI로부터 분리하기 위해 설계된 디자인 패턴 구성 요소 Model View View Model Model Vue에서 Model은 JavaScript Object JavaScript의 Object 자료 구조 이 Object는 Vue Instance 내부에서 data로 사용되는데 이 값이 바뀌면 View(DOM)가 반응 View Vue에서 View는 DOM Data의 변화에 따라서 바뀌는 대상 ViewModel Vue에서 ViewModel은 모든 Vue Instance View와 Model 사이에서 Data와 DOM에 관련된 모든 일을 처리 ViewModel을 활용해 Data를 얼마만큼 잘 처리해서 보여줄 것인지(DOM)를 고민하는 것 Quick..

Web/Vue.js 2021.05.14

Vue.js_00 Intro

Vue.js란? Front-End Development 프론트엔드 개발은 HTML, CSS 그리고 JavaScript를 활용해서 데이터를 볼 수 있게 만들어 줌 이 작업을 통해 사용자는 데이터를 눈으로 볼 수 있고 데이터와 상호작용 할 수 있음 대표적인 프론트엔드 프레임워크 Vue.js, React, Angular What is Vue.js 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 현대적인 tool과 다양한 라이브러리를 통해 SPA(Single Page Aplication)를 완벽하게 지원 SPA 단일 페이지 애플리케이션 (Single Page Aplication) 현재 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 애플리케이션 단일 페이지로 구성되며 서버로부터 처음에만 페이지를 받아..

Web/Vue.js 2021.05.14